Changed some words to improve clarity. Finished ErrorMsg.tsx

Author: EivindDelFierro

src/app/components/ErrorMsg.tsx

@@ -1,6 +1,15 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+/*
+This file determines what text will be displayed to the user if any one of the following fail to load:
+
+  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
+
+*/
+
 // parses loadingArray and status and returns the correct message
 function parseError(loadingArray: [], status: Record<string, unknown>): string {
   let stillLoading = true;
@@ -9,14 +18,16 @@ function parseError(loadingArray: [], status: Record<string, unknown>): string {
   });
   // As long as everything is still loading dont diplay an error message
   if (stillLoading) return 'default';
-  // Return first status that fails
+
+  // If we're done loading everything, return the first status that fails
   if (!status.contentScriptLaunched) return 'Content Script Error';
   if (!status.reactDevToolsInstalled) return 'RDT Error';
   if (!status.targetPageisaReactApp) return 'Not React App';
   return 'default';
 }
 
 function ErrorMsg({ loadingArray, status, launchContent }): JSX.Element {
+  // we use the evaluated result (string) of parseError and match it to the case so that an appropriate error message will be displayed to the user
   switch (parseError(loadingArray, status)) {
     case 'Content Script Error':
       return (

src/app/components/Loader.tsx

@@ -5,7 +5,14 @@ import { ClipLoader } from 'react-spinners';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 
-// Displays the result of the check when loading is done
+/*
+This file is what decides what icon (loading, checkmark, exclamation point) is displayed next to the checks in the ErrorContainer loading screen:
+
+  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
+*/
+
 const handleResult = (result: boolean): JSX.Element =>
   result ? (
     // if result boolean is true, we display a checkmark icon

src/app/containers/ErrorContainer.tsx

@@ -6,7 +6,7 @@ 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:
+This is the loading screen 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