Finished increasing typescript coverage, fixed formatting

Author: Christopher Stamper

src/app/components/Action.tsx

@@ -99,6 +99,7 @@ const Action = (props: ActionProps): JSX.Element => {
   return (
     <div className='individual-action'>
       <div
+        // @ts-ignore
         onKeyDown={(e): void => handleOnkeyDown(e, viewIndex)}
         className={selected || last ? 'action-component selected' : 'action-component'}
         onClick={() => {

src/app/components/MainSlider.tsx

@@ -36,6 +36,7 @@ function MainSlider(props: MainSliderProps): JSX.Element {
   useEffect(() => {
     if (currLocation) {
       // if we have a 'currLocation'
+      //@ts-ignore
       setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index'
     } else {
       setSliderIndex(0); // just set the thumb position to the beginning

src/app/containers/ButtonsContainer.tsx

@@ -11,16 +11,18 @@ import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { toggleMode, importSnapshots, startReconnect } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
-import StatusDot from '../components/StatusDot'; 
+import StatusDot from '../components/StatusDot';
 import LoopIcon from '@mui/icons-material/Loop';
 import CloseIcon from '@mui/icons-material/Close';
 import WarningIcon from '@mui/icons-material/Warning';
 import { MainState, RootState } from '../FrontendTypes';
 
-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
+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
 
-  fileDownload.href = URL.createObjectURL( // href is the reference to the URL object created from the Blob
+  fileDownload.href = URL.createObjectURL(
+    // href is the reference to the URL object created from the Blob
     new Blob([JSON.stringify(snapshots)], { type: 'application/json' }), // Blob obj is raw data. The tabs[currentTab] object is stringified so the Blob can access the raw data
   );
 
@@ -30,15 +32,18 @@ function exportHandler(snapshots: []): void { // function that takes in our tabs
   URL.revokeObjectURL(fileDownload.href); // after file is downloaded, remove the href
 }
 
-function importHandler(dispatch: (a: unknown) => void): void { // function handles the importing of a tabs[currentTab] object when the upload button is selected
+function importHandler(dispatch: (a: unknown) => void): void {
+  // function handles the importing of a tabs[currentTab] object when the upload button is selected
   const fileUpload = document.createElement('input'); // invisible HTML element that will hold our uploaded tabs[currentTab] object
   fileUpload.setAttribute('type', 'file'); // Attributes added to HTML element
 
-  fileUpload.onchange = (e: Event) => { // onChange is when value of HTML element is changed
+  fileUpload.onchange = (e: Event) => {
+    // onChange is when value of HTML element is changed
     const reader = new FileReader(); // FileReader is an object that reads contents of local files in async. It can use file or blob objects
     const eventFiles = e.target as HTMLInputElement; // uploaded tabs[currentTab] object is stored as the event.target
-   
-    if (eventFiles) { // if the fileUpload element has an eventFiles
+
+    if (eventFiles) {
+      // if the fileUpload element has an eventFiles
       reader.readAsText(eventFiles.files[0]); // the reader parses the file into a string and stores it within the reader object
     }
 
@@ -51,33 +56,38 @@ 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 dispatch = useDispatch();
-  const {currentTab, tabs, currentTabInApp, connectionStatus}: MainState = useSelector((state: RootState)=> state.main);
-  const { mode: { paused }} = tabs[currentTab];
+  const { currentTab, tabs, currentTabInApp, connectionStatus }: MainState = useSelector(
+    (state: RootState) => state.main,
+  );
+  //@ts-ignore
+  const {
+    //@ts-ignore
+    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 = () => {
     setReconnectDialogOpen(true);
-  }
+  };
 
   const handleReconnectConfirm = () => {
     handleReconnectCancel();
     dispatch(startReconnect());
-  }
+  };
 
   const handleReconnectCancel = () => {
     //closing the dialog
     setReconnectDialogOpen(false);
-  }
+  };
 
   useEffect(() => {
     if (!connectionStatus) setReconnectDialogOpen(true);
-  }, [connectionStatus])
+  }, [connectionStatus]);
 
   return (
     <div className='buttons-container'>
@@ -94,22 +104,18 @@ function ButtonsContainer(): JSX.Element {
         variant='outlined'
         className='export-button'
         type='button'
+        //@ts-ignore
         onClick={() => exportHandler(tabs[currentTab])}
       >
         <FileDownloadIcon sx={{ pr: 1 }} />
         Download
       </Button>
-      <Button
-      variant='outlined'
-      className='import-button'
-      onClick={() => importHandler(dispatch)}>
+      <Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
         <FileUploadIcon sx={{ pr: 1 }} />
         Upload
       </Button>
       {/* The component below renders a button for the tutorial walkthrough of Reactime */}
-      <Tutorial
-       dispatch={dispatch} 
-       currentTabInApp={currentTabInApp} />
+      <Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
       {/* adding a button for reconnection functionality 10/5/2023 */}
       <Button
         variant='outlined'
@@ -122,40 +128,70 @@ function ButtonsContainer(): JSX.Element {
             <StatusDot status={connectionStatus ? 'active' : 'inactive'} />
           </span>
         }
-        >
+      >
         <LoopIcon sx={{ pr: 1 }} />
         Reconnect
       </Button>
-      <Dialog className="dialog-pop-up"open={reconnectDialogOpen} onClose={handleReconnectCancel}>
-        <div className='close-icon-pop-up-div' >
-        <CloseIcon type="button" onClick={() => handleReconnectCancel()} className='close-icon-pop-up'/>
+      <Dialog className='dialog-pop-up' open={reconnectDialogOpen} onClose={handleReconnectCancel}>
+        <div className='close-icon-pop-up-div'>
+          <CloseIcon
+            type='button'
+            onClick={() => handleReconnectCancel()}
+            className='close-icon-pop-up'
+          />
         </div>
-        <div className="warning-header-container">
-          <WarningIcon className='warning-icon-pop-up'/>
+        <div className='warning-header-container'>
+          <WarningIcon className='warning-icon-pop-up' />
           <DialogTitle className='dialog-pop-up-header'>WARNING</DialogTitle>
         </div>
         <DialogContent className='dialog-pop-up-contents'>
-            <h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
-            {connectionStatus
-            ? <>
-                Reconnecting while Reactime is still connected to the application may cause unforeseen issues. Are you sure you want to proceed with the reconnection?
-              </>
-            : <>
-                Reactime has unexpectedly disconnected from your application. To continue using Reactime, please reconnect. 
-                <br />
-                <br />
-                WARNING: Reconnecting can sometimes cause unforeseen issues, consider downloading the data before proceeding with the reconnection, if needed.
-              </>}
+          <h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
+          {connectionStatus ? (
+            <>
+              Reconnecting while Reactime is still connected to the application may cause unforeseen
+              issues. Are you sure you want to proceed with the reconnection?
+            </>
+          ) : (
+            <>
+              Reactime has unexpectedly disconnected from your application. To continue using
+              Reactime, please reconnect.
+              <br />
+              <br />
+              WARNING: Reconnecting can sometimes cause unforeseen issues, consider downloading the
+              data before proceeding with the reconnection, if needed.
+            </>
+          )}
         </DialogContent>
 
         <DialogActions className='dialog-pop-up-actions'>
-          <Button onClick={() => handleReconnectCancel()} className="cancel-button-pop-up" type="button" variant="contained" style={{ backgroundColor: '#474c55' }}> 
+          <Button
+            onClick={() => handleReconnectCancel()}
+            className='cancel-button-pop-up'
+            type='button'
+            variant='contained'
+            style={{ backgroundColor: '#474c55' }}
+          >
             Cancel
           </Button>
-          {!connectionStatus && <Button onClick={() => exportHandler(tabs[currentTab])} type="button" className="download-button-pop-up" variant="contained" color="primary">
-            Download
-          </Button> }
-          <Button onClick={() => handleReconnectConfirm()} type="button" className="reconnect-button-pop-up" variant="contained" style={{ backgroundColor: '#F00008' }}>
+          {!connectionStatus && (
+            <Button
+            // @ts-ignore
+              onClick={() => exportHandler(tabs[currentTab])}
+              type='button'
+              className='download-button-pop-up'
+              variant='contained'
+              color='primary'
+            >
+              Download
+            </Button>
+          )}
+          <Button
+            onClick={() => handleReconnectConfirm()}
+            type='button'
+            className='reconnect-button-pop-up'
+            variant='contained'
+            style={{ backgroundColor: '#F00008' }}
+          >
             Reconnect
           </Button>
         </DialogActions>

src/app/containers/MainContainer.tsx

@@ -26,8 +26,8 @@ import { MainState, RootState } from '../FrontendTypes';
 function MainContainer(): JSX.Element {
   const dispatch = useDispatch();
 
-  const { currentTab , tabs, port }: MainState = useSelector((state: RootState) => state.main);
-  
+  const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
+
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
 
   // this function handles Time Jump sidebar view
@@ -39,7 +39,8 @@ function MainContainer(): JSX.Element {
 
     const recordBtn = document.getElementById('recordBtn');
 
-    if (recordBtn.style.display === 'none') { // switches whether to display the record toggle button by changing the display property between none and flex
+    if (recordBtn.style.display === 'none') {
+      // switches whether to display the record toggle button by changing the display property between none and flex
       recordBtn.style.display = 'flex';
     } else {
       recordBtn.style.display = 'none';
@@ -48,23 +49,23 @@ function MainContainer(): JSX.Element {
 
   // Function handles when Reactime unexpectedly disconnects
   const handleDisconnect = (msg): void => {
-    if (msg === 'portDisconnect')
-      dispatch(disconnected());
-  }
+    if (msg === 'portDisconnect') dispatch(disconnected());
+  };
 
   // Function to listen for a message containing snapshots from the /extension/build/background.js service worker
-  const messageListener = (message: { 
-    action: string; 
-    payload: Record<string, unknown>; 
-    sourceTab: number 
+  const messageListener = (message: {
+    action: string;
+    payload: Record<string, unknown>;
+    sourceTab: number;
   }) => {
     const { action, payload, sourceTab } = message;
     let maxTab: number;
 
-    if (!sourceTab && action !== 'keepAlive') { // if the sourceTab doesn't exist or is 0 and it is not a 'keepAlive' action
+    if (!sourceTab && action !== 'keepAlive') {
+      // if the sourceTab doesn't exist or is 0 and it is not a 'keepAlive' action
       const tabsArray: Array<string> = Object.keys(payload); // we create a tabsArray of strings composed of keys from our payload object
       const numTabsArray: number[] = tabsArray.map((tab) => Number(tab)); // we then map out our tabsArray where we convert each string into a number
-    
+
       maxTab = Math.max(...numTabsArray); // we then get the largest tab number value
     }
 
@@ -97,28 +98,28 @@ function MainContainer(): JSX.Element {
       }
       default:
     }
-  }
+  };
 
   useEffect(() => {
     if (port) return; // only open port once so if it exists, do not run useEffect again
-        
+
     // Connect ot port and assign evaluated result (obj) to currentPort
     const currentPort = chrome.runtime.connect();
-    
+
     // If messageListener exists on currentPort, remove it
     while (currentPort.onMessage.hasListener(messageListener))
       currentPort.onMessage.removeListener(messageListener);
-    
+
     // Add messageListener to the currentPort
     currentPort.onMessage.addListener(messageListener);
-    
+
     // If handleDisconnect exists on chrome.runtime, remove it
     while (chrome.runtime.onMessage.hasListener(handleDisconnect))
       chrome.runtime.onMessage.removeListener(handleDisconnect);
-    
+
     // add handleDisconnect to chrome.runtime
     chrome.runtime.onMessage.addListener(handleDisconnect);
-    
+
     // assign port to state so it could be used by other components
     dispatch(setPort(currentPort));
 
@@ -128,13 +129,17 @@ function MainContainer(): JSX.Element {
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)
   if (
     !tabs[currentTab] ||
+    //@ts-ignore
     !tabs[currentTab].status.reactDevToolsInstalled ||
+    //@ts-ignore
     !tabs[currentTab].status.targetPageisaReactApp
   ) {
     return <ErrorContainer />;
   }
 
-  const { currLocation, viewIndex, sliderIndex, snapshots, hierarchy, webMetrics } = tabs[currentTab]; // we destructure the currentTab object
+  const { currLocation, viewIndex, sliderIndex, snapshots, hierarchy, webMetrics } =
+    tabs[currentTab]; // we destructure the currentTab object
+  //@ts-ignore
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex]; // if viewIndex is -1, then use the sliderIndex instead
 
   // cleaning hierarchy and snapshotView from stateless data
@@ -182,18 +187,24 @@ function MainContainer(): JSX.Element {
           setActionView={setActionView}
           toggleActionContainer={toggleActionContainer}
         />
+        {/* @ts-ignore */}
         {snapshots.length ? (
           <div className='state-container-container'>
             <StateContainer
+              // @ts-ignore
               webMetrics={webMetrics}
+              // @ts-ignore
               viewIndex={viewIndex}
               snapshot={snapshotDisplay}
               hierarchy={hierarchyDisplay}
+              // @ts-ignore
               snapshots={snapshots}
+              // @ts-ignore
               currLocation={currLocation}
             />
           </div>
         ) : null}
+        {/* @ts-ignore */}
         <TravelContainer snapshotsLength={snapshots.length} />
         <ButtonsContainer />
       </div>

src/app/containers/TravelContainer.tsx

@@ -80,6 +80,7 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
         // data-testid, prop for testing in RTL
         data-testid='play-button-test'
         //REMOVED DISPATCH FROM PLAY
+        // @ts-ignore
         onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}
       >
         {playing ? 'Pause' : 'Play'}