Pseudocode added to Loader.tsx and ErrorContainer.tsx

Author: EivindDelFierro

src/app/components/Loader.tsx

@@ -8,17 +8,21 @@ import { faCheck, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
 // Displays the result of the check when loading is done
 const handleResult = (result: boolean): JSX.Element =>
   result ? (
+    // if result boolean is true, we display a checkmark icon
     <FontAwesomeIcon icon={faCheck} className='check' size='lg' />
   ) : (
+    // if the result boolean is false, we display a fail icon
     <FontAwesomeIcon icon={faExclamationCircle} className='fail' size='lg' />
   );
 
 // Returns the Loader component
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const Loader = ({ loading, result }): JSX.Element =>
   loading ? (
+    // if the loadingArray value is true, we display a loading icon
     <ClipLoader color='#123abc' size={30} loading={loading} />
   ) : (
+    // else we display a component produced by handleResult depending on if the result parameter (which takes an argument from the status object in ErrorContainer) is true or false
     handleResult(result)
   );
 

src/app/containers/ErrorContainer.tsx

@@ -5,71 +5,100 @@ import Loader from '../components/Loader';
 import ErrorMsg from '../components/ErrorMsg';
 import { useStoreContext } from '../store';
 
+/*
+This is the loading popup that a user may get when first initalizing the application. This page checks:
+
+  1. if the content script has been launched on the current tab
+  2. if React Dev Tools has been installed
+  3. if target tab contains a compatible React app
+*/
+
 function ErrorContainer(): JSX.Element {
+  // We destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (store/dispatch) are from the useReducer function invocation in the App component
   const [store, dispatch] = useStoreContext();
+  // We continue to destructure store and get the tabs/currentTab/port
   const { tabs, currentTitle, currentTab } = store;
-  // hooks for error checks
+
+  // We create a local state "loadingArray" and set it to an array with three true elements. These will be used as hooks for error checking against a 'status' object that is declared later in a few lines.
+  // This loadingArray is used later in the return statement to display a spinning loader icon if it's true. If it's false, either a checkmark icon or an exclamation icon will be displayed to the user.
   const [loadingArray, setLoading] = useState([true, true, true]);
+
+  // useRef returns an object with a property 'initialValue' and a value of whatever was passed in. This allows us to reference a value that's not needed for rendering
   const titleTracker = useRef(currentTitle);
   const timeout = useRef(null);
 
+  // function that launches the main app
   function launch(): void {
     dispatch(launchContentScript(tabs[currentTab]));
   }
 
-  // check if tabObj exists > set status
+  // We create a status object that we may use later if tabs[currentTab] exists
   const status = {
     contentScriptLaunched: false,
     reactDevToolsInstalled: false,
     targetPageisaReactApp: false,
   };
+
+  // If we do have a tabs[currentTab] object, we replace the status obj we declared above  with the properties of the tabs[currentTab].status
   if (tabs[currentTab]) {
     Object.assign(status, tabs[currentTab].status);
   }
 
   // hook that sets timer while waiting for a snapshot from the background script, resets if the tab changes/reloads
   useEffect(() => {
+    // We declare a function setLoadingArray which checks our local state loadingArray and compares it with a boolean value. If they don't match, we set the element to the passed in value boolean and update our local state with the new loadingArray 
     function setLoadingArray(i: number, value: boolean) {
+      // this conditional helps us avoid unecessary state changes if the element and the value are already the same
       if (loadingArray[i] !== value) {
-        // avoid unecessary state changes
         const loadingArrayClone = [...loadingArray];
         loadingArrayClone[i] = value;
         setLoading(loadingArrayClone);
       }
     }
 
-    // check for tab reload/change: reset loadingArray
+    // if the current tab changes/reloads, we reset loadingArray to it's default [true, true, true]
     if (titleTracker.current !== currentTitle) {
       titleTracker.current = currentTitle;
+
       setLoadingArray(0, true);
       setLoadingArray(1, true);
       setLoadingArray(2, true);
+
       if (timeout.current) {
         clearTimeout(timeout.current);
         timeout.current = null;
       }
     }
+
     // if content script hasnt been found, set timer or immediately resolve
+    // check our status object and see if contentScriptLaunched is false
     if (!status.contentScriptLaunched) {
+      // if contentScriptLaunched is false, we check our loadingArray state at position [0]
       if (loadingArray[0] === true) {
+        // if the element was true, then that means our timeout.current is still null so we now set it to a setTimeout function that will flip loadingArray[0] to false after 1.5 seconds
         timeout.current = setTimeout(() => {
           setLoadingArray(0, false);
         }, 1500);
       }
     } else {
+      // if status.contentScriptLaunched is true, that means timeout.current !== null. This means that useEffect was triggered previously.
       setLoadingArray(0, false);
     }
+
+    // The next two if statements are written in a way to allow the checking of 'content script hook', 'reactDevTools check', and 'target page is a react app' to be run in chronological order.
     if (loadingArray[0] === false && status.contentScriptLaunched === true) {
       setLoadingArray(1, false);
     }
     if (loadingArray[1] === false && status.reactDevToolsInstalled === true) {
       setLoadingArray(2, false);
     }
 
-    //Unload async function when Error Container is unmounted
+    // Unload async function when Error Container is unmounted
     return () => {
       clearTimeout(timeout.current);
     };
+
+  // within our dependency array, we're keeping track of if the status, currentTitle/tab, timeout, or loadingArray changes and we re-run the useEffect hook if they do
   }, [status, currentTitle, timeout, loadingArray]);
 
   return (