feature/IO-2967-Better-Refetch-Handling - Implementation

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

client/src/components/production-board-kanban/production-board-kanban.container.jsx

@@ -23,6 +23,9 @@ function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionTyp
   const fired = useRef(false);
   const client = useApolloClient();
   const { socket } = useContext(SocketContext); // Get the socket from context
+  const reconnectTimeout = useRef(null); // To store the reconnect timeout
+  const disconnectTime = useRef(null); // To track disconnection time
+  const acceptableReconnectTime = 2000; // 2 seconds threshold
 
   const {
     treatments: { Websocket_Production }
@@ -126,19 +129,44 @@ function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionTyp
       }
     };
 
-    const handleReconnect = () => {
-      //If we were disconnected from the board, we missed stuff. We need to refresh it entirely.
-      if (refetch) refetch();
+    const handleDisconnect = () => {
+      // Capture the disconnection time
+      disconnectTime.current = Date.now();
     };
-    // Listen for 'job-changed' events
+
+    const handleReconnect = () => {
+      const reconnectTime = Date.now();
+      const disconnectionDuration = reconnectTime - disconnectTime.current;
+
+      // Only refetch if disconnection was longer than the acceptable reconnect time
+      if (disconnectionDuration >= acceptableReconnectTime) {
+        if (!reconnectTimeout.current) {
+          reconnectTimeout.current = setTimeout(() => {
+            const randomDelay = Math.floor(Math.random() * (30000 - 10000 + 1)) + 10000; // Random delay between 10 and 30 seconds
+            setTimeout(() => {
+              if (refetch) refetch().catch((err) => console.error(`Issue `));
+              reconnectTimeout.current = null; // Clear the timeout reference after refetch
+            }, randomDelay);
+          }, acceptableReconnectTime);
+        }
+      }
+    };
+
+    // Listen for 'job-changed', 'disconnect', and 'connect' events
     socket.on("production-job-updated", handleJobUpdates);
-    socket.on("reconnect", handleReconnect);
+    socket.on("disconnect", handleDisconnect);
+    socket.on("connect", handleReconnect);
+
     // Clean up on unmount or when dependencies change
     return () => {
       socket.off("production-job-updated", handleJobUpdates);
-      socket.off("reconnect", handleReconnect);
+      socket.off("disconnect", handleDisconnect);
+      socket.off("connect", handleReconnect);
+      if (reconnectTimeout.current) {
+        clearTimeout(reconnectTimeout.current);
+      }
     };
-  }, [subscriptionEnabled, socket, bodyshop, data, client, refetch]);
+  }, [subscriptionEnabled, socket, bodyshop, client, refetch]);
 
   const filteredAssociationSettings = useMemo(() => {
     return associationSettings?.associations[0] || null;

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 } from "react";
+import React, { useContext, useEffect, useState, useRef } from "react";
 import {
   QUERY_EXACT_JOB_IN_PRODUCTION,
   QUERY_EXACT_JOBS_IN_PRODUCTION,
@@ -16,6 +16,10 @@ export default function ProductionListTableContainer({ bodyshop, subscriptionTyp
   const client = useApolloClient();
   const { socket } = useContext(SocketContext);
   const [joblist, setJoblist] = useState([]);
+  const reconnectTimeout = useRef(null); // To store the reconnect timeout
+  const disconnectTime = useRef(null); // To store the time of disconnection
+
+  const acceptableReconnectTime = 2000; // 2 seconds threshold
 
   // Get Split treatment
   const {
@@ -128,18 +132,47 @@ export default function ProductionListTableContainer({ bodyshop, subscriptionTyp
         }
       }
     };
-    const handleReconnect = () => {
-      //If we were disconnected from the board, we missed stuff. We need to refresh it entirely.
-      if (refetch) refetch();
+
+    const handleDisconnect = () => {
+      // Capture the time when the disconnection happens
+      disconnectTime.current = Date.now();
     };
-    // Listen for 'production-job-updated' events
+
+    const handleReconnect = () => {
+      // Calculate how long the disconnection lasted
+      const reconnectTime = Date.now();
+      const disconnectionDuration = reconnectTime - disconnectTime.current;
+
+      // If disconnection lasted less than acceptable reconnect time, do nothing
+      if (disconnectionDuration < acceptableReconnectTime) {
+        return;
+      }
+
+      // Schedule a refetch with a random delay between 10 and 30 seconds
+      if (!reconnectTimeout.current) {
+        reconnectTimeout.current = setTimeout(() => {
+          const randomDelay = Math.floor(Math.random() * (30000 - 10000 + 1)) + 10000; // Random delay between 10 and 30 seconds
+          setTimeout(() => {
+            if (refetch) refetch();
+            reconnectTimeout.current = null; // Clear the timeout reference after refetch
+          }, randomDelay);
+        }, acceptableReconnectTime);
+      }
+    };
+
+    // Listen for 'production-job-updated', 'disconnect', and 'connect' events
     socket.on("production-job-updated", handleJobUpdates);
-    socket.on("reconnect", handleReconnect);
+    socket.on("disconnect", handleDisconnect);
+    socket.on("connect", handleReconnect);
 
     // Clean up on unmount or when dependencies change
     return () => {
       socket.off("production-job-updated", handleJobUpdates);
-      socket.off("reconnect", handleReconnect);
+      socket.off("disconnect", handleDisconnect);
+      socket.off("connect", handleReconnect);
+      if (reconnectTimeout.current) {
+        clearTimeout(reconnectTimeout.current);
+      }
     };
   }, [subscriptionEnabled, socket, bodyshop, client, refetch]);
 
@@ -151,6 +184,7 @@ export default function ProductionListTableContainer({ bodyshop, subscriptionTyp
       fetchPolicy: "network-only"
     });
   };
+
   const getUpdatedJobsData = (jobIds) => {
     client.query({
       query: QUERY_EXACT_JOBS_IN_PRODUCTION,