From 067029705dd3c78b54ea4765357ba58930144aab Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 29 Feb 2024 09:57:22 +0100
Subject: [PATCH] fix(front): fix discussion comment changed subscription done
 before having slug value

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 src/views/Discussions/DiscussionView.vue | 90 +++++++++++++-----------
 1 file changed, 48 insertions(+), 42 deletions(-)

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<void> => {
     await fetchMore({
       // New variables
       variables: {
-        slug: props.slug,
+        slug: slug.value,
         page: page.value,
         limit: COMMENTS_PER_PAGE,
       },