Started implementing error handling for reconnect

Author: Christopher Stamper

src/app/containers/ButtonsContainer.tsx

@@ -57,17 +57,42 @@ function ButtonsContainer(): JSX.Element {
 
   //adding a local state using useState for the reconnect button functionality
   const [reconnectDialogOpen, setReconnectDialogOpen] = useState(false);
-  const [disconnectedDialogOpen, setDisconnectedDialogOpen] = useState(false);
 
   //logic for handling dialog box opening and closing
   const handleReconnectClick = () => {
     setReconnectDialogOpen(true);
   }
 
   const handleReconnectConfirm = () => {
-    //reconnection logic here
-    dispatch(startReconnect());
+    const maxRetries = 10;
+    const retryInterval = 1000;
+    const maxTimeout = 15000
+
+    const attemptReconnection = (retries: number, startTime: number) => {
+      console.log('WORKING')
+      if (retries <= maxRetries && Date.now() - startTime < maxTimeout) {
+        console.log('HITTING IF');
+        chrome.runtime.sendMessage({ action: 'attemptReconnect' }, (response) => {
+          console.log('response: ', response);
+          // if (response && response.success) {
+          //   console.log('SUCCESS')
+          // } else {
+          //   console.log('Reconnect failed: ', !response && response.success);
+  
+          //   setTimeout(() => {
+          //     console.log('trying!')
+          //     attemptReconnection(retries + 1, startTime);
+          //   }, retryInterval);
+          // }
+        });
+      } else {
+        console.log('Max tries completed');
+      }
+    }
+
     handleReconnectCancel();
+    attemptReconnection(1, Date.now());
+    // dispatch(startReconnect);
   }
 
   const handleReconnectCancel = () => {

src/app/containers/MainContainer.tsx

@@ -14,10 +14,13 @@ import {
   noDev,
   setCurrentLocation,
   disconnected,
-  endReconnect
+  endReconnect,
+  launchContentScript,
 } from '../RTKslices';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { Status } from '../../backend/types/backendTypes';
+
 /*
   This is the main container where everything in our application is rendered
 */
@@ -118,12 +121,17 @@ function MainContainer(): JSX.Element {
     // used to track when the above connection closes unexpectedly. Remember that it should persist throughout the application lifecycle
     chrome.runtime.onMessage.addListener(handleDisconnect);
 
+    setTimeout(() => {
+      currentPort.disconnect();
+    }, 17000)
+
     // assign port to state so it could be used by other components
     if (currentPort)
       dispatch(setPort(currentPort));
 
-    if (!connectionStatus && reconnectRequested)
+    if (!connectionStatus && reconnectRequested) {
       dispatch(endReconnect());
+    }
   });
 
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)

src/extension/background.js

@@ -290,6 +290,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
 
   switch (action) {
+    case 'attemptReconnect': {
+      console.log('AYO');
+
+      const success = true;
+      sendResponse({ success });
+      break;
+    }
     case 'jumpToSnap': {
       changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index, name);
       if (portsArr.length > 0) {