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/.env.development.imex

@@ -8,7 +8,7 @@ VITE_APP_CLOUDINARY_API_KEY=957865933348715
 VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
+VITE_APP_AXIOS_BASE_API_URL=/api/
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX

client/.env.development.promanager

@@ -8,7 +8,7 @@ VITE_APP_CLOUDINARY_API_KEY=957865933348715
 VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
+VITE_APP_AXIOS_BASE_API_URL=/api/
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=PROMANAGER

client/.env.development.rome

@@ -9,7 +9,7 @@ VITE_APP_CLOUDINARY_API_KEY=957865933348715
 VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
+VITE_APP_AXIOS_BASE_API_URL=/api/
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_COUNTRY=USA

client/.gitignore

@@ -1,3 +1,4 @@
 
 # Sentry Config File
 .sentryclirc
+/dev-dist

client/cypress.config.js

@@ -12,6 +12,6 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       return require("./cypress/plugins/index.js")(on, config);
     },
-    baseUrl: "http://localhost:3000"
+    baseUrl: "https://localhost:3000"
   }
 });

client/package.json

@@ -8,38 +8,38 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
-    "@apollo/client": "^3.11.4",
-    "@emotion/is-prop-valid": "^1.3.0",
-    "@fingerprintjs/fingerprintjs": "^4.4.3",
+    "@ant-design/pro-layout": "^7.20.2",
+    "@apollo/client": "^3.11.8",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@fingerprintjs/fingerprintjs": "^4.5.0",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@sentry/cli": "^2.33.1",
+    "@sentry/cli": "^2.36.2",
     "@sentry/react": "^7.114.0",
-    "@splitsoftware/splitio-react": "^1.12.1",
+    "@splitsoftware/splitio-react": "^1.13.0",
     "@tanem/react-nprogress": "^5.0.51",
     "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
+    "antd": "^5.21.0",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
     "autosize": "^6.0.1",
-    "axios": "^1.7.4",
+    "axios": "^1.7.7",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.12.5",
+    "firebase": "^10.13.2",
     "graphql": "^16.9.0",
-    "i18next": "^23.12.3",
+    "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.5",
+    "libphonenumber-js": "^1.11.9",
     "logrocket": "^8.1.2",
-    "markerjs2": "^2.32.1",
+    "markerjs2": "^2.32.2",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.0.1",
     "object-hash": "^3.0.0",
@@ -47,7 +47,7 @@
     "query-string": "^9.1.0",
     "raf-schd": "^4.0.3",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.13.2",
+    "react-big-calendar": "^1.14.1",
     "react-color": "^2.19.3",
     "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",
@@ -58,15 +58,15 @@
     "react-icons": "^5.3.0",
     "react-image-lightbox": "^5.1.4",
     "react-markdown": "^9.0.1",
-    "react-number-format": "^5.4.0",
+    "react-number-format": "^5.4.2",
     "react-popopo": "^2.1.9",
-    "react-product-fruits": "^2.2.6",
+    "react-product-fruits": "^2.2.61",
     "react-redux": "^9.1.2",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.26.2",
     "react-sticky": "^6.0.3",
     "react-virtualized": "^9.22.5",
-    "react-virtuoso": "^4.10.1",
+    "react-virtuoso": "^4.10.4",
     "recharts": "^2.12.7",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
@@ -74,12 +74,12 @@
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.77.8",
-    "socket.io-client": "^4.7.5",
-    "styled-components": "^6.1.12",
+    "sass": "^1.79.3",
+    "socket.io-client": "^4.8.0",
+    "styled-components": "^6.1.13",
     "subscriptions-transport-ws": "^0.11.0",
     "use-memo-one": "^1.1.3",
-    "userpilot": "^1.3.5",
+    "userpilot": "^1.3.6",
     "vite-plugin-ejs": "^1.7.0",
     "web-vitals": "^3.5.2"
   },
@@ -91,6 +91,9 @@
     "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
     "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
     "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
+    "preview:imex": "dotenvx run --env-file=.env.development.imex -- vite preview",
+    "preview:rome": "dotenvx run --env-file=.env.development.rome -- vite preview",
+    "preview:promanager": "dotenvx run --env-file=.env.development.promanager -- vite preview",
     "build:test:imex": "env-cmd -f .env.test.imex npm run build",
     "build:test:rome": "env-cmd -f .env.test.rome npm run build",
     "build:test:promanager": "env-cmd -f .env.test.promanager npm run build",
@@ -131,29 +134,29 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.24.7",
-    "@dotenvx/dotenvx": "^1.7.0",
+    "@dotenvx/dotenvx": "^1.14.1",
     "@emotion/babel-plugin": "^11.12.0",
-    "@emotion/react": "^11.13.0",
-    "@sentry/webpack-plugin": "^2.22.2",
+    "@emotion/react": "^11.13.3",
+    "@sentry/webpack-plugin": "^2.22.4",
     "@testing-library/cypress": "^10.0.2",
     "browserslist": "^4.23.3",
     "browserslist-to-esbuild": "^2.1.1",
