Finished reconnect functionality

Author: Christopher Stamper

src/app/RTKslices.tsx

@@ -511,24 +511,20 @@ export const mainSlice = createSlice({
     disconnected: (state) => {
       console.log('disconnected: ', current(state));
       state.connectionStatus = false;
-      state.port = initialState.port;
+      // state.port = initialState.port;
       console.log('disconnected: state end', current(state));
     },
     startReconnect: (state) => {
       console.log('startReconnect: ', current(state));
       state.reconnectRequested = true;
+      state.port = initialState.port;
       console.log('startReconnect: state end', current(state));
     },
     endReconnect: (state) => {
       console.log('startReconnect: ', current(state));
       state.reconnectRequested = false;
       state.connectionStatus = true;
       console.log('startReconnect: state end', current(state));
-    },
-    firstInitialization: (state) => {
-      console.log('firstInitialization: ', current(state));
-      state.hasInitalized = true;
-      console.log('firstInitialization: state end', current(state));
     }
   },
 })
@@ -563,7 +559,6 @@ export const {
   disconnected,
   startReconnect,
   endReconnect,
-  firstInitialization
 } =  mainSlice.actions
 
 

src/app/containers/ButtonsContainer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 //importing useState from react to handle local state for button reconnect functionality
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 // import { importSnapshots, toggleMode } from '../actions/actions';
 // import { useStoreContext } from '../store';
 import { Button } from '@mui/material';
@@ -61,23 +61,29 @@ function ButtonsContainer(): JSX.Element {
   const { mode: { paused }} = tabs[currentTab];
   //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 = () => {
-    connectionStatus ? setReconnectDialogOpen(true) : dispatch(startReconnect());
+    connectionStatus ? setReconnectDialogOpen(true) : setDisconnectedDialogOpen(true);
   }
 
   const handleReconnectConfirm = () => {
     //reconnection logic here
     dispatch(startReconnect());
-    setReconnectDialogOpen(false);
+    // reconnectDialogOpen ? setReconnectDialogOpen(false) : setDisconnectedDialogOpen(false);
+    handleReconnectCancel();
   }
 
   const handleReconnectCancel = () => {
     //closing the dialog
-    setReconnectDialogOpen(false);
+    reconnectDialogOpen ? setReconnectDialogOpen(false) : setDisconnectedDialogOpen(false);
   }
 
+  useEffect(() => {
+    if (!connectionStatus) setDisconnectedDialogOpen(true);
+  }, [connectionStatus])
+
   return (
     <div className='buttons-container'>
       <Button
@@ -138,7 +144,7 @@ function ButtonsContainer(): JSX.Element {
           </Button>
         </DialogActions>
       </Dialog>
-      <Dialog open={!connectionStatus} onClose={handleReconnectCancel}>
+      <Dialog open={disconnectedDialogOpen} onClose={handleReconnectCancel}>
         <DialogTitle>Reactime Disconnected</DialogTitle>
         <DialogContent>
           {/* //insert info here on current connection status */}

src/app/containers/MainContainer.tsx

@@ -15,7 +15,6 @@ import {
   setCurrentLocation,
   disconnected,
   endReconnect,
-  firstInitialization,
   pause,
 } from '../RTKslices';
 import { useDispatch, useSelector } from 'react-redux';
@@ -58,10 +57,11 @@ function MainContainer(): JSX.Element {
     }
   };
 
-  const handleDisconnect = (): void => {
-    console.log('unexpected port disconnect');
-      
-    dispatch(disconnected());
+  const handleDisconnect = (msg): void => {
+    if (msg === 'portDisconnect') {
+      console.log('unexpected port disconnect: ', msg);
+      dispatch(disconnected());
+    }
   }
 
   useEffect(() => {
@@ -119,33 +119,26 @@ function MainContainer(): JSX.Element {
           }
           default:
         }
-        return true; // we return true so that the connection stays open, otherwise the message channel will close
+        // return true; // we return true so that the connection stays open, otherwise the message channel will close
       },
     );
 
-    if (currentPort.onDisconnect.hasListener(handleDisconnect))
-      currentPort.onDisconnect.removeListener(handleDisconnect)
 
+    if (chrome.runtime.onMessage.hasListener(handleDisconnect))
+      chrome.runtime.onMessage.removeListener(handleDisconnect);
+  
     // used to track when the above connection closes unexpectedly. Remember that it should persist throughout the application lifecycle
-    currentPort.onDisconnect.addListener(handleDisconnect);
+    chrome.runtime.onMessage.addListener(handleDisconnect);
 
-    // setInterval(() => {
+    // setTimeout(() => {
     //   console.log('disconnecting')
     //   currentPort.disconnect();
-    //   dispatch(disconnected());
-    // }, 15000);
-
-    // console.log('Look for listeners bro: ', currentPort.onDisconnect.hasListener(handleDisconnect));
+    // }, 30000);
 
     if (currentPort) dispatch(setPort(currentPort)); // assign port to state so it could be used by other components
     if (!connectionStatus && reconnectRequested) dispatch(endReconnect());
   });
 
