Merge pull request #3 from oslabs-beta/eivindBranch

Eivind branch

Author: KyEBell

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/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;

src/app/components/MainSlider.tsx

@@ -5,50 +5,53 @@ import { changeSlider, pause } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { HandleProps, MainSliderProps } from '../FrontendTypes';
 
-const { Handle } = Slider;
+const { Handle } = Slider; // component constructor of Slider that allows customization of the handle
 
 const handle = (props: HandleProps): JSX.Element => {
   const { value, dragging, index, ...restProps } = props;
 
   return (
-    <Tooltip
+    <Tooltip // Tooltip that pop's up when clicking/dragging the slider thumb/handle that displays the current snapshot index
       prefixCls='rc-slider-tooltip'
-      overlay={value}
-      visible={dragging}
-      placement='top'
+      overlay={value} // the currentIndex
+      visible={dragging} // tooltip only visible when slider thumb is click and/or dragged
+      placement='top' // display the tooltip above the slider thumb
       key={index}
     >
-      <Handle value={value} {...restProps} />
+      <Handle 
+        value={value} // the currentIndex / slider thumb position on the slider
+        {...restProps} 
+      />
     </Tooltip>
   );
 };
 
 
 function MainSlider(props: MainSliderProps): JSX.Element {
-  const { snapshotsLength } = props;
-  const [{ tabs, currentTab }, dispatch] = useStoreContext();
-  const { currLocation } = tabs[currentTab];
-  const [sliderIndex, setSliderIndex] = useState(0);
+  const { snapshotsLength } = props; // destructure props to get our total number of snapshots
+  const [{ tabs, currentTab }, dispatch] = useStoreContext(); // 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 { currLocation } = tabs[currentTab]; // we destructure the currentTab object
+  const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0. 
 
   useEffect(() => {
-    if (currLocation) {
-      setSliderIndex(currLocation.index);
+    if (currLocation) { // if we have a 'currLocation'
+      setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index'
     } else {
-      setSliderIndex(0);
+      setSliderIndex(0); // just set the thumb position to the beginning
     }
-  }, [currLocation]);
+  }, [currLocation]); // if currLocation changes, rerun useEffect
 
   return (
     <Slider
-      min={0}
-      max={snapshotsLength - 1}
-      value={sliderIndex}
-      onChange={(index: any) => {
-        setSliderIndex(index);
+      min={0} // index of our first snapshot
+      max={snapshotsLength - 1} // index of our last snapshot
+      value={sliderIndex} // currently slider thumb position
+      onChange={(index: any) => { // when the slider position changes
+        setSliderIndex(index);  // update the sliderIndex
       }}
-      onAfterChange={() => {
-        dispatch(changeSlider(sliderIndex));
-        dispatch(pause());
+      onAfterChange={() => { // after updating the sliderIndex
+        dispatch(changeSlider(sliderIndex)); // updates currentTab's 'sliderIndex' and replaces our snapshot with the appropriate snapshot[sliderIndex]
+        dispatch(pause()); // pauses playing and sets currentTab object'a intervalId to null
       }}
       handle={handle}
     />

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/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -10,10 +10,6 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeTableau10 } from 'd3-scale-chromatic';
-import { styled } from '@mui/system';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
 
 import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';

src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx

@@ -8,10 +8,6 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
-import { styled } from '@mui/system';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
 
 import { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';

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 };
     },
   };