fix(frontend): fix notifications issues (#2551)

QuivrHQ · May 7, 2024 · 691658d · 691658d
1 parent 7e49e6c
commit 691658d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/frontend/lib/components/PageHeader/Notifications/Notifications.tsx b/frontend/lib/components/PageHeader/Notifications/Notifications.tsx
@@ -44,12 +44,29 @@ export const Notifications = (): JSX.Element => {
     for (const notification of notifications) {
       await supabase
         .from("notifications")
-        .update({ read: !notification.read })
+        .update({ read: true })
         .eq("id", notification.id);
     }
     await updateNotifications();
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      const panel = document.getElementById("notifications-panel");
+
+      if (!panel?.contains(target)) {
+        setPanelOpened(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   useEffect(() => {
     const channel = supabase
       .channel("notifications")
@@ -74,8 +91,13 @@ export const Notifications = (): JSX.Element => {
   }, []);
 
   return (
-    <div className={styles.notifications_wrapper}>
-      <div onClick={() => setPanelOpened(!panelOpened)}>
+    <div id="notifications-panel" className={styles.notifications_wrapper}>
+      <div
+        onClick={(event) => {
+          setPanelOpened(!panelOpened);
+          event.nativeEvent.stopImmediatePropagation();
+        }}
+      >
         <Icon
           name="notifications"
           size="large"

diff --git a/frontend/lib/components/PageHeader/PageHeader.tsx b/frontend/lib/components/PageHeader/PageHeader.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 
 import { useMenuContext } from "@/lib/context/MenuProvider/hooks/useMenuContext";
 import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
+import { useDevice } from "@/lib/hooks/useDevice";
 import { ButtonType } from "@/lib/types/QuivrButton";
 
 import { Notifications } from "./Notifications/Notifications";
@@ -24,6 +25,7 @@ export const PageHeader = ({
   const { isOpened } = useMenuContext();
   const { isDarkMode, setIsDarkMode } = useUserSettingsContext();
   const [lightModeIconName, setLightModeIconName] = useState("sun");
+  const { isMobile } = useDevice();
 
   const toggleTheme = () => {
     setIsDarkMode(!isDarkMode);
@@ -50,7 +52,7 @@ export const PageHeader = ({
             hidden={button.hidden}
           />
         ))}
-        <Notifications />
+        {!isMobile && <Notifications />}
         <Icon
           name={lightModeIconName}
           color="black"