Made progress on fixing connection

Author: Christopher Stamper

src/app/FrontendTypes.ts

@@ -143,7 +143,7 @@ export interface InitialStateProps {
   tabs: unknown;
   currentTabInApp: null | string;
   connectionStatus: boolean;
-  reconnectRequested: boolean;
+  connectRequested: boolean;
 }
 
 export interface DiffProps {

src/app/RTKslices.tsx

@@ -9,7 +9,7 @@ const initialState: InitialStateProps = { // we initialize what our initialState
     tabs: {},
     currentTabInApp: null,
     connectionStatus: true,
-    reconnectRequested: false,
+    connectRequested: true,
   };
 
 const findName = (index, obj) => {
@@ -489,12 +489,12 @@ export const mainSlice = createSlice({
     },
 
     startReconnect: (state) => {
-      state.reconnectRequested = true;
+      state.connectRequested = true;
       state.port = initialState.port;
     },
 
-    endReconnect: (state) => {
-      state.reconnectRequested = false;
+    endConnect: (state) => {
+      state.connectRequested = false;
       state.connectionStatus = true;
     }
 
@@ -530,5 +530,5 @@ export const {
   deleteSeries,
   disconnected,
   startReconnect,
-  endReconnect,
+  endConnect,
 } =  mainSlice.actions

src/app/containers/ButtonsContainer.tsx

@@ -64,35 +64,35 @@ function ButtonsContainer(): JSX.Element {
   }
 
   const handleReconnectConfirm = () => {
-    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);
+    // 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');
-      }
-    }
+    //       //   setTimeout(() => {
+    //       //     console.log('trying!')
+    //       //     attemptReconnection(retries + 1, startTime);
+    //       //   }, retryInterval);
+    //       // }
+    //     });
+    //   } else {
+    //     console.log('Max tries completed');
+    //   }
+    // }
 
     handleReconnectCancel();
-    attemptReconnection(1, Date.now());
-    // dispatch(startReconnect);
+    dispatch(startReconnect);
+    // attemptReconnection(1, Date.now());
   }
 
   const handleReconnectCancel = () => {

src/app/containers/MainContainer.tsx

@@ -14,7 +14,7 @@ import {
   noDev,
   setCurrentLocation,
   disconnected,
-  endReconnect,
+  endConnect,
   launchContentScript,
 } from '../RTKslices';
 import { useDispatch, useSelector } from 'react-redux';
@@ -31,9 +31,10 @@ function MainContainer(): JSX.Element {
   const currentTab = useSelector((state: any) => state.main.currentTab);
   const tabs = useSelector((state: any) => state.main.tabs);
   const port = useSelector((state: any) => state.main.port);
-  const { connectionStatus, reconnectRequested } = useSelector((state: any) => state.main);
+  const { connectionStatus, connectRequested } = useSelector((state: any) => state.main);
 
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
+  const [currentPort, setCurrentPort] = useState(null);
 
   // this function handles Time Jump sidebar view
   const toggleActionContainer = () => {
@@ -58,11 +59,58 @@ function MainContainer(): JSX.Element {
     }
   }
 
+  const handleConnect = () => {
+    const maxRetries = 10;
+    const retryInterval = 1000;
+    const maxTimeout = 15000
+
+    return new Promise((resolve) => {
+      let port: chrome.runtime.Port;
+      console.log('init port: ', port)
+
+      const attemptReconnection = (retries: number, startTime: number) => {
+        // console.log('WORKING')
+        if (retries <= maxRetries && Date.now() - startTime < maxTimeout) {
+          if (retries === 1) port = chrome.runtime.connect();
+          console.log('HITTING IF');
+          chrome.runtime.sendMessage({ action: 'attemptReconnect' }, (response) => {
+            if (response && response.success) {
+              console.log('Reconnect Success: ', response.success);
+              resolve(port);
+            } else {
+              console.log('Reconnect failed: ', !response && response.success);
+    
+              setTimeout(() => {
+                console.log('trying!')
+                attemptReconnection(retries + 1, startTime);
+              }, retryInterval);
+            }
+          });
+        } else {
+          console.log('PORT CONNECT FAILED');
+          resolve(null);
+        }
+      };
+      attemptReconnection(1, Date.now());
+    });
+  }
+
   useEffect(() => {
-    if (port) return; // only open port once so if it exists, do not run useEffect again
+    if (!connectRequested) return; // only open port once so if it exists, do not run useEffect again
 
     // chrome.runtime allows our application to retrieve our service worker (our eventual bundles/background.bundle.js after running npm run build), details about the manifest, and allows us to listen and respond to events in our application lifecycle.
-    const currentPort = chrome.runtime.connect(); // we connect to our service worker
+
+    handleConnect()
+    .then((port) => {
+      if (port) {
+        console.log('PORT SUCCESS: ', port)
+        setCurrentPort(port);
+      } else {
+        console.log('PORT FAIL: ', port);
+      }
+    });
+
+    console.log('that port tho: ', currentPort);
 
     // listen for a message containing snapshots from the /extension/build/background.js service worker
     currentPort.onMessage.addListener(
@@ -129,9 +177,7 @@ function MainContainer(): JSX.Element {
     if (currentPort)
       dispatch(setPort(currentPort));
 
-    if (!connectionStatus && reconnectRequested) {
-      dispatch(endReconnect());
-    }
+    dispatch(endConnect());
   });
 
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)

src/extension/background.js

@@ -137,6 +137,8 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
   This allows us to set up listener's for when we connect, message, and disconnect the script.
 */
 
+let portSuccessfullyConnected = false;
+
 // Establishing incoming connection with Reactime.
 chrome.runtime.onConnect.addListener((port) => {
   /*
@@ -158,6 +160,9 @@ chrome.runtime.onConnect.addListener((port) => {
   
     Again, this port object is used for communication within your extension, not for communication with external ports or tabs in the Chrome browser. If you need to interact with specific tabs or external ports, you would use other APIs or methods, such as chrome.tabs or other Chrome Extension APIs.
   */
+
+  console.log('Port: ', port);
+  portSuccessfullyConnected = port ? true : false;
 
   portsArr.push(port); // push each Reactime communication channel object to the portsArr
 
@@ -291,9 +296,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
   switch (action) {
     case 'attemptReconnect': {
-      console.log('AYO');
+      console.log('portConnection: ', portSuccessfullyConnected);
 
-      const success = true;
+      const success = portSuccessfullyConnected;
       sendResponse({ success });
       break;
     }