-  // useEffect(() => {
-  //   console.log('Onlys runs on initialzation');
-  //   dispatch(firstInitialization());
-  // }, [])
-
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)
   if (
     !tabs[currentTab] ||

src/extension/background.js

@@ -159,11 +159,14 @@ 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('ATTEMPTING CONNECTION');
   portsArr.push(port); // push each Reactime communication channel object to the portsArr
+  console.log('portsArr: ', portsArr);
 
   // On Reactime launch: make sure RT's active tab is correct
   if (portsArr.length > 0) {
     console.log('yo');
+    console.log('activeTab: ', activeTab)
     portsArr.forEach((bg) => {// go through each port object (each Reactime instance)
       bg.postMessage({  // send passed in action object as a message to the current port
         action: 'changeTab',
@@ -183,9 +186,11 @@ chrome.runtime.onConnect.addListener((port) => {
 
   // every time devtool is closed, remove the port from portsArr
   port.onDisconnect.addListener((e) => {
+    console.log('PORT DISCONNECTED BACKGROUND');
     for (let i = 0; i < portsArr.length; i += 1) {
       if (portsArr[i] === e) {
         portsArr.splice(i, 1);
+        chrome.runtime.sendMessage('portDisconnect');
         break;
       }
     }
@@ -218,7 +223,7 @@ chrome.runtime.onConnect.addListener((port) => {
         tabsObj[tabId].currParent = payload.currParent; // reset currParent to last state recorded
         tabsObj[tabId].currBranch = payload.currBranch; // reset currBranch to last state recorded
 
-        return true; // return true so that port remains open
+        // return true; // return true so that port remains open
 
       case 'emptySnap':
         tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1]]; // reset snapshots to page last state recorded
@@ -230,29 +235,29 @@ chrome.runtime.onConnect.addListener((port) => {
         tabsObj[tabId].index = 1; //reset index
         tabsObj[tabId].currParent = 0; // reset currParent
         tabsObj[tabId].currBranch = 1; // reset currBranch
-        return true; // return true so that port remains open
+        // return true; // return true so that port remains open
 
       case 'setPause': // Pause = lock on tab
         tabsObj[tabId].mode.paused = payload;
-        return true; // return true so that port remains open
+        // return true; // return true so that port remains open
 
       case 'launchContentScript':
         chrome.scripting.executeScript({
           target: { tabId },
           files: ['bundles/content.bundle.js'],
         });
-        return true;
+        // return true;
 
       case 'jumpToSnap':
         chrome.tabs.sendMessage(tabId, msg);
-        return true; // attempt to fix message port closing error, consider return Promise
+        // return true; // attempt to fix message port closing error, consider return Promise
 
       case 'toggleRecord':
         chrome.tabs.sendMessage(tabId, msg);
-        return true;
+        // return true;
 
       default:
-        return true;
+        // return true;
     }
   });
 });
@@ -261,7 +266,7 @@ chrome.runtime.onConnect.addListener((port) => {
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED: set Content
   if (request.type === 'SIGN_CONNECT') {
-    return true;
+    // return true;
   }
   const tabTitle = sender.tab.title;
   const tabId = sender.tab.id;
@@ -283,7 +288,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   ) {
     isReactTimeTravel = true;
   } else {
-    return true;
+    // return true;
   }
   // everytime we get a new tabId, add it to the object
   if (isReactTimeTravel && !(tabId in tabsObj)) { 
@@ -392,7 +397,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     default:
       break;
   }
-  return true; // attempt to fix close port error
+  // return true; // attempt to fix close port error
 });
 
 // when tab is closed, remove the tabId from the tabsObj

src/extension/contentScript.ts

@@ -20,9 +20,9 @@ window.addEventListener('message', (msg) => {
     chrome.runtime.sendMessage({ action: 'tabReload' });
     firstMessage = false;
     // const keepAliveContentScript = setInterval(() => { // interval to keep connection to service worker connection alive
-      chrome.runtime.sendMessage({
-        action: 'keepAlive' // messages sent to port to keep connection alive
-      })
+      // chrome.runtime.sendMessage({
+      //   action: 'keepAlive' // messages sent to port to keep connection alive
+      // })
     // }, 295000) // messages must happen within five minutes
   }
 
@@ -57,12 +57,15 @@ chrome.runtime.onMessage.addListener((request) => {
     }
     // After the jumpToSnap action has been sent back to background js,
     // it will send the same action to backend files (index.ts) for it execute the jump feature
+    if (action === 'portDisconnect') console.log('RECEIVED PORT DISCONNECT MESSAGE contentScript')
     // '*' == target window origin required for event to be dispatched, '*' = no preference
-    window.postMessage(request, '*');
+    // window.postMessage(request, '*');
   }
-  return true; // attempt to fix port closing console error
+  // return true; // attempt to fix port closing console error
 });
 
+
+
 // Performance metrics being calculated by the 'web-vitals' api and
 // sent as an object to background.js.
 // To learn more about Chrome web vitals, see https://web.dev/vitals/.
@@ -87,3 +90,4 @@ getCLS(gatherMetrics);
 // Send message to background.js for injecting the initial script
 // into the app's DOM.
 chrome.runtime.sendMessage({ action: 'injectScript' });
+