feature/IO-3096-GlobalNotifications - Checkpoint - Notification Center

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

@@ -137,12 +137,32 @@ function Header({
 
   const [notificationVisible, setNotificationVisible] = useState(false);
 
-  const { data: unreadData } = useQuery(GET_UNREAD_COUNT, {
-    fetchPolicy: "cache-and-network"
+  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);
@@ -669,7 +689,7 @@ function Header({
     {
       key: "notifications",
       icon: (
-        <Badge count={unreadCount} offset={[10, 0]}>
+        <Badge count={unreadCount}>
           <BellFilled />
         </Badge>
       ),

client/src/components/notification-center/notification-center.component.jsx

@@ -22,7 +22,9 @@ const NotificationCenterComponent = ({
     console.log(`Rendering notification ${index}:`, {
       id: notification.id,
       scenarioTextLength: notification.scenarioText.length,
-      key: `${notification.id}-${index}`
+      read: notification.read,
+      created_at: notification.created_at,
+      associationid: notification.associationid // Log associationid for debugging
     });
     return (
       <List.Item
@@ -45,11 +47,16 @@ const NotificationCenterComponent = ({
     );
   };
 
-  console.log("Rendering NotificationCenter with notifications:", {
-    count: notifications.length,
-    ids: notifications.map((n) => n.id),
-    totalCount: notifications.length
-  });
+  console.log(
+    "Rendering NotificationCenter with notifications:",
+    notifications.length,
+    notifications.map((n) => ({
+      id: n.id,
+      read: n.read,
+      created_at: n.created_at,
+      associationid: n.associationid
+    }))
+  );
 
   return (
     <div className={`notification-center ${visible ? "visible" : ""}`}>

client/src/components/notification-center/notification-center.container.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useQuery, useMutation } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
@@ -19,9 +19,9 @@ export function NotificationCenterContainer({ visible, onClose }) {
     variables: {
       limit: 20,
       offset: 0,
-      where: showUnreadOnly ? { read: { _is_null: true } } : {}
+      where: showUnreadOnly ? { read: { _is_null: true } } : {} // Default to all notifications
     },
-    fetchPolicy: "cache-and-network",
+    fetchPolicy: "cache-and-network", // Ensure reactivity to cache updates
     notifyOnNetworkStatusChange: true,
     onError: (err) => {
       setError(err.message);
@@ -48,39 +48,69 @@ export function NotificationCenterContainer({ visible, onClose }) {
     onError: (err) => setError(err.message)
   });
 
+  // Remove refetchNotifications function and useEffect/context logic
   useEffect(() => {
     if (data?.notifications) {
       const processedNotifications = data.notifications.map((notif) => {
         let scenarioText;
+        let scenarioMeta;
         try {
           scenarioText =
             typeof notif.scenario_text === "string" ? JSON.parse(notif.scenario_text) : notif.scenario_text || [];
+          scenarioMeta =
+            typeof notif.scenario_meta === "string" ? JSON.parse(notif.scenario_meta) : notif.scenario_meta || [];
         } catch (e) {
           console.error("Error parsing JSON for notification:", notif.id, e);
           scenarioText = [notif.fcm_text || "Invalid notification data"];
+          scenarioMeta = [];
         }
 
         if (!Array.isArray(scenarioText)) scenarioText = [scenarioText];
+        if (!Array.isArray(scenarioMeta)) scenarioMeta = [scenarioMeta];
 
+        console.log("Processed notification:", {
+          id: notif.id,
+          scenarioText,
+          scenarioMeta,
+          read: notif.read,
+          created_at: notif.created_at,
+          raw: notif // Log raw data for debugging
+        });
         return {
           id: notif.id,
           jobid: notif.jobid,
           associationid: notif.associationid,
           scenarioText,
+          scenarioMeta, // Add scenarioMeta for completeness (optional for rendering)
           created_at: notif.created_at,
           read: notif.read,
           __typename: notif.__typename
         };
       });
 
-      console.log("Processed Notifications:", processedNotifications);
+      console.log(
+        "Notifications data updated:",
+        data?.notifications?.map((n) => ({
+          id: n.id,
+          read: n.read,
+          created_at: n.created_at
+        }))
+      );
+      console.log(
+        "Processed Notifications:",
+        processedNotifications.map((n) => ({
+          id: n.id,
+          read: n.read,
+          created_at: n.created_at
+        }))
+      );
       console.log("Number of notifications to render:", processedNotifications.length);
       setNotifications(processedNotifications);
       setError(null);
     } else {
       console.log("No data yet or error in data:", data, queryError);
     }
-  }, [data]);
+  }, [data, queryError]);
 
   useEffect(() => {
     if (queryError || mutationError) {
@@ -88,7 +118,7 @@ export function NotificationCenterContainer({ visible, onClose }) {
     }
   }, [queryError, mutationError]);
 
-  const loadMore = () => {
+  const loadMore = useCallback(() => {
     if (!loading && data?.notifications.length) {
       fetchMore({
         variables: { offset: data.notifications.length },
@@ -100,7 +130,7 @@ export function NotificationCenterContainer({ visible, onClose }) {
         }
       }).catch((err) => setError(err.message));
     }
-  };
+  }, [data?.notifications?.length, fetchMore, loading]);
 
   const handleToggleUnreadOnly = (value) => {
     setShowUnreadOnly(value);
@@ -122,11 +152,20 @@ export function NotificationCenterContainer({ visible, onClose }) {
       window.addEventListener("scroll", handleScroll);
       return () => window.removeEventListener("scroll", handleScroll);
     }
-  }, [visible, loading, data]);
+  }, [visible, loading, data, loadMore]);
 
-  console.log("Rendering NotificationCenter with notifications:", notifications.length, notifications);
+  console.log(
+    "Rendering NotificationCenter with notifications:",
+    notifications.length,
+    notifications.map((n) => ({
+      id: n.id,
+      read: n.read,
+      created_at: n.created_at
+    }))
+  );
 
   return (
+    // Remove NotificationContext.Provider
     <NotificationCenterComponent
       visible={visible}
       onClose={onClose}