comments reactive

src/components/comments/Comment.vue

@@ -52,6 +52,7 @@ import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
+import { useDialogStore } from "../../stores/dialog";
 
 dayjs.locale("fr");
 
@@ -64,6 +65,7 @@ const emits = defineEmits(["update:file", "close:comment"]);
 
 const { user } = useUserStore();
 const api = useApiStore();
+const dialog = useDialogStore();
 
 //  Functions
 function setStatus(comment) {
@@ -111,7 +113,7 @@ async function readNotification(notificationId) {
 async function deleteComment(event, comment) {
   event.stopPropagation();
   const newFile = await api.deleteComment(comment);
-  emits("update:file", newFile);
+  dialog.updateFile(newFile);
   if (comment.parentId) {
     emits("close:comment");
   }

src/components/comments/Comments.vue

@@ -134,12 +134,6 @@ const sortedReplies = ref(null);
 watch(openedComment, (newVal) => {
   sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
 });
-watch(
-  () => comments,
-  (newVal) => {
-    sortedComments.value = newVal.reverse();
-  }
-);
 watch(isAddOpen, (newVal) => {
   if (newVal) {
     setTimeout(() => {
@@ -191,6 +185,7 @@ async function replyComment(newComment) {
   const newFile = await api.replyComment(newComment);
   newCommentText.value = "";
   isAddOpen.value = false;
+  dialog.updateFile(newFile);
   openedComment.value = newFile.comments.find(
     (item) => item.id === openedComment.value.id
   );

src/components/project/client-brief/PdfViewer.vue

@@ -17,7 +17,7 @@
       <VPdfViewer
         :darkMode="true"
         :initialThumbnailsVisible="true"
-        :src="file.url"
+        :src="openedFile.url"
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
@@ -42,10 +42,11 @@ import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
 import { ref, watch } from "vue";
 import { useDialogStore } from "../../../stores/dialog";
 import { useRoute, useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
 
 const dialog = useDialogStore();
-dialog.openedFile = dialog.content.files[0];
-const file = dialog.openedFile;
+const { openedFile, comments } = storeToRefs(useDialogStore());
+openedFile.value = dialog.content.files[0];
 
 const router = useRouter();
 const route = useRoute();
@@ -69,15 +70,12 @@ watch(isCommentsOpen, (newVal) => {
   }
 });
 
-watch(
-  () => file,
-  (newVal) => {
-    removeCommentBubbles();
-    if (newVal.comments) {
-      setCommentBubbles();
-    }
+watch(openedFile, (newVal) => {
+  removeCommentBubbles();
+  if (newVal.comments) {
+    setCommentBubbles();
   }
-);
+});
 
 // Functions
 const onPdfLoaded = () => {
@@ -121,8 +119,8 @@ const onPdfLoaded = () => {
 };
 
 function setCommentBubbles() {
-  if (!file.comments) return;
-  file.comments.forEach((comment) => {
+  if (!comments.value) return;
+  comments.value.forEach((comment) => {
     const bubble = document.createElement("a");
 
     bubble.classList.add("comment-bubble");