read comment notification working

src/components/Menu.vue

@@ -115,15 +115,15 @@ import { useProjectStore } from "../stores/project";
 
 const route = useRoute();
 const isExpanded = ref(true);
-const { user } = storeToRefs(useUserStore());
+const { user, notifications } = storeToRefs(useUserStore());
 const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore());
 const { isEmptyBrief } = useProjectStore();
 const { page } = storeToRefs(usePageStore());
 
 const unreadNotificationsCount = computed(() => {
   if (!user.value) return undefined;
-  const count = user.value.notifications.filter(
-    (notification) => notification.isread != "true"
+  const count = notifications.value.filter(
+    (notification) => !notification.isRead
   ).length;
   if (count === 0) return undefined;
   return count;
@@ -168,7 +168,7 @@ function isCurrent(navItem) {
 
 function hasUnreadNotification(project) {
   if (!user.value) return false;
-  return user.value.notifications.some((notification) => {
+  return notifications.value.some((notification) => {
     return (
       notification.isread != "true" &&
       project.uri.includes(notification.location.project.uri)

src/components/comments/Comment.vue

@@ -109,7 +109,7 @@ const getStatus = computed(() => {
   const correspondingNotification = userStore.notifications.find(
     (notification) => notification.id === comment.id
   );
-  if (correspondingNotification && correspondingNotification.isread != "true") {
+  if (correspondingNotification && !correspondingNotification.isRead) {
     return "unread";
   }
   return undefined;
@@ -143,7 +143,7 @@ function handleClick() {
 async function read() {
   if (getStatus.value !== "unread") return;
   try {
-    const newNotification = await api.readNotification(comment.id);
+    const newNotification = await api.readNotification(comment);
     console.log(newNotification);
     userStore.readNotification(comment.id);
   } catch (error) {

src/components/notifications/Comment.vue

@@ -1,7 +1,6 @@
 <template>
   <article
     class="notification | bg-white rounded-lg | p-16 | flow"
-    :data-status="notification.isread == 'true' ? 'read' : 'unread'"
     data-type="comment"
     @click="router.push(notification.location.dialoguri + '&comments=true')"
   >

src/components/notifications/Content.vue

@@ -1,7 +1,6 @@
 <template>
   <article
     class="notification | bg-white rounded-lg | p-16 | flow"
-    :data-status="notification.isread == 'true' ? 'read' : 'unread'"
     data-type="content"
     @click="
       read(notification);

src/components/notifications/Reply.vue

@@ -1,7 +1,6 @@
 <template>
   <article
     class="notification | bg-white rounded-lg | p-16 | flow"
-    :data-status="notification.isread == 'true' ? 'read' : 'unread'"
     data-type="comment"
     @click="router.push(notification.location.dialoguri + '&comments=true')"
   >

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;
     });
   }
 

src/views/Notifications.vue

@@ -44,6 +44,7 @@
         <component
           :is="notificationComponents[notification.type]"
           :notification="notification"
+          :data-status="notification.isRead ? 'read' : 'unread'"
         />
       </template>
     </section>