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

2025-02-27 11:56:31 -05:00
parent 17c4e2fd0e
commit 01b18a4a02
22 changed files with 409 additions and 386 deletions
--- a/client/src/components/chat-affix/chat-affix.container.jsx
+++ b/client/src/components/chat-affix/chat-affix.container.jsx
@@ -1,9 +1,9 @@
 import { useApolloClient } from "@apollo/client";
 import { getToken } from "@firebase/messaging";
 import axios from "axios";
-import React, { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import SocketContext from "../../contexts/SocketIO/socketContext";
+import { useSocket } from "../../contexts/SocketIO/socketContext";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
@@ -12,7 +12,7 @@ import { registerMessagingHandlers, unregisterMessagingHandlers } from "./regist
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
  const { t } = useTranslation();
  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  useEffect(() => {
    if (!bodyshop || !bodyshop.messagingservicesid) return;
--- a/client/src/components/chat-archive-button/chat-archive-button.component.jsx
+++ b/client/src/components/chat-archive-button/chat-archive-button.component.jsx
@@ -1,9 +1,9 @@
 import { useMutation } from "@apollo/client";
 import { Button } from "antd";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -18,7 +18,7 @@ export function ChatArchiveButton({ conversation, bodyshop }) {
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const handleToggleArchive = async () => {
    setLoading(true);
--- a/client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx
+++ b/client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx
@@ -1,11 +1,10 @@
 import { useMutation } from "@apollo/client";
 import { Tag } from "antd";
-import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -18,7 +17,7 @@ const mapDispatchToProps = () => ({});

 export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
  const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const handleRemoveTag = async (jobId) => {
    const convId = jobConversations[0].conversationid;
--- a/client/src/components/chat-conversation/chat-conversation.container.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.container.jsx
@@ -1,10 +1,10 @@
 import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
 import axios from "axios";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext";
-import { GET_CONVERSATION_DETAILS, CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
+import { useSocket } from "../../contexts/SocketIO/socketContext";
+import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
@@ -16,7 +16,7 @@ const mapStateToProps = createStructuredSelector({

 function ChatConversationContainer({ bodyshop, selectedConversation }) {
  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);

  // Fetch conversation details
--- a/client/src/components/chat-label/chat-label.component.jsx
+++ b/client/src/components/chat-label/chat-label.component.jsx
@@ -1,10 +1,10 @@
 import { PlusOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Input, Spin, Tag, Tooltip } from "antd";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -20,7 +20,7 @@ export function ChatLabel({ conversation, bodyshop }) {
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(conversation.label);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const notification = useNotification();

  const { t } = useTranslation();
--- a/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
+++ b/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
@@ -1,12 +1,11 @@
 import { PlusCircleFilled } from "@ant-design/icons";
 import { Button, Form, Popover } from "antd";
-import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -18,7 +17,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatNewConversation({ openChatByPhone }) {
  const { t } = useTranslation();
  const [form] = Form.useForm();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const handleFinish = (values) => {
    openChatByPhone({ phone_num: values.phoneNumber, socket });
--- a/client/src/components/chat-open-button/chat-open-button.component.jsx
+++ b/client/src/components/chat-open-button/chat-open-button.component.jsx
@@ -1,5 +1,4 @@
 import parsePhoneNumber from "libphonenumber-js";
-import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
@@ -8,7 +7,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
@@ -22,7 +21,7 @@ const mapDispatchToProps = (dispatch) => ({

 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobid, openChatByPhone }) {
  const { t } = useTranslation();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const notification = useNotification();

  if (!phone) return <></>;
--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/client/src/components/chat-popup/chat-popup.component.jsx
@@ -1,7 +1,7 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
 import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import React, { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,8 +12,9 @@ import ChatConversationListComponent from "../chat-conversation-list/chat-conver
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+
 import "./chat-popup.styles.scss";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";

 const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
@@ -27,7 +28,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
  const { t } = useTranslation();
  const [pollInterval, setPollInterval] = useState(0);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const client = useApolloClient(); // Apollo Client instance for cache operations

  // Lazy query for conversations
--- a/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
+++ b/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
@@ -2,13 +2,13 @@ import { PlusOutlined } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
 import { Tag } from "antd";
 import _ from "lodash";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import { SEARCH_FOR_JOBS } from "../../graphql/jobs.queries";
 import ChatTagRo from "./chat-tag-ro.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
@@ -22,7 +22,7 @@ const mapDispatchToProps = () => ({});
 export function ChatTagRoContainer({ conversation, bodyshop }) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const [loadRo, { loading, data }] = useLazyQuery(SEARCH_FOR_JOBS);

--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -126,7 +126,7 @@ function Header({

  const { t } = useTranslation();

-  const { isConnected } = useSocket(bodyshop);
+  const { isConnected } = useSocket();
  const [notificationVisible, setNotificationVisible] = useState(false);

  const userAssociationId = bodyshop?.associations?.[0]?.id;
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -3,12 +3,12 @@ import { useMutation } from "@apollo/client";
 import { Button, Divider, Dropdown, Form, Input, Popover, Select, Space } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import queryString from "query-string";
-import React, { useContext, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -51,7 +51,7 @@ export function ScheduleEventComponent({
  const searchParams = queryString.parse(useLocation().search);
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
  const [title, setTitle] = useState(event.title);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const notification = useNotification();

  const blockContent = (
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -4,12 +4,12 @@ import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
-import { useContext, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
@@ -130,7 +130,7 @@ export function JobsDetailHeaderActions({
  const [updateJob] = useMutation(UPDATE_JOB);
  const [voidJob] = useMutation(VOID_JOB);
  const [cancelAllAppointments] = useMutation(CANCEL_APPOINTMENTS_BY_JOB_ID);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const notification = useNotification();

  const {
--- a/client/src/components/notification-center/notification-center.container.jsx
+++ b/client/src/components/notification-center/notification-center.container.jsx
@@ -3,7 +3,7 @@ import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";

@@ -31,7 +31,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
    refetch
  } = useQuery(GET_NOTIFICATIONS, {
    variables: {
-      limit: 20,
+      limit: INITIAL_NOTIFICATIONS,
      offset: 0,
      where: whereClause
    },
@@ -147,7 +147,9 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {

  useEffect(() => {
    if (visible && !isConnected) {
-      refetch();
+      refetch().catch(
+        (err) => `Something went wrong re-fetching notifications in the notification-center: ${err?.message || ""}`
+      );
    }
  }, [visible, isConnected, refetch]);

--- a/client/src/components/payments-generate-link/payments-generate-link.component.jsx
+++ b/client/src/components/payments-generate-link/payments-generate-link.component.jsx
@@ -2,15 +2,15 @@ import { CopyFilled } from "@ant-design/icons";
 import { Button, Form, message, Popover, Space } from "antd";
 import axios from "axios";
 import Dinero from "dinero.js";
-import { parsePhoneNumber } from "libphonenumber-js";
-import React, { useContext, useState } from "react";
+import { parsePhoneNumberWithError, ParseError } from "libphonenumber-js";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -29,22 +29,34 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [paymentLink, setPaymentLink] = useState(null);
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();

  const handleFinish = async ({ amount }) => {
    setLoading(true);
    let p;
    try {
-      p = parsePhoneNumber(job.ownr_ph1 || "", "CA");
+      // Updated to use parsePhoneNumberWithError
+      p = parsePhoneNumberWithError(job.ownr_ph1 || "", "CA");
    } catch (error) {
-      console.log("Unable to parse phone number");
+      if (error instanceof ParseError) {
+        // Handle specific parsing errors
+        console.log(`Phone number parsing failed: ${error.message}`);
+      } else {
+        // Handle other unexpected errors
+        console.log("Unexpected error while parsing phone number:", error);
+      }
    }
    setLoading(true);
    const response = await axios.post("/intellipay/generate_payment_url", {
      bodyshop,
      amount: amount,
      account: job.ro_number,
-      comment: btoa(JSON.stringify({ payments: [{ jobid: job.id, amount }], userEmail: currentUser.email }))
+      comment: btoa(
+        JSON.stringify({
+          payments: [{ jobid: job.id, amount }],
+          userEmail: currentUser.email
+        })
+      )
    });
    setLoading(false);
    setPaymentLink(response.data.shorUrl);
@@ -106,7 +118,20 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
            </Space>
            <Button
              onClick={() => {
-                const p = parsePhoneNumber(job.ownr_ph1, "CA");
+                let p;
+                try {
+                  // Updated second instance of phone parsing
+                  p = parsePhoneNumberWithError(job.ownr_ph1, "CA");
+                } catch (error) {
+                  if (error instanceof ParseError) {
+                    // Handle specific parsing errors
+                    console.log(`Phone number parsing failed: ${error.message}`);
+                  } else {
+                    // Handle other unexpected errors
+                    console.log("Unexpected error while parsing phone number:", error);
+                  }
+                  return;
+                }
                openChatByPhone({
                  phone_num: p.formatInternational(),
                  jobid: job.id,
--- a/client/src/components/production-board-kanban/production-board-kanban.container.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.container.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,7 +12,7 @@ import { QUERY_KANBAN_SETTINGS } from "../../graphql/user.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import ProductionBoardKanbanComponent from "./production-board-kanban.component";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -22,7 +22,7 @@ const mapStateToProps = createStructuredSelector({
 function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionType = "direct" }) {
  const fired = useRef(false);
  const client = useApolloClient();
-  const { socket } = useContext(SocketContext); // Get the socket from context
+  const { socket } = useSocket();
  const reconnectTimeout = useRef(null); // To store the reconnect timeout
  const disconnectTime = useRef(null); // To track disconnection time
  const acceptableReconnectTime = 2000; // 2 seconds threshold
--- a/client/src/components/production-list-table/production-list-table.container.jsx
+++ b/client/src/components/production-list-table/production-list-table.container.jsx
@@ -1,5 +1,5 @@
 import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
-import React, { useContext, useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
  QUERY_EXACT_JOB_IN_PRODUCTION,
  QUERY_EXACT_JOBS_IN_PRODUCTION,
@@ -10,11 +10,11 @@ import {
 import ProductionListTable from "./production-list-table.component";
 import _ from "lodash";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";

 export default function ProductionListTableContainer({ bodyshop, subscriptionType = "direct" }) {
  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
+  const { socket } = useSocket();
  const [joblist, setJoblist] = useState([]);
  const reconnectTimeout = useRef(null); // To store the reconnect timeout
  const disconnectTime = useRef(null); // To store the time of disconnection
--- a/client/src/contexts/SocketIO/socketContext.jsx
+++ b/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>
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -1,7 +1,7 @@
 import { FloatButton, Layout, Spin } from "antd";

 // import preval from "preval.macro";
-import React, { lazy, Suspense, useContext, useEffect, useState } from "react";
+import React, { lazy, Suspense, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, Route, Routes } from "react-router-dom";
@@ -20,7 +20,7 @@ import PartnerPingComponent from "../../components/partner-ping/partner-ping.com
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 import { requestForToken } from "../../firebase/firebase.utils";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
@@ -29,6 +29,7 @@ import WssStatusDisplayComponent from "../../components/wss-status-display/wss-s
 import { selectAlerts } from "../../redux/application/application.selectors.js";
 import { addAlerts } from "../../redux/application/application.actions.js";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+
 const JobsPage = lazy(() => import("../jobs/jobs.page"));

 const CardPaymentModalContainer = lazy(
@@ -122,7 +123,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
  const { t } = useTranslation();
  const [chatVisible] = useState(false);
-  const { socket, clientId } = useContext(SocketContext);
+  const { socket, clientId } = useSocket();
  const notification = useNotification();

  // State to track displayed alerts
@@ -146,7 +147,7 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
      }
    };

-    fetchAlerts();
+    fetchAlerts().catch((err) => `Error fetching Bodyshop Alerts: ${err?.message || ""}`);
  }, [setAlerts]);

  // Use useEffect to watch for new alerts