feature/IO-3000-messaging-sockets-migrations2 -

- Fix Chat Icon logger error
- Fix Socket Robustness
- added additional wss status for error
- Installed ant-design icons

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/contexts/SocketIO/useSocket.js

@@ -3,75 +3,102 @@ import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
 import { store } from "../../redux/store";
 import { addAlerts, setWssStatus } from "../../redux/application/application.actions";
-import { useDispatch } from "react-redux";
 
 const useSocket = (bodyshop) => {
   const socketRef = useRef(null);
   const [clientId, setClientId] = useState(null);
-  const dispatch = useDispatch();
 
   useEffect(() => {
+    const initializeSocket = async (token) => {
+      if (!bodyshop || !bodyshop.id) return;
+
+      const endpoint = import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "";
+
+      const socketInstance = SocketIO(endpoint, {
+        path: "/wss",
+        withCredentials: true,
+        auth: { token },
+        reconnectionAttempts: Infinity,
+        reconnectionDelay: 2000,
+        reconnectionDelayMax: 10000
+      });
+
+      socketRef.current = socketInstance;
+
+      // Handle socket events
+      const handleBodyshopMessage = (message) => {
+        if (!message || !message.type) return;
+
+        switch (message.type) {
+          case "alert-update":
+            store.dispatch(addAlerts(message.payload));
+            break;
+          default:
+            break;
+        }
+
+        if (!import.meta.env.DEV) return;
+        console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
+      };
+
+      const handleConnect = () => {
+        socketInstance.emit("join-bodyshop-room", bodyshop.id);
+        setClientId(socketInstance.id);
+        store.dispatch(setWssStatus("connected"));
+      };
+
+      const handleReconnect = () => {
+        store.dispatch(setWssStatus("connected"));
+      };
+
+      const handleConnectionError = (err) => {
+        console.error("Socket connection error:", err);
+
+        // Handle token expiration
+        if (err.message.includes("auth/id-token-expired")) {
+          console.warn("Token expired, refreshing...");
+          auth.currentUser?.getIdToken(true).then((newToken) => {
+            socketInstance.auth = { token: newToken }; // Update socket auth
+            socketInstance.connect(); // Retry connection
+          });
+        } else {
+          store.dispatch(setWssStatus("error"));
+        }
+      };
+
+      const handleDisconnect = (reason) => {
+        console.warn("Socket disconnected:", reason);
+        store.dispatch(setWssStatus("disconnected"));
+
+        // Manually trigger reconnection if necessary
+        if (!socketInstance.connected && reason !== "io server disconnect") {
+          setTimeout(() => {
+            if (socketInstance.disconnected) {
+              console.log("Manually triggering reconnection...");
+              socketInstance.connect();
+            }
+          }, 2000); // Retry after 2 seconds
+        }
+      };
+
+      // Register event handlers
+      socketInstance.on("connect", handleConnect);
+      socketInstance.on("reconnect", handleReconnect);
+      socketInstance.on("connect_error", handleConnectionError);
+      socketInstance.on("disconnect", handleDisconnect);
+      socketInstance.on("bodyshop-message", handleBodyshopMessage);
+    };
+
     const unsubscribe = auth.onIdTokenChanged(async (user) => {
       if (user) {
-        const newToken = await user.getIdToken();
+        const token = await user.getIdToken();
 
         if (socketRef.current) {
-          // Send new token to server
-          socketRef.current.emit("update-token", newToken);
-        } else if (bodyshop && bodyshop.id) {
-          // Initialize the socket
-          const endpoint = import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "";
-
-          const socketInstance = SocketIO(endpoint, {
-            path: "/wss",
-            withCredentials: true,
-            auth: { token: newToken },
-            reconnectionAttempts: Infinity,
-            reconnectionDelay: 2000,
-            reconnectionDelayMax: 10000
-          });
-
-          socketRef.current = socketInstance;
-
-          const handleBodyshopMessage = (message) => {
-            if (!message || !message?.type) return;
-
-            switch (message.type) {
-              case "alert-update":
-                store.dispatch(addAlerts(message.payload));
-                break;
-              default:
-                break;
-            }
-
-            if (!import.meta.env.DEV) return;
-            console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
-          };
-
-          const handleConnect = () => {
-            socketInstance.emit("join-bodyshop-room", bodyshop.id);
-            setClientId(socketInstance.id);
-            store.dispatch(setWssStatus("connected"));
-          };
-
-          const handleReconnect = (attempt) => {
-            store.dispatch(setWssStatus("connected"));
-          };
-
-          const handleConnectionError = (err) => {
-            console.error("Socket connection error:", err);
-            store.dispatch(setWssStatus("error"));
-          };
-
-          const handleDisconnect = () => {
-            store.dispatch(setWssStatus("disconnected"));
-          };
-
-          socketInstance.on("connect", handleConnect);
-          socketInstance.on("reconnect", handleReconnect);
-          socketInstance.on("connect_error", handleConnectionError);
-          socketInstance.on("disconnect", handleDisconnect);
-          socketInstance.on("bodyshop-message", handleBodyshopMessage);
+          // Update token if socket exists
+          socketRef.current.emit("update-token", token);
+        } else {
+          // Initialize socket if not already connected
+          initializeSocket(token);
         }
       } else {
         // User is not authenticated
@@ -82,7 +109,7 @@ const useSocket = (bodyshop) => {
       }
     });
 
-    // Clean up the listener on unmount
+    // Clean up on unmount
     return () => {
       unsubscribe();
       if (socketRef.current) {
@@ -90,7 +117,7 @@ const useSocket = (bodyshop) => {
         socketRef.current = null;
       }
     };
-  }, [bodyshop, dispatch]);
+  }, [bodyshop]);
 
   return { socket: socketRef.current, clientId };
 };