IO-2935-Add-Enhanced-Websocket-Provider - Add another web socket provider, front end wiring, vite wiring (proxy and secure vite), bumped deps

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

client/src/App/App.jsx

@@ -21,6 +21,7 @@ import "./App.styles.scss";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
+import { SocketProvider } from "../contexts/SocketIO/socketContext.jsx";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -201,7 +202,9 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           path="/manage/*"
           element={
             <ErrorBoundary>
-              <PrivateRoute isAuthorized={currentUser.authorized} />
+              <SocketProvider bodyshop={bodyshop}>
+                <PrivateRoute isAuthorized={currentUser.authorized} />
+              </SocketProvider>
             </ErrorBoundary>
           }
         >
@@ -211,7 +214,9 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           path="/tech/*"
           element={
             <ErrorBoundary>
-              <PrivateRoute isAuthorized={currentUser.authorized} />
+              <SocketProvider bodyshop={bodyshop}>
+                <PrivateRoute isAuthorized={currentUser.authorized} />
+              </SocketProvider>
             </ErrorBoundary>
           }
         >

client/src/contexts/SocketIO/socketContext.jsx

@@ -0,0 +1,13 @@
+import React, { createContext } from "react";
+import useSocket from "./useSocket"; // Import the custom hook
+
+// Create the SocketContext
+const SocketContext = createContext(null);
+
+export const SocketProvider = ({ children, bodyshop }) => {
+  const { socket, clientId } = useSocket(bodyshop);
+
+  return <SocketContext.Provider value={{ socket, clientId }}> {children}</SocketContext.Provider>;
+};
+
+export default SocketContext;

client/src/contexts/SocketIO/useSocket.js

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import SocketIO from "socket.io-client";
+import { auth } from "../../firebase/firebase.utils";
+
+const useSocket = (bodyshop) => {
+  const [socket, setSocket] = useState(null);
+  const [clientId, setClientId] = useState(null); // State to store unique identifier
+
+  useEffect(() => {
+    if (bodyshop && bodyshop.id) {
+      const endpoint = import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "https://localhost:3000";
+
+      const socketInstance = SocketIO(endpoint, {
+        path: "/wss", // Ensure this matches the Vite proxy and backend path
+        withCredentials: true,
+        auth: async (callback) => {
+          const token = auth.currentUser && (await auth.currentUser.getIdToken());
+          callback({ token });
+        },
+        reconnectionAttempts: Infinity, // Try reconnecting forever
+        reconnectionDelay: 2000, // How long to wait between reconnection attempts
+        reconnectionDelayMax: 10000 // Maximum delay between attempts
+      });
+
+      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]);
+
+  // Return both socket and clientId
+  return { socket, clientId };
+};
+
+export default useSocket;

client/src/pages/dms-payables/dms-payables.container.jsx

@@ -24,7 +24,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(DmsContainer);
 
 export const socket = SocketIO(
-  import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : window.location.origin,
+  import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "https://localhost:3000",
   {
     path: "/ws",
     withCredentials: true,

client/src/pages/dms/dms.container.jsx

@@ -34,7 +34,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(DmsContainer);
 
 export const socket = SocketIO(
-  import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "http://localhost:4000", // for dev testing,
+  import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "http://localhost:3000", // for dev testing,
   {
     path: "/ws",
     withCredentials: true,

client/src/pages/manage/manage.page.component.jsx

@@ -1,6 +1,6 @@
 import { FloatButton, Layout, Spin } from "antd";
 // import preval from "preval.macro";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import React, { lazy, Suspense, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, Route, Routes } from "react-router-dom";
@@ -19,6 +19,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 { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 
 import UpdateAlert from "../../components/update-alert/update-alert.component";
@@ -110,6 +111,7 @@ const mapDispatchToProps = (dispatch) => ({});
 export function Manage({ conflict, bodyshop }) {
   const { t } = useTranslation();
   const [chatVisible] = useState(false);
+  const { socket, clientId } = useContext(SocketContext);
 
   useEffect(() => {
     const widgetId = InstanceRenderManager({
@@ -129,6 +131,7 @@ export function Manage({ conflict, bodyshop }) {
       promanager: t("titles.promanager")
     });
   }, [t]);
+
   const AppRouteTable = (
     <Suspense
       fallback={
@@ -569,6 +572,13 @@ export function Manage({ conflict, bodyshop }) {
   else if (bodyshop && bodyshop.sub_status !== "active") PageContent = <ShopSubStatusComponent />;
   else PageContent = AppRouteTable;
 
+  const broadcastMessage = () => {
+    if (socket && bodyshop && bodyshop.id) {
+      console.log(`Broadcasting message to bodyshop ${bodyshop.id}:`);
+      socket.emit("broadcast-to-bodyshop", bodyshop.id, `Hello from ${clientId}`);
+    }
+  };
+
   return (
     <>
       {import.meta.env.PROD && <ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible} />}
@@ -603,6 +613,8 @@ export function Manage({ conflict, bodyshop }) {
               </div>
               <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
             </div>
+            <button onClick={broadcastMessage}>Broadcast Message</button>
+
             <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
               Disclaimer & Notices
             </Link>

client/src/utils/CleanAxios.js

@@ -2,9 +2,9 @@ import axios from "axios";
 import { auth } from "../firebase/firebase.utils";
 import InstanceRenderManager from "./instanceRenderMgr";
 
-axios.defaults.baseURL =
-  import.meta.env.VITE_APP_AXIOS_BASE_API_URL ||
-  (import.meta.env.MODE === "production" ? "https://api.imex.online/" : "http://localhost:4000/");
+axios.defaults.baseURL = import.meta.env.DEV
+  ? "/api/"
+  : import.meta.env.VITE_APP_AXIOS_BASE_API_URL || "https://api.imex.online/";
 
 export const axiosAuthInterceptorId = axios.interceptors.request.use(
   async (config) => {