read comment notification working

src/stores/api.js

@@ -2,35 +2,6 @@ import { defineStore } from "pinia";
 import uniqid from "uniqid";
 
 export const useApiStore = defineStore("api", () => {
-  /**
-   * Asynchronously fetches JSON data corresponding to a given path.
-   *
-   * @param {string} [path=window.location.pathname] - The path for which to fetch data.
-   *   - If no path is provided, the function will use the current page's path.
-   *   - If the path is "/", it is assumed to be the homepage, and "home.json" is fetched.
-   *   - For other paths, the function will append ".json" to the path and fetch that URL.
-   *
-   * @returns {Promise<Object>} A promise that resolves to the JSON data if the fetch is successful.
-   *
-   * @throws {Error} Will throw an error if the HTTP request fails (e.g., non-200 status code).
-   *   - The error will include the HTTP status code and a message indicating the fetch failed.
-   *
-   * @example
-   * // Fetch data for the current page
-   * fetchData().then(data => {
-   *   console.log(data);
-   * }).catch(error => {
-   *   console.error('Error fetching data:', error);
-   * });
-   *
-   * @example
-   * // Fetch data for a specific path
-   * fetchData('/about').then(data => {
-   *   console.log(data);
-   * }).catch(error => {
-   *   console.error('Error fetching data:', error);
-   * });
-   */
   async function fetchData(path = window.location.pathname) {
     const isHomePage = path === "/";
     path = path === "/" ? "/home" : path;
@@ -57,47 +28,6 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  function fetchDataThroughKQL() {
-    const api = "/api/query";
-
-    const username = import.meta.env.VITE_USERNAME;
-    const password = import.meta.env.VITE_PASSWORD;
-
-    const token = btoa(`${username}:${password}`);
-
-    const headers = {
-      Authorization: `Basic ${token}`,
-    };
-
-    const request = {
-      method: "post",
-      body: JSON.stringify({
-        query: `page('home')`,
-        select: {
-          testImages: {
-            query: "page.testImages.toFiles",
-            select: {
-              url: true,
-            },
-          },
-          blocks: {
-            query: "page.testBlocks.toBlocks",
-          },
-        },
-      }),
-      headers,
-    };
-
-    fetch(api, request)
-      .then((response) => response.json())
-      .then((response) => {
-        console.log(response);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }
-
   async function fetchRoute(path, method, data) {
     const config = {
       method: method,
@@ -212,11 +142,12 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
-  async function readNotification(notificationId) {
+  async function readNotification(comment) {
     const headers = {
       method: "POST",
       body: JSON.stringify({
-        notificationId,
+        projectUuid: comment.location.project.uuid,
+        notificationId: comment.id,
       }),
     };
     try {
@@ -278,7 +209,6 @@ export const useApiStore = defineStore("api", () => {
   }
 
   return {
-    fetchDataThroughKQL,
     fetchData,
     fetchRoute,
     addComment,

src/stores/user.js

@@ -1,26 +1,45 @@
-import { defineStore } from "pinia";
+import { defineStore, storeToRefs } from "pinia";
 import { ref, computed } from "vue";
+import { useProjectsStore } from "./projects";
 
 export const useUserStore = defineStore("user", () => {
   const user = ref(null);
 
+  const { projects } = storeToRefs(useProjectsStore());
+
   const notifications = computed(() => {
-    return typeof user.value.notifications === "array"
-      ? user.value.notifications
-      : Object.values(user.value.notifications);
+    return projects.value.reduce((acc, project) => {
+      if (!project.notifications) return acc;
+
+      const projectNotifications = project.notifications.map(
+        (notification) => ({
+          ...notification,
+          project: {
+            id: project.id,
+            name: project.title,
+          },
+          isRead:
+            notification.author.uuid === user.value.uuid ||
+            notification.readby?.includes(user.value.uuid),
+        })
+      );
+
+      return [...acc, ...projectNotifications];
+    }, []);
   });
 
   function readNotification(notificationId) {
-    user.value.notifications.forEach((notification) => {
+    notifications.value = notifications.value.map((notification) => {
       if (notification.id === notificationId) {
-        notification.isread = "true";
+        notification.isRead = true;
       }
+      return notification;
     });
   }
 
   function readAllNotifications(notificationId) {
     user.value.notifications.forEach((notification) => {
-      notification.isread = true;
+      notification.isRead = true;
     });
   }