Feature/garrett

package.json

@@ -56,6 +56,7 @@
     "Cole Styron",
     "Daljit Gill",
     "Dane Corpion",
+    "Daniel Ryczek",
     "David Bernstein",
     "David Chai",
     "David Kim",
@@ -64,10 +65,12 @@
     "Edar Liu",
     "Edwin Menendez",
     "Eivind Del Fierro",
+    "Ellie Simens",
     "Ergi Shehu",
     "Eric Yun",
     "Freya Wu",
     "Gabriela Jardim Aquino",
+    "Garrett Chow",
     "Gregory Panciera",
     "Haejin Jo",
     "Harry Fox",
@@ -104,9 +107,11 @@
     "Nathan Richardson",
     "Ngoc Zwolinski",
     "Nick Huemmer",
+    "Patrice Pinardo",
     "Peter Lam",
     "Prasanna Malla",
     "Quan Le",
+    "Ragad Mohammed",
     "Rajeeb Banstola",
     "Raymond Kwan",
     "Robby Tipton",

src/app/components/ErrorHandling/ErrorHandler.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+class ErrorHandler extends React.Component {
+  constructor(props: unknown) {
+    super(props);
+    this.state = { errorOccurred: false };
+  }
+
+  componentDidCatch(): void {
+    this.setState({ errorOccurred: true });
+  }
+
+  render(): JSX.Element {
+    const { errorOccurred } = this.state;
+    // eslint-disable-next-line react/prop-types
+    const { children } = this.props;
+    return errorOccurred ? <div>Unexpected Error</div> : children;
+  }
+}
+
+export default ErrorHandler;

src/app/components/ErrorHandling/ErrorMsg.tsx

@@ -0,0 +1,92 @@
+/* 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;
+  loadingArray.forEach((e) => {
+    if (e === false) stillLoading = false;
+  });
+
+  if (stillLoading) return 'default'; // As long as everything is still loading dont diplay an error message
+
+  // 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, reinitialize }): JSX.Element {
+  switch (
+    parseError(loadingArray, status) // parseError returns a string based on the loadingArray and status. The returned string is matched to a case so that an appropriate error message will be displayed to the user
+  ) {
+    case 'Content Script Error':
+      return (
+        <div>
+          Target App not yet found...
+          <br />
+          If you encounter this error on the initial launch of Reactime, try refreshing the webpage
+          you are developing.
+          <br />
+          <br />
+          If Reactime is running as an iframe in your developer tools, right click on the Reactime
+          application and click 'Reload Frame'
+          <br />
+          <br />
+          NOTE: By default Reactime only launches the content script on URLS starting with
+          localhost.
+          <br />
+          If your target URL does not match, you can manually launch the content script below.
+          <br />
+          <br />
+          <button type='button' className='launchContentButton' onClick={launchContent}>
+            {' '}
+            Launch{' '}
+          </button>
+        </div>
+      );
+    case 'RDT Error':
+      return (
+        <div>
+          React Dev Tools is not installed!
+          <br />
+          <br />
+          If you encounter this error on the initial launch of Reactime, refresh the webpage you are
+          developing.
+          <br />
+          If Reactime is running as an iframe in your developer tools, right click on the Reactime
+          application and click 'Reload Frame'
+          <br />
+          <br />
+          <a
+            href='https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            NOTE: The React Developer Tools extension is required for Reactime to run, if you do not
+            already have it installed on your browser.
+          </a>
+        </div>
+      );
+    case 'Not React App':
+      return (
+        <div>
+          The Target app is either not a React application or is not compatible with Reactime.
+        </div>
+      );
+    default:
+      return null;
+  }
+}
+
+export default ErrorMsg;

src/app/components/ErrorHandling/Loader.tsx

@@ -0,0 +1,32 @@
+// /* eslint-disable react/prop-types */
+
+import React from 'react';
+import { ClipLoader } from 'react-spinners';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+
+/*
+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 ? (
+    <CheckCircleOutlineIcon className='check' /> // if result boolean is true, we display a checkmark icon
+  ) : (
+    <ErrorOutlineIcon className='fail' /> // if the result boolean is false, we display a fail icon
+  );
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+// Returns the 'Loader' component
+const Loader = ({ loading, result }): JSX.Element =>
+  loading ? (
+    <ClipLoader color='#123abc' size={30} loading={loading} /> // if the loadingArray value is true, we display a loading icon
+  ) : (
+    handleResult(result) // 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
+  );
+
+export default Loader;

src/app/containers/ErrorContainer.tsx

@@ -1,24 +1,112 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+/* eslint-disable max-len */
+import React, { useState, useEffect, useRef } from 'react';
 import { launchContentScript } from '../slices/mainSlice';
+import Loader from '../components/ErrorHandling/Loader';
+import ErrorMsg from '../components/ErrorHandling/ErrorMsg';
+import { useDispatch, useSelector } from 'react-redux';
 import { MainState, RootState, ErrorContainerProps } from '../FrontendTypes';
+import { current } from '@reduxjs/toolkit';
 import { RefreshCw, Github, PlayCircle } from 'lucide-react';
 
