IO-3166-Global-Notifications-Part-2 - Checkpoint

client/src/contexts/SocketIO/useSocket.jsx

@@ -9,9 +9,10 @@ import {
   GET_NOTIFICATIONS,
   GET_UNREAD_COUNT,
   MARK_ALL_NOTIFICATIONS_READ,
-  MARK_NOTIFICATION_READ
+  MARK_NOTIFICATION_READ,
+  UPDATE_NOTIFICATIONS_READ_FRAGMENT
 } from "../../graphql/notifications.queries.js";
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 
 const SocketContext = createContext(null);
@@ -290,7 +291,17 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot
             });
 
             notification.info({
-              message: t("notifications.labels.notification-popup-title", { ro_number: jobRoNumber }),
+              message: (
+                <div
+                  onClick={() => {
+                    markNotificationRead({ variables: { id: notificationId } })
+                      .then(() => navigate(`/manage/jobs/${jobId}`))
+                      .catch((e) => console.error(`Error marking notification read: ${e?.message || ""}`));
+                  }}
+                >
+                  {t("notifications.labels.notification-popup-title", { ro_number: jobRoNumber })}
+                </div>
+              ),
               description: (
                 <ul
                   className="notification-alert-unordered-list"
@@ -327,11 +338,7 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot
           });
           client.cache.writeFragment({
             id: notificationRef,
-            fragment: gql`
-              fragment UpdateNotificationRead on notifications {
-                read
-              }
-            `,
+            fragment: UPDATE_NOTIFICATIONS_READ_FRAGMENT,
             data: { read: timestamp }
           });
 
@@ -383,11 +390,7 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot
                 const notifRef = client.cache.identify({ __typename: "notifications", id: notif.id });
                 client.cache.writeFragment({
                   id: notifRef,
-                  fragment: gql`
-                    fragment UpdateNotificationRead on notifications {
-                      read
-                    }
-                  `,
+                  fragment: UPDATE_NOTIFICATIONS_READ_FRAGMENT,
                   data: { read: timestamp }
                 });
               }