feature/IO-3096-GlobalNotifications - Checkpoint - clicking an individual notification will mark it read

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

@@ -2,7 +2,12 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useMutation, useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
-import { GET_NOTIFICATIONS, MARK_ALL_NOTIFICATIONS_READ } from "../../graphql/notifications.queries";
+import {
+  GET_NOTIFICATIONS,
+  MARK_ALL_NOTIFICATIONS_READ,
+  MARK_NOTIFICATION_READ,
+  GET_UNREAD_COUNT
+} from "../../graphql/notifications.queries";
 import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
@@ -38,7 +43,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
     fetchPolicy: "cache-and-network",
     notifyOnNetworkStatusChange: true,
     pollInterval: isConnected ? 0 : 30000,
-    skip: !userAssociationId, // Skip query if no userAssociationId
+    skip: !userAssociationId,
     onError: (err) => {
       setError(err.message);
       console.error("GET_NOTIFICATIONS error:", err);
@@ -99,6 +104,53 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
     }
   });
 
+  const [markNotificationRead] = useMutation(MARK_NOTIFICATION_READ, {
+    update: (cache, { data: { update_notifications } }) => {
+      const timestamp = new Date().toISOString();
+      const updatedNotification = update_notifications.returning[0];
+
+      // Update the notifications list
+      cache.modify({
+        fields: {
+          notifications(existing = [], { readField }) {
+            return existing.map((notif) => {
+              if (readField("id", notif) === updatedNotification.id) {
+                return { ...notif, read: timestamp };
+              }
+              return notif;
+            });
+          }
+        }
+      });
+
+      // Update the unread count in notifications_aggregate
+      const unreadCountQuery = cache.readQuery({
+        query: GET_UNREAD_COUNT,
+        variables: { associationid: userAssociationId }
+      });
+
+      if (unreadCountQuery?.notifications_aggregate?.aggregate?.count > 0) {
+        cache.writeQuery({
+          query: GET_UNREAD_COUNT,
+          variables: { associationid: userAssociationId },
+          data: {
+            notifications_aggregate: {
+              ...unreadCountQuery.notifications_aggregate,
+              aggregate: {
+                ...unreadCountQuery.notifications_aggregate.aggregate,
+                count: unreadCountQuery.notifications_aggregate.aggregate.count - 1
+              }
+            }
+          }
+        });
+      }
+    },
+    onError: (err) => {
+      setError(err.message);
+      console.error("MARK_NOTIFICATION_READ error:", err);
+    }
+  });
+
   useEffect(() => {
     if (data?.notifications) {
       const processedNotifications = data.notifications
@@ -167,12 +219,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
         const timestamp = new Date().toISOString();
         setNotifications((prev) => {
           const updatedNotifications = prev.map((notif) =>
-            notif.read === null && notif.associationid === userAssociationId
-              ? {
-                  ...notif,
-                  read: timestamp
-                }
-              : notif
+            notif.read === null && notif.associationid === userAssociationId ? { ...notif, read: timestamp } : notif
           );
           return [...updatedNotifications];
         });
@@ -180,6 +227,24 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
       .catch((e) => console.error(`Error marking all notifications read: ${e?.message || ""}`));
   };
 
+  const handleNotificationClick = useCallback(
+    (notificationId) => {
+      markNotificationRead({
+        variables: { id: notificationId }
+      })
+        .then(() => {
+          const timestamp = new Date().toISOString();
+          setNotifications((prev) => {
+            return prev.map((notif) =>
+              notif.id === notificationId && !notif.read ? { ...notif, read: timestamp } : notif
+            );
+          });
+        })
+        .catch((e) => console.error(`Error marking notification read: ${e?.message || ""}`));
+    },
+    [markNotificationRead]
+  );
+
   useEffect(() => {
     if (visible && !isConnected) {
       refetch();
@@ -197,6 +262,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
       toggleUnreadOnly={handleToggleUnreadOnly}
       markAllRead={handleMarkAllRead}
       loadMore={loadMore}
+      onNotificationClick={handleNotificationClick}
     />
   );
 }