IO-2924-Refactor-Production-board-to-use-Socket-Provider: Finalize

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

client/src/contexts/SocketIO/useSocket.js

@@ -1,83 +1,83 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
 
 const useSocket = (bodyshop) => {
-  const [socket, setSocket] = useState(null);
+  const socketRef = useRef(null);
   const [clientId, setClientId] = useState(null);
-  const [token, setToken] = useState(null);
 
   useEffect(() => {
-    // Listener for token changes
     const unsubscribe = auth.onIdTokenChanged(async (user) => {
       if (user) {
         const newToken = await user.getIdToken();
-        setToken(newToken);
+
+        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 (!import.meta.env.DEV) return;
+            console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
+          };
+
+          const handleConnect = () => {
+            console.log("Socket connected:", socketInstance.id);
+            socketInstance.emit("join-bodyshop-room", bodyshop.id);
+            setClientId(socketInstance.id);
+          };
+
+          const handleReconnect = (attempt) => {
+            console.log(`Socket reconnected after ${attempt} attempts`);
+          };
+
+          const handleConnectionError = (err) => {
+            console.error("Socket connection error:", err);
+          };
+
+          const handleDisconnect = () => {
+            console.log("Socket disconnected");
+          };
+
+          socketInstance.on("connect", handleConnect);
+          socketInstance.on("reconnect", handleReconnect);
+          socketInstance.on("connect_error", handleConnectionError);
+          socketInstance.on("disconnect", handleDisconnect);
+          socketInstance.on("bodyshop-message", handleBodyshopMessage);
+        }
       } else {
-        setToken(null);
+        // User is not authenticated
+        if (socketRef.current) {
+          socketRef.current.disconnect();
+          socketRef.current = null;
+        }
       }
     });
 
     // Clean up the listener on unmount
-    return () => unsubscribe();
-  }, []);
+    return () => {
+      unsubscribe();
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+    };
+  }, [bodyshop.id]);
 
-  useEffect(() => {
-    if (bodyshop && bodyshop.id && token) {
-      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 }, // Use the current token
-        reconnectionAttempts: Infinity,
-        reconnectionDelay: 2000,
-        reconnectionDelayMax: 10000
-      });
-
-      setSocket(socketInstance);
-
-      const handleBodyshopMessage = (message) => {
-        console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
-      };
-
-      const handleConnect = () => {
-        console.log("Socket connected:", socketInstance.id);
-        socketInstance.emit("join-bodyshop-room", bodyshop.id);
-        setClientId(socketInstance.id);
-      };
-
-      const handleReconnect = (attempt) => {
-        console.log(`Socket reconnected after ${attempt} attempts`);
-      };
-
-      const handleConnectionError = (err) => {
-        console.error("Socket connection error:", err);
-      };
-
-      const handleDisconnect = () => {
-        console.log("Socket disconnected");
-      };
-
-      socketInstance.on("connect", handleConnect);
-      socketInstance.on("reconnect", handleReconnect);
-      socketInstance.on("connect_error", handleConnectionError);
-      socketInstance.on("disconnect", handleDisconnect);
-      socketInstance.on("bodyshop-message", handleBodyshopMessage);
-
-      return () => {
-        socketInstance.emit("leave-bodyshop-room", bodyshop.id);
-        socketInstance.off("connect", handleConnect);
-        socketInstance.off("reconnect", handleReconnect);
-        socketInstance.off("connect_error", handleConnectionError);
-        socketInstance.off("disconnect", handleDisconnect);
-        socketInstance.off("bodyshop-message", handleBodyshopMessage);
-        socketInstance.disconnect();
-      };
-    }
-  }, [bodyshop, token]); // Include 'token' in dependencies to re-run effect when it changes
-
-  return { socket, clientId };
+  return { socket: socketRef.current, clientId };
 };
 
 export default useSocket;