add / readNotification working

src/components/comments/Comments.vue

@@ -8,6 +8,7 @@
           :key="pageIndex + commentIndex"
           class="comment | flow"
           :data-status="setStatus(comment)"
+          @click="readNotification(comment)"
         >
           <header>
             <p>
@@ -66,6 +67,7 @@ import uniqid from "uniqid";
 import { ref } from "vue";
 import { useUserStore } from "../../stores/user";
 import { usePageStore } from "../../stores/page";
+import { useApiStore } from "../../stores/api";
 
 dayjs.locale("fr");
 
@@ -76,13 +78,14 @@ const { currentPageIndex, file, comments } = defineProps({
 });
 const { user } = useUserStore();
 const { page } = usePageStore();
+const api = useApiStore();
 
 const newCommentText = ref("");
 const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);
 
 // Functions
-function addComment(event) {
+async function addComment(event) {
   event.preventDefault();
   const date = dayjs().format();
   const comment = {
@@ -94,22 +97,9 @@ function addComment(event) {
     date,
     id: uniqid(),
   };
-
-  const headers = {
-    method: "POST",
-    body: JSON.stringify(comment),
-  };
-
-  fetch("/add-comment.json", headers)
-    .then((res) => res.json())
-    .then((newFile) => {
-      newCommentText.value = "";
-      isAddOpen.value = false;
-      emits("update:file", newFile);
-    })
-    .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
-    });
+  const newFile = await api.addComment(comment);
+  newCommentText.value = "";
+  isAddOpen.value = false;
 }
 
 function formatDate(date) {
@@ -134,7 +124,7 @@ function closeAddField() {
 
 function setStatus(comment) {
   try {
-    if (user?.notifications?.comments.hasOwnProperty(comment.id)) {
+    if (!user?.notifications?.comments[comment.id].isRead) {
       return "unread";
     } else {
       return undefined;
@@ -143,4 +133,14 @@ function setStatus(comment) {
     return undefined;
   }
 }
+
+async function readNotification(notificationId) {
+  const newNotifications = await api.readNotification(
+    user.uuid,
+    "comments",
+    notificationId
+  );
+
+  user.notifications = newNotifications;
+}
 </script>

src/stores/api.js

@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import uniqid from "uniqid";
 
 export const useApiStore = defineStore("api", () => {
   /**
@@ -120,5 +121,60 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  return { fetchDataThroughKQL, fetchData, fetchRoute };
+  async function addComment(comment) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify(comment),
+    };
+
+    try {
+      const response = await fetch("/add-comment.json", headers);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const newFile = await response.json();
+      return newFile;
+    } catch (error) {
+      console.error(
+        "Une erreur s'est produite lors de l'ajout du commentaire :",
+        commentaire,
+        error
+      );
+      throw error;
+    }
+  }
+
+  async function readNotification(userUuid, group, notificationId) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify({
+        userUuid,
+        notificationId,
+        group,
+      }),
+    };
+    try {
+      const response = await fetch("/read-notification.json", headers);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const newNotifications = await response.json();
+      return newNotifications;
+    } catch (error) {
+      console.error(
+        "Une erreur s'est produite lors de la lecture de la notification n°",
+        notificationId,
+        error
+      );
+      throw error;
+    }
+  }
+
+  return {
+    fetchDataThroughKQL,
+    fetchData,
+    fetchRoute,
+    addComment,
+    readNotification,
+  };
 });