Made progress on disconnection issue on frontend

Author: Christopher Stamper

src/app/FrontendTypes.ts

@@ -144,6 +144,7 @@ export interface InitialStateProps {
   currentTabInApp: null | string;
   connectionStatus: boolean;
   reconnectRequested: boolean;
+  hasInitialized: boolean;
 }
 
 export interface DiffProps {

src/app/RTKslices.tsx

@@ -10,6 +10,7 @@ const initialState: InitialStateProps = { // we initialize what our initialState
     currentTabInApp: null,
     connectionStatus: true,
     reconnectRequested: false,
+    hasInitialized: false,
   };
 
 const findName = (index, obj) => {
@@ -510,6 +511,7 @@ export const mainSlice = createSlice({
     disconnected: (state) => {
       console.log('disconnected: ', current(state));
       state.connectionStatus = false;
+      state.port = initialState.port;
       console.log('disconnected: state end', current(state));
     },
     startReconnect: (state) => {
@@ -522,6 +524,11 @@ export const mainSlice = createSlice({
       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));
     }
   },
 })
@@ -556,6 +563,7 @@ export const {
   disconnected,
   startReconnect,
   endReconnect,
+  firstInitialization
 } =  mainSlice.actions
 
 

src/app/components/App.tsx

@@ -13,25 +13,25 @@ import theme from './theme';
   This is used to determine the proper tutorial to render when How To button is pressed.
 */
 
-const initialState: InitialStateProps = { // we initialize what our initialState is here
-  port: null,
-  currentTab: null,
-  currentTitle: 'No Target',
-  tabs: {},
-  currentTabInApp: null,
-  connectionStatus: true,
-  reconnectRequested: false,
-};
+// const initialState: InitialStateProps = { // we initialize what our initialState is here
+//   port: null,
+//   currentTab: null,
+//   currentTitle: 'No Target',
+//   tabs: {},
+//   currentTabInApp: null,
+//   connectionStatus: true,
+//   reconnectRequested: false,
+// };
 
 function App(): JSX.Element {
   return (
     <ThemeProvider theme={theme}>
       <Router>
         {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
-        <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
+        {/* <StoreContext.Provider value={useReducer(mainReducer, initialState)}> */}
           {/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
           <MainContainer />
-        </StoreContext.Provider>
+        {/* </StoreContext.Provider> */}
       </Router>
     </ThemeProvider>
   );

src/app/containers/ButtonsContainer.tsx

@@ -57,7 +57,7 @@ function ButtonsContainer(): JSX.Element {
   const currentTab = useSelector((state: any) => state.main.currentTab);
   const tabs = useSelector((state: any)=>state.main.tabs);
   const currentTabInApp = useSelector((state: any)=> state.main.currentTabInApp);
-  const connectionStatus = useSelector((state: any)=> state.main.connectionStatus);
+  const {connectionStatus, hasInitialized} = useSelector((state: any)=> state.main);
   const { mode: { paused }} = tabs[currentTab];
   //adding a local state using useState for the reconnect button functionality
   const [reconnectDialogOpen, setReconnectDialogOpen] = useState(false);
@@ -123,19 +123,41 @@ function ButtonsContainer(): JSX.Element {
         Reconnect
       </Button>
       <Dialog open={reconnectDialogOpen} onClose={handleReconnectCancel}>
-          <DialogTitle>Reconnect Confirmation</DialogTitle>
-          <DialogContent>
-            {/* //insert info here on current connection status */}
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={handleReconnectCancel} color="primary">
-              Cancel
-            </Button>
-            <Button onClick={handleReconnectConfirm} color="primary">
-              Confirm Reconnect
-            </Button>
-          </DialogActions>
-        </Dialog>
+        <DialogTitle>WARNING</DialogTitle>
+        <DialogContent>
+          {/* //insert info here on current connection status */}
+          <h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
+          Reconnecting while Reactime is still connected to application will clear all current data. Are you sure you want to proceed with the reconnection?
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => handleReconnectCancel()} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={() => handleReconnectConfirm()} color="primary">
+            Confirm Reconnect
+          </Button>
+        </DialogActions>
+      </Dialog>
+      <Dialog open={!connectionStatus} onClose={handleReconnectCancel}>
+        <DialogTitle>Reactime Disconnected</DialogTitle>
+        <DialogContent>
+          {/* //insert info here on current connection status */}
+          <h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
+          Reactime has unexpectedly disconnected from your application. To continue using Reactime, please reconnect.
+          WARNING: Reconnecting will clear all data currently stored in Reactime, so consider downloading the data before proceeding with the reconnection, if needed.
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => handleReconnectCancel()} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={() => exportHandler(tabs[currentTab])} color="primary">
+            Download
+          </Button>
+          <Button onClick={() => handleReconnectConfirm()} color="primary">
+            Reconnect
+          </Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 }

src/app/containers/MainContainer.tsx

@@ -15,6 +15,7 @@ import {
   setCurrentLocation,
   disconnected,
   endReconnect,
+  firstInitialization,
   pause,
 } from '../RTKslices';
 import { useDispatch, useSelector } from 'react-redux';
@@ -37,7 +38,7 @@ 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, reconnectRequested, hasInitialized } = useSelector((state: any) => state.main);
 
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
 
@@ -57,20 +58,19 @@ function MainContainer(): JSX.Element {
     }
   };
 
+  const handleDisconnect = (): void => {
+    console.log('unexpected port disconnect');
+      
+    dispatch(disconnected());
+  }
+
   useEffect(() => {
     console.log('LOL: ', port);
     if (port) return; // only open port once so if it exists, do not run useEffect again
     console.log('Okie')
     // 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
     console.log('currentPort', currentPort);
-    const keepAliveMainContainer = () => { // interval to keep connection to background.js alive
-      console.log('Hi :))');
-      currentPort.postMessage({
-        action: 'keepAlive' // messages sent to port to keep connection alive
-      });
-    } // messages must happen within ~five minutes
-    setInterval(keepAliveMainContainer, 30000);
 
     // listen for a message containing snapshots from the /extension/build/background.js service worker
     currentPort.onMessage.addListener(
@@ -123,27 +123,28 @@ function MainContainer(): JSX.Element {
       },
     );
 
-    // chrome.runtime.connect().onDisconnect.addListener(() => { // used to track when the above connection closes unexpectedly. Remember that it should persist throughout the application lifecycle
-    currentPort.onDisconnect.addListener(() => { // used to track when the above connection closes unexpectedly. Remember that it should persist throughout the application lifecycle
-      console.log('this port is disconnecting line 52');
-      
-      dispatch(disconnected());
-    });
+    if (currentPort.onDisconnect.hasListener(handleDisconnect))
+      currentPort.onDisconnect.removeListener(handleDisconnect)
 
-    console.log('currentPort', currentPort);
-    dispatch(setPort(currentPort)); // assign port to state so it could be used by other components
-    // if (!connectionStatus && reconnectRequested) dispatch(endReconnect());
-  });
+    // used to track when the above connection closes unexpectedly. Remember that it should persist throughout the application lifecycle
+    currentPort.onDisconnect.addListener(handleDisconnect);
 
-  // useEffect(() => {
-  //   if (initialization) return;
-    // chrome.runtime.connect().onDisconnect.addListener(() => { // used to track when the above connection closes unexpectedly. Remember that it should persist throughout the application lifecycle
-    //   console.log('this port is disconnecting line 52');
-      
+    // setInterval(() => {
+    //   console.log('disconnecting')
+    //   currentPort.disconnect();
     //   dispatch(disconnected());
-    // });
-  // });
+    // }, 15000);
+
+    // console.log('Look for listeners bro: ', currentPort.onDisconnect.hasListener(handleDisconnect));
 
+    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 (

src/extension/background.js

@@ -163,21 +163,18 @@ chrome.runtime.onConnect.addListener((port) => {
 
   // On Reactime launch: make sure RT's active tab is correct
   if (portsArr.length > 0) {
+    console.log('yo');
     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',
         payload: { tabId: activeTab.id, title: activeTab.title },
       })
-    const keepAliveServiceWorker = setInterval(() => { // interval used to keep connection to MainContainer alive
-        bg.postMessage({
-          action: 'keepAlive' // messages sent to port to keep connection alive
-        })
-      }, 295000) // messages must happen within five minutes
     });
   }
 
   // send tabs obj to the connected devtools as soon as connection to devtools is made
   if (Object.keys(tabsObj).length > 0) {
+    console.log('yuh');
     port.postMessage({
       action: 'initialConnectSnapshots',
       payload: tabsObj,
@@ -197,6 +194,7 @@ chrome.runtime.onConnect.addListener((port) => {
   // listen for message containing a snapshot from devtools and send it to contentScript -
   // (i.e. they're all related to the button actions on Reactime)
   port.onMessage.addListener((msg) => {
+    console.log('pls: ', msg);
     // msg is action denoting a time jump in devtools
     // ---------------------------------------------------------------
     // message incoming from devTools should look like this:

src/extension/contentScript.ts

@@ -19,11 +19,11 @@ window.addEventListener('message', (msg) => {
     // One-time request tells the background script that the tab has reloaded.
     chrome.runtime.sendMessage({ action: 'tabReload' });
     firstMessage = false;
-    const keepAliveContentScript = setInterval(() => { // interval to keep connection to service worker connection alive
+    // 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
       })
-    }, 295000) // messages must happen within five minutes
+    // }, 295000) // messages must happen within five minutes
   }
 
   // After tabs object has been created from firstMessage, backend (linkFiber.ts)