fix(notifications): added a debouncing mechanism

frontend/app/quality-assistant/ProcessTab/ProcessTab.tsx

@@ -160,9 +160,8 @@ const ProcessTab = (): JSX.Element => {
       </div>
       <div>
         <div
-          className={`${styles.first_line}  ${
-            !filteredProcess.length ? styles.empty : ""
-          }`}
+          className={`${styles.first_line}  ${!filteredProcess.length ? styles.empty : ""
+            }`}
         >
           <div className={styles.left}>
             <Checkbox

frontend/lib/components/Menu/components/NotificationsButton/NotificationsButton.tsx

@@ -12,7 +12,6 @@ export const NotificationsButton = (): JSX.Element => {
   const { supabase } = useSupabase();
 
   useEffect(() => {
-    console.log("NotificationsButton");
     const channel = supabase
       .channel("notifications")
       .on(

frontend/lib/context/NotificationsProvider/notifications-provider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useEffect, useState } from "react";
+import { createContext, useCallback, useEffect, useState } from "react";
 
 import {
   BulkNotification,
@@ -11,84 +11,126 @@ type NotificationsContextType = {
   isVisible: boolean;
   setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
   bulkNotifications: BulkNotification[];
-  setBulkNotifications: React.Dispatch<
-    React.SetStateAction<BulkNotification[]>
-  >;
+  setBulkNotifications: React.Dispatch<React.SetStateAction<BulkNotification[]>>;
   updateNotifications: () => Promise<void>;
-  unreadNotifications?: number;
-  setUnreadNotifications?: React.Dispatch<React.SetStateAction<number>>;
+  unreadNotifications: number;
+  setUnreadNotifications: React.Dispatch<React.SetStateAction<number>>;
 };
 
-export const NotificationsContext = createContext<
-  NotificationsContextType | undefined
->(undefined);
+export const NotificationsContext = createContext<NotificationsContextType | undefined>(undefined);
 
 export const NotificationsProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }): JSX.Element => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [unreadNotifications, setUnreadNotifications] = useState(0);
-  const [bulkNotifications, setBulkNotifications] = useState<
-    BulkNotification[]
-  >([]);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [unreadNotifications, setUnreadNotifications] = useState<number>(0);
+  const [bulkNotifications, setBulkNotifications] = useState<BulkNotification[]>([]);
   const { supabase } = useSupabase();
 
-  const updateNotifications = async () => {
+  const fetchNotifications = async (): Promise<NotificationType[]> => {
+    const { data, error } = await supabase.from("notifications").select();
+    if (error) {
+
+      return [];
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unnecessary-condition
+    return data || [];
+  };
+
+  const processNotifications = (notifications: NotificationType[]): BulkNotification[] => {
+    const bulkMap: { [key: string]: NotificationType[] } = {};
+    notifications.forEach((notif) => {
+      if (!bulkMap[notif.bulk_id]) {
+        bulkMap[notif.bulk_id] = [];
+      }
+      bulkMap[notif.bulk_id].push(notif);
+    });
+
+    return Object.keys(bulkMap).map((bulkId) => ({
+      bulk_id: bulkId,
+      notifications: bulkMap[bulkId],
+      category: bulkMap[bulkId][0].category,
+      brain_id: bulkMap[bulkId][0].brain_id,
+      datetime: bulkMap[bulkId][0].datetime,
+    }));
+  };
+
+  const updateNotifications = async (): Promise<void> => {
     try {
-      let notifs = (await supabase.from("notifications").select()).data;
-      if (notifs) {
-        notifs = notifs.sort(
-          (a: NotificationType, b: NotificationType) =>
-            new Date(b.datetime).getTime() - new Date(a.datetime).getTime()
-        );
+      const lastRetrieved = localStorage.getItem("lastRetrieved");
+      const now = Date.now();
+
+      if (lastRetrieved && now - parseInt(lastRetrieved) < 1000) {
+
+        return;
       }
 
-      const bulkMap: { [key: string]: NotificationType[] } = {};
-      notifs?.forEach((notif: NotificationType) => {
-        if (!bulkMap[notif.bulk_id]) {
-          bulkMap[notif.bulk_id] = [];
-        }
-        bulkMap[notif.bulk_id].push(notif);
-      });
-
-      const bulkNotifs: BulkNotification[] = Object.keys(bulkMap).map(
-        (bulkId) => ({
-          bulk_id: bulkId,
-          notifications: bulkMap[bulkId],
-          category: bulkMap[bulkId][0].category,
-          brain_id: bulkMap[bulkId][0].brain_id,
-          datetime: bulkMap[bulkId][0].datetime,
-        })
+      localStorage.setItem("lastRetrieved", now.toString());
+
+      const notifications = await fetchNotifications();
+      const sortedNotifications = notifications.sort(
+        (a, b) => new Date(b.datetime).getTime() - new Date(a.datetime).getTime()
       );
 
+      const bulkNotifs = processNotifications(sortedNotifications);
       setBulkNotifications(bulkNotifs);
-      setUnreadNotifications(
-        bulkNotifs.filter((bulk) => !bulk.notifications[0].read).length
-      );
+
+      const unreadCount = bulkNotifs.filter((bulk) => !bulk.notifications[0].read).length;
+      setUnreadNotifications(unreadCount);
     } catch (error) {
-      console.error(error);
+      console.error("Error updating notifications:", error);
     }
   };
 
+  const debounce = <T extends (...args: unknown[]) => void>(func: T, delay: number): T & { cancel: () => void } => {
+    let timeoutId: NodeJS.Timeout; // Holds the timeout ID for the current debounce delay
+    let lastArgs: Parameters<T>; // Stores the last arguments passed to the debounced function
+
+    const debouncedFunction = (...args: Parameters<T>) => {
+      lastArgs = args; // Update the last arguments with the current call's arguments
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (timeoutId) {
+        clearTimeout(timeoutId); // Clear the existing timeout if it exists
+      }
+      // Set a new timeout to call the function after the specified delay
+      timeoutId = setTimeout(() => {
+        func(...lastArgs); // Call the function with the last arguments
+      }, delay);
+    };
+
+    debouncedFunction.cancel = () => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (timeoutId) {
+        clearTimeout(timeoutId); // Clear the timeout if the debounced function is canceled
+      }
+    };
+
+    return debouncedFunction as T & { cancel: () => void }; // Return the debounced function with a cancel method
+  };
+
+  const debouncedUpdateNotifications = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    debounce(updateNotifications, 1000),
+    [updateNotifications]
+  );
+
   useEffect(() => {
-    void (async () => {
-      for (const notifications of bulkNotifications) {
-        if (
-          notifications.notifications.every((notif) => notif.status !== "info")
-        ) {
-          for (const notification of notifications.notifications) {
-            await supabase
-              .from("notifications")
-              .update({ read: true })
-              .eq("id", notification.id);
-          }
-        }
+    if (isVisible) {
+      const lastRetrieved = localStorage.getItem("lastRetrieved");
+      const now = Date.now();
+
+      if (!lastRetrieved || now - parseInt(lastRetrieved) >= 1000) {
+        void debouncedUpdateNotifications();
       }
-      await updateNotifications();
-    })();
-  }, [isVisible]);
+
+      return () => {
+        debouncedUpdateNotifications.cancel();
+      };
+    }
+  }, [isVisible, debouncedUpdateNotifications]);
 
   return (
     <NotificationsContext.Provider
@@ -99,6 +141,7 @@ export const NotificationsProvider = ({
         setBulkNotifications,
         updateNotifications,
         unreadNotifications,
+        setUnreadNotifications,
       }}
     >
       {children}