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

Progressed on fixing connectivity issue.

Author: AndrewByun

package.json

@@ -184,8 +184,9 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.12",
     "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.1",
+    "@mui/material": "^5.14.12",
     "@mui/styled-engine-sc": "^5.12.0",
+    "@mui/system": "^5.14.12",
     "@reduxjs/toolkit": "^1.9.6",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.3",

src/app/FrontendTypes.ts

@@ -142,6 +142,8 @@ export interface InitialStateProps {
   currentTitle: null | string;
   tabs: unknown;
   currentTabInApp: null | string;
+  connectionStatus: boolean;
+  reconnectRequested: boolean;
 }
 
 export interface DiffProps {

src/app/RTKslices.tsx

@@ -8,6 +8,8 @@ const initialState: InitialStateProps = { // we initialize what our initialState
     currentTitle: 'No Target',
     tabs: {},
     currentTabInApp: null,
+    connectionStatus: true,
+    reconnectRequested: false,
   };
 
 const findName = (index, obj) => {
@@ -151,7 +153,7 @@ export const mainSlice = createSlice({
       console.log('setTab: state end', current(state));
 
     },
-    deleteTab : (state, action) => {
+    deleteTab: (state, action) => {
       console.log('deleteTab: ', current(state));
       delete state.tabs[action.payload];
       console.log('deleteTab: state end', current(state));
@@ -369,9 +371,6 @@ export const mainSlice = createSlice({
 
 
     },
-
-
-
     toggleMode: (state, action)=>{
       console.log('Toggle Mode: ', current(state));
 
@@ -507,6 +506,22 @@ export const mainSlice = createSlice({
         };
       });
       tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: false };
+    },
+    disconnected: (state) => {
+      console.log('disconnected: ', current(state));
+      state.connectionStatus = false;
+      console.log('disconnected: state end', current(state));
+    },
+    startReconnect: (state) => {
+      console.log('startReconnect: ', current(state));
+      state.reconnectRequested = true;
+      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));
     }
   },
 })
@@ -537,7 +552,10 @@ export const {
   onHoverExit,
   save,
   toggleExpanded,
-  deleteSeries
+  deleteSeries,
+  disconnected,
+  startReconnect,
+  endReconnect,
 } =  mainSlice.actions
 
 

src/app/components/App.tsx

@@ -19,6 +19,8 @@ const initialState: InitialStateProps = { // we initialize what our initialState
   currentTitle: 'No Target',
   tabs: {},
   currentTabInApp: null,
+  connectionStatus: true,
+  reconnectRequested: false,
 };
 
 function App(): JSX.Element {

src/app/components/StatusDot.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+// import { styled } from '@mui/system';
+import styled from 'styled-components';
+
+const Dot = styled('div')({
+  borderRadius: '50%',
+  width: '12px',
+  height: '12px',
+  display: 'inline-block',
+});
+
+const StatusDot = ({ status }) => {
+  let color;
+  switch (status) {
+    case 'active':
+      color = 'green';
+      break;
+    case 'inactive':
+      color = 'red';
+      break;
+    default:
+      color = 'green';
+  }
+  return (<Dot style={{ backgroundColor: color }}/>) 
+};
+
+export default StatusDot;

src/app/containers/ButtonsContainer.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
+//importing useState from react to handle local state for button reconnect functionality
+import { useState } from 'react';
 // import { importSnapshots, toggleMode } from '../actions/actions';
 // import { useStoreContext } from '../store';
 import { Button } from '@mui/material';
+//importing necesary material UI components for dialogue popup
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
 import Tutorial from '../components/Tutorial';
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
-import { toggleMode, importSnapshots } from '../RTKslices';
+import { toggleMode, importSnapshots, startReconnect } from '../RTKslices';
 import { useDispatch, useSelector } from 'react-redux';
+import StatusDot from '../components/StatusDot'; 
 
 function exportHandler(snapshots: []): void { // function that takes in our tabs[currentTab] object to be exported as a JSON file. NOTE: TypeScript needs to be updated
   const fileDownload: HTMLAnchorElement = document.createElement('a'); // invisible HTML element that will hold our tabs[currentTab] object
@@ -44,15 +49,35 @@ function importHandler(dispatch: (a: unknown) => void): void { // function handl
   fileUpload.click(); // click is a method on all HTML elements that simulates a mouse click, triggering the element's click event
 }
 
+
 function ButtonsContainer(): JSX.Element {
   // const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
   // const [state, dispatch] = useStoreContext();
   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 { mode: { paused }} = tabs[currentTab];
-  
+  //adding a local state using useState for the reconnect button functionality
+  const [reconnectDialogOpen, setReconnectDialogOpen] = useState(false);
+
+  //logic for handling dialog box opening and closing
+  const handleReconnectClick = () => {
+    connectionStatus ? setReconnectDialogOpen(true) : dispatch(startReconnect());
+  }
+
+  const handleReconnectConfirm = () => {
+    //reconnection logic here
+    dispatch(startReconnect());
+    setReconnectDialogOpen(false);
+  }
+
+  const handleReconnectCancel = () => {
+    //closing the dialog
+    setReconnectDialogOpen(false);
+  }
+
   return (
     <div className='buttons-container'>
       <Button
@@ -82,6 +107,35 @@ function ButtonsContainer(): JSX.Element {
       //commented out so we can use useDispatch in Tutorial.tsx
        dispatch={dispatch} 
        currentTabInApp={currentTabInApp} />
+      {/* adding a button for reconnection functionality 10/5/2023 */}
+      <Button
+        variant='outlined'
+        className='reconnect-button'
+        type='button'
+        //update onClick functionality to include a popup that contains....
+        onClick={handleReconnectClick}
+        endIcon={
+          <span style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+            <StatusDot status={connectionStatus ? 'active' : 'inactive'} />
+          </span>
+        }
+        >
+        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>
     </div>
   );
 }

src/app/containers/MainContainer.tsx

@@ -13,6 +13,8 @@ import {
   deleteTab,
   noDev,
   setCurrentLocation,
+  disconnected,
+  endReconnect,
   pause,
 } from '../RTKslices';
 import { useDispatch, useSelector } from 'react-redux';
@@ -35,6 +37,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 [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
 
@@ -53,19 +56,22 @@ function MainContainer(): JSX.Element {
       recordBtn.style.display = 'none';
     }
   };
-  
+
   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 = setInterval(() => { // interval to keep connection to background.js alive
-    currentPort.postMessage({
-      action: 'keepAlive' // messages sent to port to keep connection alive
-    })
-    }, 295000) // messages must happen within five minutes
-    
+    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(
       // parameter message is an object with following type script properties
@@ -117,13 +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());
     });
+
     console.log('currentPort', currentPort);
     dispatch(setPort(currentPort)); // assign port to state so it could be used by other components
+    // if (!connectionStatus && reconnectRequested) dispatch(endReconnect());
   });
 
+  // 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());
+    // });
+  // });
+
+
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)
   if (
     !tabs[currentTab] ||

src/app/styles/layout/_buttonsContainer.scss

@@ -5,7 +5,7 @@
 .buttons-container {
   margin: 0 1% 0 1%;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   grid-gap: 1%;
   padding: 1% 0 1% 0;
 }