Merge pull request #20 from oslabs-beta/ctstamper/Timeout

Fixed Disconnection Issue

Author: ctstamper

src/app/RTKslices.tsx

@@ -463,6 +463,7 @@ export const mainSlice = createSlice({
 
     startReconnect: (state) => {
       state.reconnectRequested = true;
+      state.port = initialState.port;
     },
 
     endReconnect: (state) => {

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 { Button } from '@mui/material';
 //importing necesary material UI components for dialogue popup
 import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
@@ -50,30 +50,33 @@ function importHandler(dispatch: (a: unknown) => void): void { // function handl
 
 function ButtonsContainer(): JSX.Element {
   const dispatch = useDispatch();
-  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 {currentTab, tabs, currentTabInApp, connectionStatus} = 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);
+  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);
+    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
@@ -118,19 +121,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={disconnectedDialogOpen} 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

@@ -14,8 +14,7 @@ import {
   noDev,
   setCurrentLocation,
   disconnected,
-  endReconnect,
-  pause,
+  endReconnect
 } from '../RTKslices';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -49,20 +48,18 @@ function MainContainer(): JSX.Element {
     }
   };
 
+  const handleDisconnect = (msg): void => {
+    if (msg === 'portDisconnect') {
+      console.log('unexpected port disconnection');
+      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(
@@ -111,31 +108,23 @@ function MainContainer(): JSX.Element {
           }
           default:
         }
-        return true; // we return true so that the connection stays open, otherwise the message channel will close
       },
     );
 
-    // 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());
-    });
 
-    console.log('currentPort', currentPort);
-    dispatch(setPort(currentPort)); // assign port to state so it could be used by other components
-    // if (!connectionStatus && reconnectRequested) dispatch(endReconnect());
-  });
+    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
+    chrome.runtime.onMessage.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');
-      
-    //   dispatch(disconnected());
-    // });
-  // });
+    // assign port to state so it could be used by other components
+    if (currentPort)
+      dispatch(setPort(currentPort));
 
+    if (!connectionStatus && reconnectRequested)
+      dispatch(endReconnect());
+  });
 
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)
   if (

src/extension/background.js

@@ -160,19 +160,14 @@ chrome.runtime.onConnect.addListener((port) => {
   */
 
   portsArr.push(port); // push each Reactime communication channel object to the portsArr
-
+ 
   // On Reactime launch: make sure RT's active tab is correct
   if (portsArr.length > 0) {
     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
     });
   }
 
@@ -186,9 +181,11 @@ chrome.runtime.onConnect.addListener((port) => {
 
   // every time devtool is closed, remove the port from portsArr
   port.onDisconnect.addListener((e) => {
+    console.log('PORT DISCONNECTED');
     for (let i = 0; i < portsArr.length; i += 1) {
       if (portsArr[i] === e) {
         portsArr.splice(i, 1);
+        chrome.runtime.sendMessage('portDisconnect');
         break;
       }
     }
@@ -220,7 +217,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
@@ -232,29 +229,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;
     }
   });
 });
@@ -263,7 +260,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;
@@ -285,7 +282,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)) { 
@@ -394,7 +391,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

@@ -19,11 +19,6 @@ 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
-      chrome.runtime.sendMessage({
-        action: 'keepAlive' // messages sent to port to keep connection alive
-      })
-    }, 295000) // messages must happen within five minutes
   }
 
   // After tabs object has been created from firstMessage, backend (linkFiber.ts)
@@ -60,9 +55,10 @@ chrome.runtime.onMessage.addListener((request) => {
     // '*' == target window origin required for event to be dispatched, '*' = no preference
     window.postMessage(request, '*');
   }
-  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 +83,4 @@ getCLS(gatherMetrics);
 // Send message to background.js for injecting the initial script
 // into the app's DOM.
 chrome.runtime.sendMessage({ action: 'injectScript' });
+