mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
b378bcb286
- remove no-ssr, which was not necessary and causing the edit field not to appear the majority of the times visiting a Post. - this was really bad user experience since a user would need to refresh the page to comment. - removed args in refetchPostComments as there are no params passed in when it is called anymore - needed to add an if statement since if there are no comments on a Post, then this.$apollo.queries.Post is undefined and it errors out trying to call refetch() - update test to remove no-ssr Co-authored-by: Mike Aono <aonomike@gmail.com>
83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<h3 style="margin-top: -10px;">
|
|
<span>
|
|
<ds-icon name="comments" />
|
|
<ds-tag
|
|
v-if="comments"
|
|
style="margin-top: -4px; margin-left: -12px; position: absolute;"
|
|
color="primary"
|
|
size="small"
|
|
round
|
|
>{{ comments.length }}</ds-tag> Comments
|
|
</span>
|
|
</h3>
|
|
<ds-space margin-bottom="large" />
|
|
<div
|
|
v-if="comments && comments.length"
|
|
id="comments"
|
|
class="comments"
|
|
>
|
|
<comment
|
|
v-for="comment in comments"
|
|
:key="comment.id"
|
|
:comment="comment"
|
|
/>
|
|
</div>
|
|
<hc-empty
|
|
v-else
|
|
name="empty"
|
|
icon="messages"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Comment from '~/components/Comment.vue'
|
|
import HcEmpty from '~/components/Empty.vue'
|
|
|
|
export default {
|
|
components: {
|
|
Comment,
|
|
HcEmpty,
|
|
},
|
|
props: {
|
|
post: { type: Object, default: () => {} },
|
|
},
|
|
data() {
|
|
return {
|
|
comments: [],
|
|
}
|
|
},
|
|
watch: {
|
|
Post(post) {
|
|
this.comments = post[0].comments || []
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$root.$on('refetchPostComments', () => {
|
|
this.refetchPostComments()
|
|
})
|
|
},
|
|
methods: {
|
|
refetchPostComments() {
|
|
if (this.$apollo.queries.Post) {
|
|
this.$apollo.queries.Post.refetch()
|
|
}
|
|
},
|
|
},
|
|
apollo: {
|
|
Post: {
|
|
query() {
|
|
return require('~/graphql/PostCommentsQuery.js').default(this)
|
|
},
|
|
variables() {
|
|
return {
|
|
slug: this.post.slug,
|
|
}
|
|
},
|
|
fetchPolicy: 'cache-and-network',
|
|
},
|
|
},
|
|
}
|
|
</script>
|