read comment working

src/components/comments/Comment.vue

@@ -3,6 +3,7 @@
     :id="`comment-${comment.id}`"
     class="comment | flow"
     :data-status="status"
+    @click="read()"
   >
     <header>
       <p>
@@ -15,7 +16,7 @@
         <time
           class="comment__date"
           :datetime="dayjs(comment.date).format('YYYY-MM-DD')"
-          >{{ formatDate(comment.date) }}</time
+          >{{ formatDate() }}</time
         >
       </p>
     </header>
@@ -29,7 +30,7 @@
         }}
       </p>
       <div
-        v-if="comment.author.uuid === user.uuid"
+        v-if="comment.author.uuid === userStore.user.uuid"
         class="comment__ctas | mt-8"
       >
         <button class="btn btn--transparent btn--icon btn--sm" data-icon="edit">
@@ -38,7 +39,7 @@
         <button
           class="btn btn--transparent btn--icon btn--sm"
           data-icon="delete"
-          @click="deleteComment($event, comment)"
+          @click="deleteComment($event)"
         >
           <span class="sr-only">Supprimer</span>
         </button>
@@ -54,6 +55,7 @@ import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
 import { useDialogStore } from "../../stores/dialog";
 import { computed } from "vue";
+import { storeToRefs } from "pinia";
 
 dayjs.locale("fr");
 
@@ -64,22 +66,25 @@ const { comment, commentIndex } = defineProps({
 
 const emits = defineEmits(["update:file", "close:comment"]);
 
-const { user } = useUserStore();
+const userStore = useUserStore();
 const api = useApiStore();
 const dialog = useDialogStore();
 
 //  Functions
 const status = computed(() => {
-  const correspondingNotification = user.notifications.find(
+  const correspondingNotification = userStore.notifications.find(
     (notification) => notification.id === comment.id
   );
-  if (!correspondingNotification) return undefined;
-  return correspondingNotification.isRead ? undefined : "unread";
+  if (!correspondingNotification.isRead) {
+    return "unread";
+  } else {
+    return undefined;
+  }
 });
 
-function formatDate(date) {
+function formatDate() {
   const todayNumber = parseInt(dayjs().format("YYMMD"));
-  const dateNumber = parseInt(dayjs(date).format("YYMMD"));
+  const dateNumber = parseInt(dayjs(comment.date).format("YYMMD"));
 
   if (dateNumber === todayNumber) {
     return "Aujourd'hui";
@@ -97,17 +102,17 @@ function closeAddField() {
   newCommentText.value = "";
 }
 
-async function readNotification(notificationId) {
-  const newNotifications = await api.readNotification(
-    user.uuid,
-    "comments",
-    notificationId
-  );
-
-  user.notifications = newNotifications;
+async function read() {
+  if (status.value !== "unread") return;
+  try {
+    const newNotification = await api.readNotification(comment.id);
+    userStore.readNotification(comment.id);
+  } catch (error) {
+    console.log("Erreur lors de la lecture de la notification : ", error);
+  }
 }
 
-async function deleteComment(event, comment) {
+async function deleteComment(event) {
   event.stopPropagation();
   const newFile = await api.deleteComment(comment);
   dialog.updateFile(newFile);

src/components/comments/Comments.vue

@@ -12,10 +12,7 @@
             :comment="comment"
             :commentIndex="comments.length - commentIndex"
             :key="comment.id"
-            @click="
-              readNotification(comment);
-              openComment(comment);
-            "
+            @click="openComment(comment)"
             @update:file="changeFile"
             @close:comment="closeComment"
           />
@@ -248,16 +245,6 @@ function handleCommentPositionClick(event) {
   toggleCommentPositionMode(false);
 }
 
-function readNotification(comment) {
-  const correspondingNotification = user.notifications.find(
-    (notification) => notification.id === comment.id
-  );
-
-  if (correspondingNotification) {
-    correspondingNotification.isRead = true;
-  }
-}
-
 function openComment(comment) {
   if (comment.replies.length) {
     openedComment.value = comment;

src/stores/api.js

@@ -189,28 +189,25 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  async function readNotification(userUuid, group, notificationId) {
+  async function readNotification(notificationId) {
     const headers = {
       method: "POST",
       body: JSON.stringify({
-        userUuid,
         notificationId,
-        group,
       }),
     };
     try {
-      const response = await fetch("/mark-as-read.json", headers);
+      const response = await fetch("/read-comment.json", headers);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
-      const newNotifications = await response.json();
-      return newNotifications;
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(data);
+      } else {
+        return data;
+      }
     } catch (error) {
-      console.error(
-        "Une erreur s'est produite lors de la lecture de la notification n°",
-        notificationId,
-        error
-      );
       throw error;
     }
   }

src/stores/user.js

@@ -10,5 +10,13 @@ export const useUserStore = defineStore("user", () => {
       : Object.values(user.value.notifications);
   });
 
-  return { user, notifications };
+  function readNotification(notificationId) {
+    user.value.notifications.forEach((notification) => {
+      if (notification.id === notificationId) {
+        notification.isRead = true;
+      }
+    });
+  }
+
+  return { user, notifications, readNotification };
 });