102 lines
2.7 KiB
Vue
102 lines
2.7 KiB
Vue
<template>
|
|
<div class='' :class='{ "user_posts--no_border_bottom": posts && !posts.length }'>
|
|
<div class='user_posts__title'>Posts by {{username}}</div>
|
|
|
|
<template v-if='!posts'>
|
|
<thread-post-placeholder v-if='!posts'>
|
|
</thread-post-placeholder>
|
|
</template>
|
|
|
|
<scroll-load
|
|
:loading='loadingPosts'
|
|
@loadNext='loadNewPosts'
|
|
v-else-if='posts.length'
|
|
>
|
|
<thread-post
|
|
v-for='(post, index) in posts'
|
|
:key='"thread-post-" + post.id'
|
|
|
|
:post='post'
|
|
:show-thread='true'
|
|
:click-for-post='true'
|
|
:class='{"post--last": index === posts.length-1}'
|
|
></thread-post>
|
|
<template v-if='loadingPosts'>
|
|
<b-skeleton
|
|
></b-skeleton>
|
|
</template>
|
|
</scroll-load>
|
|
<template v-else>This user hasn't posted anything yet</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AjaxErrorHandler from '.././assets/js/errorHandler'
|
|
import ThreadPost from '../components/Post'
|
|
|
|
export default {
|
|
name: 'UserPosts',
|
|
props: ['username'],
|
|
components: {
|
|
ThreadPost
|
|
},
|
|
data () {
|
|
return {
|
|
posts: null,
|
|
loadingPosts: false,
|
|
nextPostsCount: 0,
|
|
nextURL: ''
|
|
}
|
|
},
|
|
methods: {
|
|
loadNewPosts () {
|
|
if(this.nextURL === null) return
|
|
|
|
this.loadingPosts = true
|
|
|
|
this.axios
|
|
.get(this.nextURL)
|
|
.then(res => {
|
|
this.loadingPosts = false
|
|
|
|
if(!this.posts) this.posts = []
|
|
|
|
let currentPostsIds = this.posts.map(p => p.id)
|
|
let filteredPosts =
|
|
res.data.Posts.filter(p => !currentPostsIds.includes(p.id))
|
|
|
|
this.posts.push(...filteredPosts)
|
|
this.nextURL = res.data.meta.nextURL
|
|
this.nextPostsCount = res.data.meta.nextPostsCount
|
|
})
|
|
.catch((e) => {
|
|
this.loadingPosts = false
|
|
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$store.dispatch('setTitle', this.$route.params.username + ' - Posts')
|
|
|
|
this.axios
|
|
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.$route.params.username}?posts=true`)
|
|
.then(res => {
|
|
this.posts = res.data.Posts
|
|
this.nextURL = res.data.meta.nextURL
|
|
this.nextPostsCount = res.data.meta.nextPostsCount
|
|
})
|
|
.catch(e => {
|
|
let invalidId = e.response.data.errors.find(error => {
|
|
return error.name === 'accountDoesNotExist'
|
|
})
|
|
|
|
if(invalidId) {
|
|
this.$store.commit('set404Page', true)
|
|
} else {
|
|
AjaxErrorHandler(this.$store)(e)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script> |