From 60061e5c3488ff1f3a22f5f6afef1ddf3de2df34 Mon Sep 17 00:00:00 2001
From: "Kemas M. Aryadary Rasyad"
 <112590882+aryadary0706@users.noreply.github.com>
Date: Tue, 4 Aug 2026 09:56:46 +0700
Subject: [PATCH] perbaikan refetch notifikasi pada header

---
 src/Layout/Header-internify.tsx |  4 +-
 src/hooks/useNotification.ts    | 88 ++++++++++++++++++++++++++++-----
 2 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/src/Layout/Header-internify.tsx b/src/Layout/Header-internify.tsx
index 6417460..6cf5c1b 100644
--- a/src/Layout/Header-internify.tsx
+++ b/src/Layout/Header-internify.tsx
@@ -10,7 +10,7 @@ export default function Header({ toggleSidebar }: { toggleSidebar: () => void })
   const nav = useNavigate();
   const { user } = useCurrentUser();
   const [imageError, setImageError] = useState(false);
-  const { unreadCount } = useNotifications();
+  const { hasUnreadNotifications } = useNotifications();
   const photoUrl = resolveFileUrl(user?.profile_picture);
 
   useEffect(() => {
@@ -42,7 +42,7 @@ export default function Header({ toggleSidebar }: { toggleSidebar: () => void })
       <div className="flex flex-row gap-6 items-center">
         <button onClick={() => nav("notifications")} className="relative">
           <Bell className="w-5 h-5 hover:text-red-800"/>
-          {unreadCount > 0 && (
+          {hasUnreadNotifications && (
             <span className="absolute -top-1 -right-0.5 w-2.5 h-2.5 bg-red-600 rounded-full border-2 border-white" />
           )}
         </button>
diff --git a/src/hooks/useNotification.ts b/src/hooks/useNotification.ts
index 7d05cec..8c1b022 100644
--- a/src/hooks/useNotification.ts
+++ b/src/hooks/useNotification.ts
@@ -19,35 +19,97 @@ export const useNotifications = () => {
       .finally(() => setLoading(false));
   }, []);
 
-  useEffect(() => { refetch(); }, [refetch]);
+  useEffect(() => {
+    refetch();
+
+    const handleNotificationUpdate = () => {
+      refetch();
+    };
+
+    window.addEventListener("notifications-updated", handleNotificationUpdate);
+
+    return () => {
+      window.removeEventListener(
+        "notifications-updated",
+        handleNotificationUpdate,
+      );
+    };
+  }, [refetch]);
 
   const markAllRead = async () => {
     try {
       const { message } = await markAllAsRead();
-      setNotifications(prev => prev.map(n => ({ ...n, is_read: true })));
-      return { success: true as const, message };
+
+      setNotifications((prev) =>
+        prev.map((notification) => ({
+          ...notification,
+          is_read: true,
+        })),
+      );
+
+      window.dispatchEvent(new Event("notifications-updated"));
+
+      return {
+        success: true as const,
+        message,
+      };
     } catch (err: any) {
-      const msg = err?.response?.data?.message ?? "Gagal menandai semua notifikasi.";
+      const msg =
+        err?.response?.data?.message ?? "Gagal menandai semua notifikasi.";
+
       setError(msg);
-      return { success: false as const, message: msg };
+
+      return {
+        success: false as const,
+        message: msg,
+      };
     }
   };
 
   const markOneRead = async (id: number) => {
     try {
       const { message } = await markAsRead(id);
-      setNotifications(prev =>
-        prev.map(n => n.id === id ? { ...n, is_read: true } : n)
+
+      setNotifications((prev) =>
+        prev.map((notification) =>
+          notification.id === id
+            ? { ...notification, is_read: true }
+            : notification,
+        ),
       );
-      return { success: true as const, message };
+
+      window.dispatchEvent(new Event("notifications-updated"));
+
+      return {
+        success: true as const,
+        message,
+      };
     } catch (err: any) {
       const msg = err?.response?.data?.message ?? "Gagal menandai notifikasi.";
+
       setError(msg);
-      return { success: false as const, message: msg };
+
+      return {
+        success: false as const,
+        message: msg,
+      };
     }
   };
+  //notifikasi di header, jika ada notifikasi yang belum dibaca maka akan muncul titik merah di icon bell
+  const hasUnreadNotifications = notifications.some(
+    (notification) => !notification.is_read,
+  );
+  //jumlah notifikasi yang belum dibaca
+  const unreadCount = notifications.filter((n) => !n.is_read).length;
 
-  const unreadCount = notifications.filter(n => !n.is_read).length;
-
-  return { notifications, unreadCount, loading, error, refetch, markAllRead, markOneRead };
-};
\ No newline at end of file
+  return {
+    notifications,
+    unreadCount,
+    hasUnreadNotifications,
+    loading,
+    error,
+    refetch,
+    markAllRead,
+    markOneRead,
+  };
+};