feature/IO-3096-GlobalNotifications - Checkpoint

client/src/components/header/header.component.jsx

@@ -27,7 +27,7 @@ import Icon, {
   UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Badge, Layout, Menu, Space } from "antd";
+import { Badge, Layout, Menu, Space, Spin } from "antd";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -50,6 +50,7 @@ import { debounce } from "lodash";
 import { useQuery } from "@apollo/client";
 import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
 import { NotificationCenterContainer } from "../notification-center/notification-center.container.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 
 // Used to Determine if the Header is in Mobile Mode, and to toggle the multiple menus
 const HEADER_MOBILE_BREAKPOINT = 576;
@@ -125,6 +126,57 @@ function Header({
 
   const { t } = useTranslation();
 
+  const { isConnected } = useSocket(bodyshop);
+  const [notificationVisible, setNotificationVisible] = useState(false);
+  const [displayCount, setDisplayCount] = useState(0); // Explicit state for badge
+
+  const {
+    data: unreadData,
+    refetch: refetchUnread,
+    loading: unreadLoading
+  } = useQuery(GET_UNREAD_COUNT, {
+    fetchPolicy: "network-only",
+    pollInterval: isConnected ? 0 : 30000 // Poll only if socket is down
+  });
+
+  const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count ?? 0;
+
+  // Update displayCount when unreadCount changes
+  useEffect(() => {
+    console.log("Updating displayCount with unreadCount:", unreadCount);
+    setDisplayCount(unreadCount);
+  }, [unreadCount]);
+
+  // Initial fetch and socket status handling
+  useEffect(() => {
+    console.log("Running initial refetchUnread");
+    refetchUnread();
+  }, [refetchUnread]);
+
+  useEffect(() => {
+    if (!isConnected && !unreadLoading) {
+      console.log("Socket disconnected, refetching unread count");
+      refetchUnread();
+    }
+  }, [isConnected, unreadLoading, refetchUnread]);
+
+  // Debug logging
+  useEffect(() => {
+    console.log("Unread Count State:", {
+      unreadCount,
+      displayCount,
+      unreadLoading,
+      isConnected,
+      unreadData: unreadData?.notifications_aggregate,
+      rawUnreadData: unreadData
+    });
+  }, [unreadCount, displayCount, unreadLoading, isConnected, unreadData]);
+
+  const handleNotificationClick = (e) => {
+    setNotificationVisible(!notificationVisible);
+    if (handleMenuClick) handleMenuClick(e);
+  };
+
   const [isMobile, setIsMobile] = useState(() => {
     const effectiveWidth = window.innerWidth / (window.devicePixelRatio || 1);
     return effectiveWidth <= HEADER_MOBILE_BREAKPOINT;
@@ -135,39 +187,6 @@ function Header({
     setIsMobile(effectiveWidth <= HEADER_MOBILE_BREAKPOINT);
   }, 200);
 
-  const [notificationVisible, setNotificationVisible] = useState(false);
-
-  const {
-    data: unreadData,
-    error: unreadError,
-    refetch: refetchUnread,
-    loading: unreadLoading
-  } = useQuery(GET_UNREAD_COUNT, {
-    fetchPolicy: "network-only", // Force network request for fresh data
-    pollInterval: 30000, // Poll every 30 seconds to ensure updates
-    onError: (err) => {
-      console.error("Error fetching unread count:", err);
-      console.log("Unread data state:", unreadData, "Error details:", err);
-    }
-  });
-
-  const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count || 0;
-
-  // Refetch unread count when the component mounts, updates, or on specific events
-  useEffect(() => {
-    refetchUnread();
-  }, [refetchUnread, bodyshop, currentUser]); // Add dependencies to trigger refetch on user or shop changes
-
-  // Log unread count for debugging
-  useEffect(() => {
-    console.log("Unread count updated:", unreadCount, "Loading:", unreadLoading, "Error:", unreadError);
-  }, [unreadCount, unreadLoading, unreadError]);
-
-  const handleNotificationClick = (e) => {
-    setNotificationVisible(!notificationVisible);
-    if (handleMenuClick) handleMenuClick(e);
-  };
-
   useEffect(() => {
     window.addEventListener("resize", handleResize);
     window.addEventListener("orientationchange", handleResize);
@@ -688,8 +707,10 @@ function Header({
     // Right-aligned items on desktop, merged on mobile
     {
       key: "notifications",
-      icon: (
-        <Badge count={unreadCount}>
+      icon: unreadLoading ? (
+        <Spin size="small" />
+      ) : (
+        <Badge count={displayCount}>
           <BellFilled />
         </Badge>
       ),