Notifications page : mark all as read working

src/stores/api.js

@@ -212,6 +212,24 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  async function readAllNotifications() {
+    try {
+      const response = await fetch("/read-all-notifications.json");
+      if (!response.ok) {
+        console.log(response);
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(data);
+      } else {
+        console.log("All notifications read.");
+      }
+    } catch (error) {
+      throw error;
+    }
+  }
+
   return {
     fetchDataThroughKQL,
     fetchData,
@@ -220,5 +238,6 @@ export const useApiStore = defineStore("api", () => {
     deleteComment,
     replyComment,
     readNotification,
+    readAllNotifications,
   };
 });

src/stores/user.js

@@ -18,5 +18,11 @@ export const useUserStore = defineStore("user", () => {
     });
   }
 
-  return { user, notifications, readNotification };
+  function readAllNotifications(notificationId) {
+    user.value.notifications.forEach((notification) => {
+      notification.isRead = true;
+    });
+  }
+
+  return { user, notifications, readNotification, readAllNotifications };
 });

src/views/Notifications.vue

@@ -5,6 +5,7 @@
     <button
       class="btn | absolute top-0 right-gutter"
       :disabled="!sortedNotifications.length"
+      @click="readAll()"
     >
       Marquer tout come lu
     </button>
@@ -105,15 +106,16 @@
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import Tabs from "../components/Tabs.vue";
-import { usePageStore } from "../stores/page";
 import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
+import { useApiStore } from "../stores/api";
 
 dayjs.locale("fr");
 
-const { page } = storeToRefs(usePageStore());
+const userStore = useUserStore();
 const { notifications } = storeToRefs(useUserStore());
+const api = useApiStore();
 const currentTab = ref("all");
 const tabs = computed(() => {
   return [
@@ -161,6 +163,15 @@ function formatDate(notification) {
     return dayjs(notification.date).format("DD MMM YY");
   }
 }
+
+function readAll() {
+  try {
+    api.readAllNotifications();
+    userStore.readAllNotifications();
+  } catch (error) {
+    console.log("Could not read all notifications : ", error);
+  }
+}
 </script>
 
 <style scoped>