removed reconnect dialog and replaced with hot toast notification

Author: garrettlchow

package.json

@@ -195,6 +195,7 @@
     "rc-tooltip": "^6.1.3",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
+    "react-hot-toast": "^2.4.1",
     "react-hover": "^3.0.1",
     "react-json-tree": "^0.18.0",
     "react-redux": "^9.0.4",

src/app/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import MainContainer from './containers/MainContainer';
+import { Toaster } from 'react-hot-toast';
 
 /*
   'currentTab' is the current active tab within Google Chrome.
@@ -11,6 +12,7 @@ import MainContainer from './containers/MainContainer';
 function App(): JSX.Element {
   return (
     <Router>
+      <Toaster />
       <MainContainer />
     </Router>
   );

src/app/containers/ButtonsContainer.tsx

@@ -1,90 +1,72 @@
 import * as React from 'react';
-//importing useState from react to handle local state for button reconnect functionality
-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';
 import Tutorial from '../components/Buttons/Tutorial';
 import { toggleMode, importSnapshots, startReconnect } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import StatusDot from '../components/Buttons/StatusDot';
-import CloseIcon from '@mui/icons-material/Close';
-import WarningIcon from '@mui/icons-material/Warning';
 import { MainState, RootState } from '../FrontendTypes';
 import { Lock, Unlock, Download, Upload, RefreshCw } from 'lucide-react';
+import { toast } from 'react-hot-toast';
 
 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
-
+  const fileDownload: HTMLAnchorElement = document.createElement('a');
   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
+    new Blob([JSON.stringify(snapshots)], { type: 'application/json' }),
   );
-
-  fileDownload.setAttribute('download', 'snapshot.json'); // We set a download attribute with snapshots.json as the file name. This allows us to download the file when the element is 'clicked.' The file will be named snapshots.json once the file is downloaded locally
-  fileDownload.click(); // click is a method on all HTML elements that simulates a mouse click, triggering the element's click event
-
-  URL.revokeObjectURL(fileDownload.href); // after file is downloaded, remove the href
+  fileDownload.setAttribute('download', 'snapshot.json');
+  fileDownload.click();
+  URL.revokeObjectURL(fileDownload.href);
 }
 
 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
+  const fileUpload = document.createElement('input');
+  fileUpload.setAttribute('type', 'file');
 
   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
+    const reader = new FileReader();
+    const eventFiles = e.target as HTMLInputElement;
 
     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
+      reader.readAsText(eventFiles.files[0]);
     }
 
     reader.onload = () => {
-      const test = reader.result.toString(); // once the local file has been loaded, result property on FileReader object returns the file's contents and then converts the file contents to a string
-      return dispatch(importSnapshots(JSON.parse(test))); // dispatch sends the result of of converting our tabs[currentTab] object => string => JSON Object. This updates the current tab
+      const test = reader.result.toString();
+      return dispatch(importSnapshots(JSON.parse(test)));
     };
   };
 
-  fileUpload.click(); // click is a method on all HTML elements that simulates a mouse click, triggering the element's click event
+  fileUpload.click();
 }
 
 function ButtonsContainer(): JSX.Element {
   const dispatch = useDispatch();
   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();
+  const handleReconnect = () => {
     dispatch(startReconnect());
+    toast.success('Successfully reconnected', {
+      duration: 2000,
+      position: 'top-right',
+      style: {
+        background: '#1f2937',
+        color: '#fff',
+      },
+      iconTheme: {
+        primary: '#14b8a6',
+        secondary: '#fff',
+      },
+    });
   };
 
-  const handleReconnectCancel = () => {
-    //closing the dialog
-    setReconnectDialogOpen(false);
-  };
-
-  useEffect(() => {
-    if (!connectionStatus) setReconnectDialogOpen(true);
-  }, [connectionStatus]);
-
   return (
     <div className='buttons-container'>
       <div className='buttons-wrapper'>
@@ -113,14 +95,11 @@ function ButtonsContainer(): JSX.Element {
           <Upload className='button-icon' size={18} />
           Upload
         </Button>
-        {/* The component below renders a button for the tutorial walkthrough of Reactime */}
         <Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
-        {/* adding a button for reconnection functionality 10/5/2023 */}
         <Button
           className='reconnect-button'
           type='button'
-          //update onClick functionality to include a popup that contains....
-          onClick={handleReconnectClick}
+          onClick={handleReconnect}
           endIcon={
             <span style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
               <StatusDot status={connectionStatus ? 'active' : 'inactive'} />
@@ -130,62 +109,6 @@ function ButtonsContainer(): JSX.Element {
           <RefreshCw className='button-icon' size={18} />
           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'
-            />
-          </div>
-          <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.
-              </>
-            )}
-          </DialogContent>
-
-          <DialogActions className='dialog-pop-up-actions'>
-            <Button
-              onClick={() => handleReconnectCancel()}
-              className='cancel-button-pop-up'
-              type='button'
-              variant='contained'
-              style={{ backgroundColor: '#474c55' }}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={() => handleReconnectConfirm()}
-              type='button'
-              className='reconnect-button-pop-up'
-              variant='contained'
-              style={{ backgroundColor: '#F00008' }}
-            >
-              Reconnect
-            </Button>
-          </DialogActions>
-        </Dialog>
       </div>
     </div>
   );