read read notification in front end working

src/components/comments/Comment.vue

@@ -2,7 +2,7 @@
   <article
     :id="`comment-${comment.id}`"
     class="comment | flow"
-    :data-status="setStatus(comment)"
+    :data-status="status"
   >
     <header>
       <p>
@@ -53,6 +53,7 @@ import "dayjs/locale/fr";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
 import { useDialogStore } from "../../stores/dialog";
+import { computed } from "vue";
 
 dayjs.locale("fr");
 
@@ -68,17 +69,13 @@ const api = useApiStore();
 const dialog = useDialogStore();
 
 //  Functions
-function setStatus(comment) {
-  try {
-    if (!user?.notifications?.comments[comment.id].isRead) {
-      return "unread";
-    } else {
-      return undefined;
-    }
-  } catch (error) {
-    return undefined;
-  }
-}
+const status = computed(() => {
+  const correspondingNotification = user.notifications.find(
+    (notification) => notification.id === comment.id
+  );
+  if (!correspondingNotification) return undefined;
+  return correspondingNotification.isRead ? undefined : "unread";
+});
 
 function formatDate(date) {
   const todayNumber = parseInt(dayjs().format("YYMMD"));

src/components/comments/Comments.vue

@@ -12,7 +12,10 @@
             :comment="comment"
             :commentIndex="comments.length - commentIndex"
             :key="comment.id"
-            @click="openedComment = comment"
+            @click="
+              readNotification(comment);
+              openComment(comment);
+            "
             @update:file="changeFile"
             @close:comment="closeComment"
           />
@@ -244,6 +247,22 @@ function handleCommentPositionClick(event) {
   isAddOpen.value = true;
   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;
+  }
+}
 </script>
 
 <style>