cleaned up a few pseudocoded files. Finished pseudocoding Action, RouteDescription, SwitchApp, ActionContainer, and ErrorContainer

Author: EivindDelFierro

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/RouteDescription.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 
+/*
+  Render's the red route description on app's left sided column between the clear button and the list of state snapshots. The route description is derived from the first state snapshot.
+*/
+
 type RouteProps = {
   actions: JSX.Element[];
 };
 
 const RouteDescription = (props: RouteProps): JSX.Element => {
-  // Use new URL to use the url.pathname method.
   const { actions } = props;
+  // Use new URL to use the url.pathname method.
   const url: URL = new URL(actions[0].props.routePath);
   return (
     <div className='routedescription'>

src/app/components/SwitchApp.tsx

@@ -3,24 +3,37 @@ import Select from 'react-select';
 import { useStoreContext } from '../store';
 import { setTab } from '../actions/actions';
 
+/*
+  This is the dropdown menu on the left column above the 'clear' button and the state snapshots list. It allows us to switch between which website/application we are currently working on.
+
+  Currently, it doesn't seem to be fully implemented since switching applications doesn't change to snapshots that are relevant into the newly selected application
+*/
+
 const SwitchAppDropdown = (): JSX.Element => {
+  // we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
-
+  // tabsArray is an empty array that will take objects as it's elements
   const tabsArray: {}[] = [];
+
+  // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.
   Object.keys(tabs).forEach((tab) => {
     tabsArray.unshift({ value: tab, label: tabs[tab].title });
   });
 
+  // we create a 'currTab' object and populate it's values from the 'currentTab' that was destructured from our context object
   const currTab: {} = {
     value: currentTab,
     label: tabs[currentTab].title,
   };
 
   const customStyles: {} = {
+    // we define a menu method that takes in two parameters
     menu: (provided, state):{} => {
+      // why does this ternary even matter if the end result is the same?
       const outline: string = state.isSelected ? 'transparent' : 'transparent';
       const margin: number = 0;
 
+      // we return an object that adds the ouline and margin to the provided object
       return { ...provided, outline, margin };
     },
   };

src/app/containers/ActionContainer.tsx

@@ -10,6 +10,9 @@ import { useStoreContext } from '../store';
 import RouteDescription from '../components/RouteDescription';
 import { Obj } from '../FrontendTypes';
 
+/*
+  This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
+*/
 
 // resetSlider locates the rc-slider elements on the document and resets it's style attributes
 const resetSlider = () => {
@@ -40,18 +43,36 @@ function ActionContainer(props): JSX.Element {
   // we create an array 'hierarchyArr' that will hold objects and numbers
   const hierarchyArr: (number | {})[] = [];
 
-  // function to traverse state from hierarchy and also getting information on display name and component name
+  /* 
+
+  function to traverse state from hierarchy and also getting information on display name and component name
+  
+  the obj parameter is an object with the following structure:
+    {
+      stateSnapshot: {
+        route: any;
+        children: any[];
+      };
+    name: number;
+    branch: number;
+    index: number;
+    children?: [];
+    }
+
+  */
+
   const displayArray = (obj: Obj): void => {
     if (
-      // if the stateSnapshot has a non-empty children array
+      // if the 'stateSnapshot' has a non-empty 'children' array
       obj.stateSnapshot.children.length > 0 &&
       // and there is an element
       obj.stateSnapshot.children[0] &&
-      // with a state
+      // with a 'state'
       obj.stateSnapshot.children[0].state &&
-      // and a name
+      // and a 'name'
       obj.stateSnapshot.children[0].name
     ) {
+      // we create a new Record object (whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type) and populate it's properties with relevant values from our argument 'obj'.
       const newObj: Record<string, unknown> = {
         index: obj.index,
         displayName: `${obj.name}.${obj.branch}`,
@@ -63,20 +84,23 @@ function ActionContainer(props): JSX.Element {
             ? ''
             : obj.stateSnapshot.children[0].componentData,
       };
+      // we push our record object into 'hiearchyArr' defined on line 41
       hierarchyArr.push(newObj);
     }
+    // if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
     if (obj.children) {
       obj.children.forEach((element): void => {
         displayArray(element);
       });
     }
   };
+
   // the hierarchy gets set on the first click in the page
   // when page in refreshed we may not have a hierarchy so we need to check if hierarchy was initialized
   // if true invoke displayArray to display the hierarchy
   if (hierarchy) displayArray(hierarchy);
 
-  // handles keyboard presses, function passes an event and index of each action-component
+  // This function allows us to use our arrow keys to jump between snapshots. It passes an event and the index of each action-component. Using the arrow keys allows us to highligh snapshots and the enter key jumps to the selected snapshot
   function handleOnKeyDown(e: KeyboardEvent, i: number): void {
     let currIndex = i;
     // up arrow key pressed
@@ -93,15 +117,16 @@ function ActionContainer(props): JSX.Element {
     }
     // enter key pressed
     else if (e.key === 'Enter') {
-      e.stopPropagation();
+      e.stopPropagation(); // prevents further propagation of the current event in the capturing and bubbling phases
       e.preventDefault(); // needed or will trigger onClick right after
       dispatch(changeSlider(currIndex));
     }
   }
-  // Sort by index.
 
+  // Sort hierarchyArr by index property of each object. This will be useful when later when we build our components so that our components will be displayed in index/chronological order
   hierarchyArr.sort((a:Obj, b:Obj):number => a.index - b.index);
 
+  // we create a map of components that are constructed from "hierarchyArr's" elements/snapshots
   actionsArr = hierarchyArr.map(
     (snapshot: {
       routePath: any;
@@ -111,9 +136,18 @@ function ActionContainer(props): JSX.Element {
       componentName: string;
       componentData: { actualDuration: number } | undefined;
     }) => {
+      // destructure index from snapshot
       const { index } = snapshot;
+      // boolean on whether the current index is the same as the viewIndex
       const selected = index === viewIndex;
+      // boolean on whether the view index is less than 0 and if the index is the same as the last snapshot's index value in hierarchyArr
       const last = viewIndex === -1 && index === hierarchyArr.length - 1;
+      /*
+      ====================================================
+      // boolean 
+      // Not sure what currLocation is at this time
+      ====================================================
+      */
       const isCurrIndex = index === currLocation.index;
       return (
         <Action
@@ -137,6 +171,7 @@ function ActionContainer(props): JSX.Element {
   );
   useEffect(() => {
     setActionView(true);
+    // !!!! Why is the dependency array the function being called within the useEffect? !!!!
   }, [setActionView]);
 
   // Function sends message to background.js which sends message to the content script
@@ -155,7 +190,9 @@ function ActionContainer(props): JSX.Element {
   };
 
   const routes: {} = {};
+  // iterate through our actionsArr
   for (let i = 0; i < actionsArr.length; i += 1) {
+    // if 'routes' doesn't have a property key that is the same as the current component at index[i] routePath we create an array with the first element being the component at index [i]. If it does exist, we push the component at index [i] to the apporpriate routes[routePath]
     if (!routes.hasOwnProperty(actionsArr[i].props.routePath)) {
       routes[actionsArr[i].props.routePath] = [actionsArr[i]];
     } else {

src/app/containers/ErrorContainer.tsx

@@ -64,14 +64,15 @@ function ErrorContainer(): JSX.Element {
       setLoadingArray(1, true);
       setLoadingArray(2, true);
 
+      // if there is a current timeout set, we clear it
       if (timeout.current) {
         clearTimeout(timeout.current);
         timeout.current = null;
       }
     }
 
+    // We check our status object and see if contentScriptLaunched is false
     // 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) {

src/app/containers/MainContainer.tsx

@@ -17,12 +17,16 @@ import {
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 
+/*
+  This is the main container where everything in our application is rendered
+*/
+
 function MainContainer(): 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
+  // we continue to destructure 'store' and get the tabs/currentTab/port
   const { tabs, currentTab, port } = store;
-  // We create a local state actionView and set it to true
+  // We create a local state 'actionView' and set it to true
   const [actionView, setActionView] = useState(true);
 
   // this function handles Time Jump sidebar view
@@ -35,10 +39,8 @@ function MainContainer(): JSX.Element {
     // toggles the addition or the removal of the 'no-aside' class
     toggleElem.classList.toggle('no-aside');
 
-    // hides the record toggle button from Actions Container in Time Jump sidebar view
     const recordBtn = document.getElementById('recordBtn');
-
-    // switches whether to display the button by changing the display property between none and flex
+    // switches whether to display the record toggle button by changing the display property between none and flex
     if (recordBtn.style.display === 'none') {
       recordBtn.style.display = 'flex';
     } else {
@@ -51,7 +53,7 @@ function MainContainer(): JSX.Element {
     if (port) return;
 
     // chrome.runtime allows our application to retrieve our service worker (our eventual bundles/background.bundle.js after running npm run build), details about the manifest, and allows us to listen and respond to events in our application lifecycle.
-    // we connect our listeners to our service worker
+    // we connect to our service worker
     const currentPort = chrome.runtime.connect();
 
     // listen for a message containing snapshots from the background script
@@ -72,7 +74,7 @@ function MainContainer(): JSX.Element {
           const tabsArray: Array<string> = Object.keys(payload);
           // we then map out our tabsArray where we convert each string into a number
           const numTabsArray: number[] = tabsArray.map((tab) => Number(tab));
-          // we then get the number of tabs we have
+          // we then get the largest tab number value
           maxTab = Math.max(...numTabsArray);
         }
 
@@ -120,7 +122,7 @@ function MainContainer(): JSX.Element {
     // assign port to state so it could be used by other components
     dispatch(setPort(currentPort));
 
-    // NOTE: There is no dependency array declared here.
+    // !!!!! NOTE: There is no dependency array declared here. This may result in an infinite loop. Needs more investigation !!!!!
   });
 
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)

src/app/store.tsx

@@ -5,4 +5,4 @@ import React, { useContext } from 'react';
 export const StoreContext = React.createContext();
 
 // the useStoreContext function allows us to use use the above declared StoreContext.
-export const useStoreContext = () => useContext(StoreContext);
+export const useStoreContext = () => useContext(StoreContext);

src/backend/index.ts

@@ -3,9 +3,11 @@
  * @function linkFiber
  */
 // --------------------------START OF IMPORT------------------------------------
-// regenerator runtime supports async functionality
+// regenerator runtime supports async functionality : This package implements a fully-functional source transformation that takes the syntax for generators/yield from ECMAScript 2015 or ES2015 and Asynchronous Iteration proposal and spits out efficient JS-of-today (ES5) that behaves the same way.
 import 'regenerator-runtime/runtime';
+// linkFiberInitialization (actually uses the function linkFiber but is labeled here as linkFiberInitialization, returns a function). When this returned function is invoked, it checks if devTools is installed, checks if the website is a reactApp, adds event listeners for timetravel, and allows us to obtain the initial FiberRoot Node from react dev tool
 import linkFiberInitialization from './routers/linkFiber';
+// timeJumpInitialization (actually uses the function timeJumpInitiation but is labeled here as linkFiberInitialization, returns a function) returns a function that sets jumping to false and handles timetravel feature
 import timeJumpInitialization from './controllers/timeJump';
 import { Snapshot, Status, MsgData } from './types/backendTypes';
 import routes from './models/routes';