Merge branch 'dev' into additionalMui

Author: KyEBell

src/app/FrontendTypes.ts

@@ -33,8 +33,8 @@ export interface TreeProps {
     stateSnaphot?: object;
     children?: any[];
   };
-  snapshots?:[];
-  currLocation?:object;
+  snapshots?: [];
+  currLocation?: object;
 }
 
 export interface BarStackProp {
@@ -159,7 +159,7 @@ export interface ActionProps {
   last: boolean;
   index: number;
   sliderIndex: number;
-  dispatch: (a: { type: string; payload: unknown; }) => void;
+  dispatch: (a: { type: string; payload: unknown }) => void;
   displayName: string;
   componentName: string;
   componentData: { actualDuration: number } | undefined;
@@ -249,7 +249,7 @@ export interface LinkControlProps {
   setStepPercent: (percent: number) => void;
   setSelectedNode: (selectedNode: string) => void;
   snapShots: Record<string, unknown>;
-};
+}
 
 export interface ControlStyles {
   fontSize: string;
@@ -270,7 +270,7 @@ export interface DropDownStyle {
 
 export interface Node {
   children?: Node[];
-  name?: string
+  name?: string;
   // other properties here
 }
 
@@ -286,7 +286,7 @@ export interface LinkTypesProps {
   margin?: { top: number; right: number; bottom: number; left: number };
   snapshots: Record<string, unknown>;
   currentSnapshot?: Record<string, unknown>;
-};
+}
 
 export interface ToolTipStyles {
   defaultStyles: React.CSSProperties;
@@ -307,12 +307,12 @@ export interface OptionsCursorTrueWithMargin {
   shiftY: number;
 }
 
-export interface StatelessCleanning {
+export interface StatelessCleaning {
   name?: string;
   componentData?: Record<string, unknown>;
   state?: string | {};
   stateSnaphot?: Record<string, unknown>;
-  children?: StatelessCleanning[];
+  children?: StatelessCleaning[];
 }
 
 export interface Snapshots {
@@ -321,4 +321,4 @@ export interface Snapshots {
   component2: number;
   component3: number;
   'all others': number;
-}
+}

src/app/components/Action.tsx

@@ -7,6 +7,10 @@ import ReactHover, { Trigger, Hover } from 'react-hover';
 import { changeView, changeSlider } from '../actions/actions';
 import { ActionProps, OptionsCursorTrueWithMargin } from '../FrontendTypes';
 
+/*
+  This render's the individual snapshot components on the left side column
+*/
+
 /**
  * @function Action
  * @param selected : The selected action in the array of state changes
@@ -21,9 +25,9 @@ import { ActionProps, OptionsCursorTrueWithMargin } from '../FrontendTypes';
  * @method handleOnkeyDown Executes key commands
  *
  */
-// index and delta props were removed from Action.jsx  */
-// viewIndex and handleonkeyDown added to props
+
 const Action = (props: ActionProps): JSX.Element => {
+  // We destructure the 'props' that were passed into this component
   const {
     selected,
     last,
@@ -41,34 +45,61 @@ const Action = (props: ActionProps): JSX.Element => {
    * @function cleanTime: Displays render times for state changes
    * @returns render display time in seconds in milliseconds
    */
-    const cleanTime = (): string => {
+
+
+  const cleanTime = (): string => {
+    // if there is no 'componentData' or 'componentData.actualDuration' return "NO TIME"
     if (!componentData || !componentData.actualDuration) {
       return 'NO TIME';
     }
+
+    // seconds is undefined but can take a number or a string
     let seconds: number | string;
+    // milliseconds is of any type and taken from the 'componentData.actualDuration'
     let milliseconds: any = componentData.actualDuration;
+
+    // if the milliseconds is greater than 60
     if (Math.floor(componentData.actualDuration) > 60) {
+      // we divide our milliseconds by 60 to determine our seconds
       seconds = Math.floor(componentData.actualDuration / 60);
+      // and we convert our seconds into a string
       seconds = JSON.stringify(seconds);
+      // if the seconds string is only a single digit
       if (seconds.length < 2) {
+        // we can add a 0 in front of it so that if 'seconds = "1"' it will come out as 'seconds = "01"'
         seconds = '0'.concat(seconds);
       }
+      // Our true milliseconds then becomes the remainder of dividing our initial milliseconds by 60
       milliseconds = Math.floor(componentData.actualDuration % 60);
     } else {
+      // if we haven't even reached one second yet, our seconds are 00
       seconds = '00';
     }
+
+    // we convert our milliseconds string into a floating point number that has up to two decimal places.
     milliseconds = Number.parseFloat(milliseconds as string).toFixed(2);
+
+    // we split our milliseconds using the decimal and come out with an array of two numbers
     const arrayMilliseconds: string | number = milliseconds.split('.');
+
+    // if our millisecond string only has one digit
     if (arrayMilliseconds[0].length < 2) {
+      // we add a 0 in front of it so that in the a sample number of '1' becomes '01'
       arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]);
     }
+    // if this is the initial snapshot
     if (index === 0) {
+      // we give it a timestamp
       return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
     }
+    // if these are succeeding snapshots, we add a '+' to the timestamp
     return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
   };
+
+  // we run cleanTime on the creation of this component so that we can get the timestamp
   const displayTime: string = cleanTime();
 
+  // creates an options object that 'ReactHover' component will use to modify it's behaviour
   const optionsCursorTrueWithMargin: OptionsCursorTrueWithMargin = {
     followCursor: true,
     shiftX: 20,

src/app/components/App.tsx

@@ -9,6 +9,7 @@ import { InitialStateProps } from '../FrontendTypes';
 // currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
 // This is used to determine the proper tutorial to render when How To button is pressed.
 
+// we initialize what our initialState is here
 const initialState: InitialStateProps = {
   port: null,
   currentTab: null,
@@ -19,8 +20,8 @@ const initialState: InitialStateProps = {
 
 function App(): JSX.Element {
   return (
-    <Router>
-      <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
+    <Router> {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
+      <StoreContext.Provider value={useReducer(mainReducer, initialState)}> {/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
         <MainContainer />
       </StoreContext.Provider>
     </Router>

src/app/components/Diff.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { diff, formatters } from 'jsondiffpatch';
 import ReactHtmlParser from 'react-html-parser';
 import { useStoreContext } from '../store';
-import { DiffProps, StatelessCleanning } from '../FrontendTypes';
+import { DiffProps, StatelessCleaning } from '../FrontendTypes';
 
 /**
  * Displays tree showing specific two versions of tree
@@ -26,7 +26,7 @@ function Diff(props: DiffProps): JSX.Element {
   }
 
   // cleaning preview from stateless data
-  const statelessCleanning = (obj: StatelessCleanning) => {
+  const statelessCleaning = (obj: StatelessCleaning) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;
@@ -38,15 +38,15 @@ function Diff(props: DiffProps): JSX.Element {
       delete newObj.state;
     }
     if (newObj.stateSnaphot) {
-      newObj.stateSnaphot = statelessCleanning(obj.stateSnaphot);
+      newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot);
     }
     if (newObj.children) {
       newObj.children = [];
       if (obj.children.length > 0) {
         obj.children.forEach(
           (element: { state?: Record<string, unknown> | string; children?: [] }) => {
             if (element.state !== 'stateless' || element.children.length > 0) {
-              const clean = statelessCleanning(element);
+              const clean = statelessCleaning(element);
               newObj.children.push(clean);
             }
           },
@@ -57,20 +57,21 @@ function Diff(props: DiffProps): JSX.Element {
   };
 
   // displays stateful data
-  const previousDisplay: StatelessCleanning = statelessCleanning(previous);
+  const previousDisplay: StatelessCleaning = statelessCleaning(previous);
   // diff function returns a comparison of two objects, one has an updated change
   // just displays stateful data
-  const delta: StatelessCleanning = diff(previousDisplay, snapshot);
+  const delta: StatelessCleaning = diff(previousDisplay, snapshot);
   // returns html in string
   // just displays stateful data
-  const html: StatelessCleanning = formatters.html.format(delta, previousDisplay);
+  const html: StatelessCleaning = formatters.html.format(delta, previousDisplay);
   if (show) formatters.html.showUnchanged();
   else formatters.html.hideUnchanged();
   if (previous === undefined || delta === undefined) {
     return (
       <div className='no-data-message'>
         {' '}
-        Make state changes and click on a Snapshot to see the difference between that snapshot and the previous one.{' '}
+        Make state changes and click on a Snapshot to see the difference between that snapshot and
+        the previous one.{' '}
       </div>
     );
   }

src/app/components/Dropdown.tsx

@@ -2,15 +2,20 @@ import React from 'react';
 import Select from 'react-select';
 import { DropdownProps } from '../FrontendTypes'
 
+/*
+  Allows the user to change the speed of the time-travel based on the selected dropdown value
+  Component is created in the TravelContainer.tsx
+*/
+
 const Dropdown = (props: DropdownProps): JSX.Element => {
   const { speeds, setSpeed, selectedSpeed } = props;
   return (
     <Select
       className='react-select-container'
       classNamePrefix='react-select'
-      value={selectedSpeed}
-      onChange={setSpeed}
-      options={speeds}
+      value={selectedSpeed} // the text displayed will be based on the currently selected speed
+      onChange={setSpeed} // allows the speed to change upon selection
+      options={speeds} // custom speed options that are visible to the user
       menuPlacement='top'
     />
   );

src/app/components/ErrorMsg.tsx

@@ -1,23 +1,33 @@
 /* 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;
   });
-  // As long as everything is still loading dont diplay an error message
-  if (stillLoading) return 'default';
-  // Return first status that fails
+
+  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 }): JSX.Element {
-  switch (parseError(loadingArray, status)) {
+  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>

src/app/components/Loader.tsx

@@ -5,21 +5,28 @@ 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 ? (
-    <FontAwesomeIcon icon={faCheck} className='check' size='lg' />
+    <FontAwesomeIcon icon={faCheck} className='check' size='lg' /> // if result boolean is true, we display a checkmark icon
   ) : (
-    <FontAwesomeIcon icon={faExclamationCircle} className='fail' size='lg' />
+    <FontAwesomeIcon icon={faExclamationCircle} className='fail' size='lg' /> // if the result boolean is false, we display a fail icon
   );
 
-// Returns the Loader component
 // 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} />
+    <ClipLoader color='#123abc' size={30} loading={loading} /> // if the loadingArray value is true, we display a loading icon
   ) : (
-    handleResult(result)
+    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;