+    "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.13.3",
+    "cypress": "^13.14.2",
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
-    "memfs": "^4.11.1",
+    "memfs": "^4.12.0",
     "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^5.4.0",
+    "vite": "^5.4.7",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-legacy": "^2.1.0",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-pwa": "^0.20.1",
+    "vite-plugin-pwa": "^0.20.5",
     "vite-plugin-style-import": "^2.0.0",
     "workbox-window": "^7.1.0"
   }

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) => {

client/vite.config.js

@@ -3,16 +3,21 @@ import { promises as fsPromises } from "fs";
 import { createRequire } from "module";
 import * as path from "path";
 import * as url from "url";
-import { defineConfig } from "vite";
+import { createLogger, defineConfig } from "vite";
 import { ViteEjsPlugin } from "vite-plugin-ejs";
 import eslint from "vite-plugin-eslint";
 import { VitePWA } from "vite-plugin-pwa";
 import InstanceRenderManager from "./src/utils/instanceRenderMgr";
+import chalk from "chalk";
 
 process.env.VITE_APP_GIT_SHA_DATE = new Date().toLocaleString("en-US", {
   timeZone: "America/Los_Angeles"
 });
 
+const getFormattedTimestamp = () =>
+  new Date().toLocaleTimeString("en-US", { hour12: true }).replace("AM", "a.m.").replace("PM", "p.m.");
+
+/** This is a hack around react-virtualized, should be removed when switching to react-virtuoso */
 const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;
 
 function reactVirtualizedFix() {
@@ -32,6 +37,11 @@ function reactVirtualizedFix() {
     }
   };
 }
+/** End of hack */
+
+export const logger = createLogger("info", {
+  allowClearScreen: false
+});
 
 export default defineConfig({
   base: "/",
@@ -99,7 +109,6 @@ export default defineConfig({
     reactVirtualizedFix(),
     react(),
     eslint()
-    // CompressionPlugin(), //Cloudfront already compresses assets, so not needed.
   ],
   define: {
     APP_VERSION: JSON.stringify(process.env.npm_package_version)
@@ -107,7 +116,69 @@ export default defineConfig({
   server: {
     host: true,
     port: 3000,
-    open: true
+    open: true,
+    proxy: {
+      "/ws": {
+        target: "ws://localhost:4000",
+        rewriteWsOrigin: true,
+        secure: false,
+        ws: true
+      },
+      "/wss": {
+        target: "ws://localhost:4000",
+        rewriteWsOrigin: true,
+        secure: false,
+        ws: true
+      },
+      "/api": {
+        target: "http://localhost:4000",
+        changeOrigin: true,
+        secure: false,
+        ws: false,
+        rewrite: (path) => {
+          const replacedValue = path.replace(/^\/api/, "");
+          logger.info(
+            `${chalk.grey.bold(getFormattedTimestamp())} ${chalk.cyan.bold("[vite]")} ${chalk.green.bold("[API]")} ${chalk.blue(replacedValue)}`
+          );
+          return replacedValue;
+        }
+      }
+    },
+    https: {
+      key: await fsPromises.readFile("../certs/key.pem"),
+      cert: await fsPromises.readFile("../certs/cert.pem"),
+      allowHTTP1: false // Force HTTP/2
+    }
+  },
+  preview: {
+    port: 6000,
+    host: true,
+    open: true,
+    https: {
+      key: await fsPromises.readFile("../certs/key.pem"),
+      cert: await fsPromises.readFile("../certs/cert.pem"),
+      allowHTTP1: false // Force HTTP/2
+    },
+    proxy: {
+      "/ws": {
+        target: "ws://localhost:4000",
+        rewriteWsOrigin: true,
+        secure: false,
+        ws: true
+      },
+      "/wss": {
+        target: "ws://localhost:4000",
+        rewriteWsOrigin: true,
+        secure: false,
+        ws: true
+      },
+      "/api": {
+        target: "http://localhost:4000",
+        changeOrigin: true,
+        secure: false,
+        ws: false
+      }
+    }
   },
   build: {
     rollupOptions: {
@@ -121,11 +192,30 @@ export default defineConfig({
     }
   },
   optimizeDeps: {
-    include: ["react", "react-dom", "antd", "@apollo/client", "@reduxjs/toolkit", "axios"],
+    include: [
+      "react",
+      "react-dom",
+      "antd",
+      "@apollo/client",
+      "@reduxjs/toolkit",
+      "axios",
+      "react-router-dom",
+      "dayjs",
+      "redux",
+      "react-redux"
+    ],
     esbuildOptions: {
       loader: {
         ".js": "jsx"
       }
     }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: "modern-compiler",
+        quietDeps: true // Quite Deprecation Warnings, should be disabled occasionally before major upgrades
+      }
+    }
   }
 });