+/*
+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
+  3. if target tab contains a compatible React app
+*/
+
 function ErrorContainer(props: ErrorContainerProps): JSX.Element {
   const dispatch = useDispatch();
   const { tabs, currentTitle, currentTab }: MainState = useSelector(
     (state: RootState) => state.main,
   );
+  const [loadingArray, setLoading] = useState([true, true, true]); // 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. '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 titleTracker = useRef(currentTitle); // 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 timeout = useRef(null);
+  const { port } = props;
 
-  // function that launches the main app and refreshes the page
+  // function that launches the main app
   function launch(): void {
     dispatch(launchContentScript(tabs[currentTab]));
-    // Allow the dispatch to complete before refreshing
-    setTimeout(() => {
-      chrome.tabs.reload(currentTab);
-    }, 100);
   }
 
+  function reinitialize(): void {
+    port.postMessage({
+      action: 'reinitialize',
+      tabId: currentTab,
+    });
+  }
+
+  let status = {
+    // We create a status object that we may use later if tabs[currentTab] exists
+    contentScriptLaunched: false,
+    reactDevToolsInstalled: false,
+    targetPageisaReactApp: false,
+  };
+
+  if (tabs[currentTab]) {
+    // If we do have a tabs[currentTab] object, we replace the status obj we declared above  with the properties of the tabs[currentTab].status
+    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
+    function setLoadingArray(i: number, value: boolean) {
+      // 'setLoadingArray' checks an element in our 'loadingArray' local state and compares it with passed in boolean argument. If they don't match, we update our local state replacing the selected element with the boolean argument
+      if (loadingArray[i] !== value) {
+        // this conditional helps us avoid unecessary state changes if the element and the value are already the same
+        const loadingArrayClone = [...loadingArray];
+        loadingArrayClone[i] = value;
+        setLoading(loadingArrayClone);
+      }
+    }
+
+    if (titleTracker.current !== currentTitle) {
+      // if the current tab changes/reloads, we reset loadingArray to it's default [true, true, true]
+      titleTracker.current = currentTitle;
+      setLoadingArray(0, true);
+      setLoadingArray(1, true);
+      setLoadingArray(2, true);
+
+      if (timeout.current) {
+        // if there is a current timeout set, we clear it
+        clearTimeout(timeout.current);
+        timeout.current = null;
+      }
+    }
+
+    if (!status.contentScriptLaunched) {
+      // if content script hasnt been launched/found, set a timer or immediately update 'loadingArray' state
+
+      if (loadingArray[0] === true) {
+        // if loadingArray[0] is 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 3 seconds
+        timeout.current = setTimeout(() => {
+          setLoadingArray(0, false);
+        }, 3000); // increased from 1500
+      }
+    } else {
+      setLoadingArray(0, false); // if status.contentScriptLaunched is true, that means timeout.current !== null. This means that useEffect was triggered previously.
+    }
+
+    // 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) {
+      timeout.current = setTimeout(() => {
+        setLoadingArray(1, false);
+      }, 3000); // increased from 1500
+      setLoadingArray(1, false);
+    }
+    if (loadingArray[1] === false && status.reactDevToolsInstalled === true) {
+      setLoadingArray(2, false);
+    }
+
+    // Unload async function when Error Container is unmounted
+    return () => {
+      clearTimeout(timeout.current);
+    };
+  }, [status, currentTitle, timeout, loadingArray]); // 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
+
   return (
     <div className='error-container'>
       <img src='../assets/whiteBlackSquareLogo.png' alt='Reactime Logo' className='error-logo' />
@@ -30,10 +118,21 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
             Welcome to Reactime
           </div>
 
+          <div className='loaderChecks'>
+            <p>Checking if content script has been launched on current tab</p>
+            <Loader loading={loadingArray[0]} result={status.contentScriptLaunched} />
+
+            <p>Checking if React Dev Tools has been installed</p>
+            <Loader loading={loadingArray[1]} result={status.reactDevToolsInstalled} />
+
+            <p>Checking if target is a compatible React app</p>
+            <Loader loading={loadingArray[2]} result={status.targetPageisaReactApp} />
+          </div>
+
           <p className='error-description'>
-            To ensure Reactime works correctly with your React application, please either refresh
-            your development page or click the launch button below. This allows Reactime to properly
-            connect with your app and start monitoring state changes.
+            To ensure Reactime works correctly with your React application, please refresh your
+            development page. This allows Reactime to properly connect with your app and start
+            monitoring state changes.
           </p>
           <p className='error-description'>
             Important: Reactime requires React Developer Tools to be installed. If you haven't
@@ -55,11 +154,6 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
           starting with localhost.
         </p>
 
-        <button type='button' className='launch-button' onClick={launch}>
-          <PlayCircle size={20} />
-          Launch Reactime
-        </button>
-
         <a
           href='https://github.com/open-source-labs/reactime'
           target='_blank'

src/app/styles/layout/_errorContainer.scss

@@ -42,6 +42,20 @@
   margin-bottom: 1rem;
 }
 
+.loaderChecks {
+  margin: 1.5rem 0;
+}
+
+.loaderChecks p {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .error-note {
   text-align: center;
   color: var(--text-tertiary);

src/extension/build/manifest.json

@@ -14,7 +14,7 @@
   },
   "content_scripts": [
     {
-      "matches": ["http://localhost/*", "<all_urls>"],
+      "matches": ["http://localhost/*"],
       "js": ["bundles/content.bundle.js"]
     }
   ],