diff --git a/src/views/Discussions/DiscussionView.vue b/src/views/Discussions/DiscussionView.vue index c5de7ad7a..c3d87629f 100644 --- a/src/views/Discussions/DiscussionView.vue +++ b/src/views/Discussions/DiscussionView.vue @@ -179,6 +179,7 @@ import { MemberRole } from "@/types/enums"; import { PERSON_MEMBERSHIPS } from "@/graphql/actor"; import { Dialog } from "@/plugins/dialog"; import { useI18n } from "vue-i18n"; +import { watch } from "vue"; const props = defineProps<{ slug: string }>(); @@ -187,6 +188,8 @@ const COMMENTS_PER_PAGE = 10; const { currentActor } = useCurrentActorClient(); +const slug = computed(() => props.slug); + const { result: discussionResult, onError: onDiscussionError, @@ -196,52 +199,55 @@ const { } = useQuery<{ discussion: IDiscussion }>( GET_DISCUSSION, () => ({ - slug: props.slug, + slug: slug.value, page: page.value, limit: COMMENTS_PER_PAGE, }), () => ({ - enabled: props.slug !== undefined, + enabled: slug.value !== undefined, }) ); -subscribeToMore({ - document: DISCUSSION_COMMENT_CHANGED, - variables: () => ({ - slug: props.slug, - page: page.value, - limit: COMMENTS_PER_PAGE, - }), - updateQuery( - previousResult: any, - { subscriptionData }: { subscriptionData: any } - ) { - const previousDiscussion = previousResult.discussion; - const lastComment = - subscriptionData.data.discussionCommentChanged.lastComment; - hasMoreComments.value = !previousDiscussion.comments.elements.some( - (comment: IComment) => comment.id === lastComment.id - ); - if (hasMoreComments.value) { - return { - discussion: { - ...previousDiscussion, - lastComment: lastComment, - comments: { - elements: [ - ...previousDiscussion.comments.elements.filter( - ({ id }: { id: string }) => id !== lastComment.id - ), - lastComment, - ], - total: previousDiscussion.comments.total + 1, +watch(slug, (newSlug: string | undefined | null) => { + if (!newSlug) return; + subscribeToMore({ + document: DISCUSSION_COMMENT_CHANGED, + variables: () => ({ + slug: slug.value, + page: page.value, + limit: COMMENTS_PER_PAGE, + }), + updateQuery( + previousResult: any, + { subscriptionData }: { subscriptionData: any } + ) { + const previousDiscussion = previousResult.discussion; + const lastComment = + subscriptionData.data.discussionCommentChanged.lastComment; + hasMoreComments.value = !previousDiscussion.comments.elements.some( + (comment: IComment) => comment.id === lastComment.id + ); + if (hasMoreComments.value) { + return { + discussion: { + ...previousDiscussion, + lastComment: lastComment, + comments: { + elements: [ + ...previousDiscussion.comments.elements.filter( + ({ id }: { id: string }) => id !== lastComment.id + ), + lastComment, + ], + total: previousDiscussion.comments.total + 1, + }, }, - }, - }; - } + }; + } - return previousDiscussion; - }, + return previousDiscussion; + }, + }); }); const discussion = computed(() => discussionResult.value?.discussion); @@ -271,7 +277,7 @@ const { mutate: replyToDiscussionMutation } = useMutation<{ }>({ query: GET_DISCUSSION, variables: { - slug: props.slug, + slug: slug.value, page: page.value, }, }); @@ -280,7 +286,7 @@ const { mutate: replyToDiscussionMutation } = useMutation<{ store.writeQuery({ query: GET_DISCUSSION, - variables: { slug: props.slug, page: page.value }, + variables: { slug: slug.value, page: page.value }, data: { discussion: { ...discussionCached, @@ -323,7 +329,7 @@ const { mutate: updateComment } = useMutation< }>({ query: GET_DISCUSSION, variables: { - slug: props.slug, + slug: slug.value, page: page.value, }, }); @@ -338,7 +344,7 @@ const { mutate: updateComment } = useMutation< } store.writeQuery({ query: GET_DISCUSSION, - variables: { slug: props.slug, page: page.value }, + variables: { slug: slug.value, page: page.value }, data: { discussion: discussionCached }, }); }, @@ -378,7 +384,7 @@ const loadMoreComments = async (): Promise => { await fetchMore({ // New variables variables: { - slug: props.slug, + slug: slug.value, page: page.value, limit: COMMENTS_PER_PAGE, },