cleaning up some pseudocode formatting

Author: EivindDelFierro

src/app/components/App.tsx

@@ -6,13 +6,14 @@ import mainReducer from '../reducers/mainReducer.js';
 import { InitialStateProps } from '../FrontendTypes';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from './theme';
-// currentTab is the current active tab within Google Chrome.
-// This is used to decide what tab Reactime should be monitoring. This can be "locked"
-// 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 = {
+/*
+  'currentTab' is the current active tab within Google Chrome.
+  This is used to decide what tab Reactime should be monitoring. This can be "locked" 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.
+*/
+
+const initialState: InitialStateProps = { // we initialize what our initialState is here
   port: null,
   currentTab: null,
   currentTitle: 'No Target',

src/app/components/RouteDescription.tsx

@@ -10,8 +10,8 @@ type RouteProps = {
 
 const RouteDescription = (props: RouteProps): JSX.Element => {
   const { actions } = props;
-  // Use new URL to use the url.pathname method.
-  const url: URL = new URL(actions[0].props.routePath);
+  
+  const url: URL = new URL(actions[0].props.routePath); // Use new URL to use the url.pathname method.
   return (
     <div className='routedescription'>
       <h3 className='route'>Route: {url.pathname}</h3>

src/app/components/SwitchApp.tsx

@@ -10,31 +10,25 @@ import { setTab } from '../actions/actions';
 */
 
 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: {}[] = [];
+  const [{ currentTab, tabs }, 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 tabsArray: {}[] = []; // tabsArray is an empty array that will take objects as it's elements
 
-  // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.
-  Object.keys(tabs).forEach((tab) => {
+  Object.keys(tabs).forEach((tab) => { // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.
     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: {} = {
+  const currTab: {} = {   // we create a 'currTab' object and populate it's values from the 'currentTab' that was destructured from our context object
     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';
+    menu: (provided, state):{} => { // we define a menu method that takes in two parameters
+      const outline: string = state.isSelected ? 'transparent' : 'transparent'; // why does this ternary even matter if the end result is the same?
       const margin: number = 0;
 
-      // we return an object that adds the ouline and margin to the provided object
-      return { ...provided, outline, margin };
+      return { ...provided, outline, margin }; // we return an object that adds the ouline and margin to the provided object
     },
   };
 

src/app/components/Tutorial.tsx

@@ -7,13 +7,15 @@ import { Component } from 'react';
 import 'intro.js/introjs.css';
 import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
 import { TutorialProps, TutorialState, StepsObj } from '../FrontendTypes';
-//Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly.
 import { Button } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-const { Steps } = require('intro.js-react');
+const { Steps } = require('intro.js-react'); //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly.
+
+/*
+  This is the tutorial displayed when the "How to use" button is clicked
+  This needs to be a class component to be compatible with updateStepElement from intro.js
+*/
 
-// This is the tutorial displayed when the "How to use" button is clicked
-// This needs to be a class component to be compatible with updateStepElement from intro.js
 export default class Tutorial extends Component<TutorialProps, TutorialState> {
   constructor(props: TutorialProps) {
     super(props);

src/app/components/useForceUpdate.ts

@@ -1,7 +1,10 @@
 import { useState } from 'react';
 
-// This function will force a change in state and cause a re-render of the component.
-// The state information is irrelevant but an update is needed to force a re-render
+/*
+  This function will force a change in state and cause a re-render of the component.
+  The state information is irrelevant but an update is needed to force a re-render
+*/
+
 export default function useForceUpdate(): () => number {
   const [, setValue] = useState(0);
   return ():number => setValue((value:number): number => value + 1);