feature/IO-3096-GlobalNotifications - Checkpoint - Clean up previous socket usages by funneling them all through useSocket vs useContext(SocketConext), package updates.

client/src/contexts/SocketIO/socketContext.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
 import { store } from "../../redux/store";
@@ -8,13 +8,19 @@ import { useNotification } from "../Notifications/notificationContext.jsx";
 import {
   GET_NOTIFICATIONS,
   GET_UNREAD_COUNT,
-  MARK_NOTIFICATION_READ,
-  MARK_ALL_NOTIFICATIONS_READ
+  MARK_ALL_NOTIFICATIONS_READ,
+  MARK_NOTIFICATION_READ
 } from "../../graphql/notifications.queries.js";
 import { useMutation } from "@apollo/client";
 
 const SocketContext = createContext(null);
 
+// This is how many notifications the database will populate on load, and the increment for load more
+export const INITIAL_NOTIFICATIONS = 10;
+
+export const SCENARIO_NOTIFICATION_LOCATION = "bottomRight";
+export const SCENARIO_NOTIFICATION_DURATION = 15; // Seconds
+
 export const SocketProvider = ({ children, bodyshop, navigate }) => {
   const socketRef = useRef(null);
   const [clientId, setClientId] = useState(null);
@@ -92,7 +98,7 @@ export const SocketProvider = ({ children, bodyshop, navigate }) => {
       const cachedNotifications = cache.readQuery({
         query: GET_NOTIFICATIONS,
         variables: {
-          limit: 20,
+          limit: INITIAL_NOTIFICATIONS,
           offset: 0,
           where: baseWhereClause
         }
@@ -102,7 +108,7 @@ export const SocketProvider = ({ children, bodyshop, navigate }) => {
         cache.writeQuery({
           query: GET_NOTIFICATIONS,
           variables: {
-            limit: 20,
+            limit: INITIAL_NOTIFICATIONS,
             offset: 0,
             where: baseWhereClause
           },
@@ -207,7 +213,7 @@ export const SocketProvider = ({ children, bodyshop, navigate }) => {
         };
 
         const baseVariables = {
-          limit: 20,
+          limit: INITIAL_NOTIFICATIONS,
           offset: 0,
           where: { associationid: { _eq: userAssociationId } }
         };
@@ -275,33 +281,29 @@ export const SocketProvider = ({ children, bodyshop, navigate }) => {
           });
 
           notification.info({
-            message: "New Notification",
+            message: `Changes for ${jobRoNumber}:`,
             description: (
               <ul
+                className="notification-alert-unorderd-list"
                 onClick={() => {
                   markNotificationRead({ variables: { id: notificationId } })
-                    .then(() => {
-                      if (navigate) {
-                        navigate(`/manage/jobs/${jobId}`); // Use react-router-dom navigate
-                      } else {
-                        console.warn("Navigate function not provided to SocketProvider");
-                        window.location.href = `/manage/jobs/${jobId}`; // Fallback
-                      }
-                    })
+                    .then(() => navigate(`/manage/jobs/${jobId}`))
                     .catch((e) => console.error(`Error marking notification read from info: ${e?.message || ""}`));
                 }}
                 style={{ cursor: "pointer" }}
               >
                 {notifications.map((notif, index) => (
-                  <li key={index}>{notif.body}</li>
+                  <li className="notification-alert-unorderd-list-item" key={index}>
+                    {notif.body}
+                  </li>
                 ))}
               </ul>
             ),
-            placement: "topRight",
-            duration: 5
+            placement: SCENARIO_NOTIFICATION_LOCATION,
+            duration: SCENARIO_NOTIFICATION_DURATION
           });
         } catch (error) {
-          console.error("Error in handleNotification:", error);
+          console.error(`Something went wrong handling a new notification: ${error?.message || ""}`);
         }
       };
 
@@ -333,7 +335,9 @@ export const SocketProvider = ({ children, bodyshop, navigate }) => {
         if (socketRef.current) {
           socketRef.current.emit("update-token", { token, bodyshopId: bodyshop.id });
         } else {
-          initializeSocket(token);
+          initializeSocket(token).catch((err) =>
+            console.error(`Something went wrong Initializing Sockets: ${err?.message || ""}`)
+          );
         }
       } else {
         if (socketRef.current) {
@@ -352,11 +356,17 @@ export const SocketProvider = ({ children, bodyshop, navigate }) => {
         setIsConnected(false);
       }
     };
-  }, [bodyshop, notification, userAssociationId, markNotificationRead, markAllNotificationsRead, navigate]); // Add navigate to dependencies
+  }, [bodyshop, notification, userAssociationId, markNotificationRead, markAllNotificationsRead, navigate]);
 
   return (
     <SocketContext.Provider
-      value={{ socket: socketRef.current, clientId, isConnected, markNotificationRead, markAllNotificationsRead }}
+      value={{
+        socket: socketRef.current,
+        clientId,
+        isConnected,
+        markNotificationRead,
+        markAllNotificationsRead
+      }}
     >
       {children}
     </SocketContext.Provider>