added pseudocode to App.tsx, MainContainer.tsx, and Store.tsx

Author: EivindDelFierro

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,7 +20,9 @@ const initialState: InitialStateProps = {
 
 function App(): JSX.Element {
   return (
+    // we wrap our application with the <Router> tag so that all components that are nested will have the react-router context
     <Router>
+      {/* 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 */}
       <StoreContext.Provider value={useReducer(mainReducer, initialState)}>
         <MainContainer />
       </StoreContext.Provider>

src/app/containers/MainContainer.tsx

@@ -18,17 +18,27 @@ import {
 import { useStoreContext } from '../store';
 
 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
   const { tabs, currentTab, port } = store;
+  // We create a local state actionView and set it to true
   const [actionView, setActionView] = useState(true);
+
   // this function handles Time Jump sidebar view
   const toggleActionContainer = () => {
+    // sets actionView to the opposite boolean value
     setActionView(!actionView);
+
     // aside is like an added text that appears "on the side" aside some text.
     const toggleElem = document.querySelector('aside');
+    // 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
     if (recordBtn.style.display === 'none') {
       recordBtn.style.display = 'flex';
     } else {
@@ -37,22 +47,35 @@ function MainContainer(): JSX.Element {
   };
   // let port;
   useEffect(() => {
-    // only open port once
+    // only open port once so if it exists, do not run useEffect again
     if (port) return;
 
-    // open long-lived connection with background script
+    // 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
     const currentPort = chrome.runtime.connect();
+
     // listen for a message containing snapshots from the background script
     currentPort.onMessage.addListener(
       // parameter message is an object with following type script properties
-      (message: { action: string; payload: Record<string, unknown>; sourceTab: number }) => {
+      (message: { 
+        action: string; 
+        payload: Record<string, unknown>; 
+        sourceTab: number 
+      }) => {
+        // we destructure message into action, payload, sourceTab
         const { action, payload, sourceTab } = message;
         let maxTab: number;
+
+        // if the sourceTab doesn't exist or is 0
         if (!sourceTab) {
+          // we create a tabsArray of strings composed of keys from our payload object
           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
           maxTab = Math.max(...numTabsArray);
         }
+
         switch (action) {
           case 'deleteTab': {
             dispatch(deleteTab(payload));
@@ -82,17 +105,22 @@ function MainContainer(): JSX.Element {
           }
           default:
         }
+
+        // we return true so that the connection stays open, otherwise the message channel will close
         return true;
       },
     );
 
+    // Below is used to track bugs in case the above connection closes. Remember that it should persist throughout the application lifecycle
     currentPort.onDisconnect.addListener(() => {
       console.log('this port is disconnecting line 79');
       // disconnecting
     });
 
     // assign port to state so it could be used by other components
     dispatch(setPort(currentPort));
+
+    // NOTE: There is no dependency array declared here.
   });
 
   // Error Page launch IF(Content script not launched OR RDT not installed OR Target not React app)
@@ -108,6 +136,7 @@ function MainContainer(): JSX.Element {
     tabs[currentTab];
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
+
   // cleaning hierarchy and snapshotView from stateless data
   const statelessCleaning = (obj: {
     name?: string;

src/app/store.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useContext } from 'react';
 
+// we create a context object and assign it to StoreContext
 export const StoreContext = React.createContext();
 
+// the useStoreContext function allows us to use use the above declared StoreContext.
 export const useStoreContext = () => useContext(StoreContext);