create component actions record clean up

Author: zacharydfreeman

src/backend/controllers/createComponentActionsRecord.ts

@@ -1,15 +1,10 @@
-// import typescript types
-import {
-  // object with tree structure
-  Fiber,
-} from '../types/backendTypes';
+import { Fiber } from '../types/backendTypes';
 import {
   FunctionComponent,
   ClassComponent,
-  IndeterminateComponent, // Before we know whether it is function or class
+  IndeterminateComponent,
   ContextProvider,
 } from '../types/backendTypes';
-// passes the data down to its components
 import componentActionsRecord from '../models/masterState';
 import { getHooksStateAndUpdateMethod } from './statePropExtractors';
 import {
@@ -20,14 +15,14 @@ import {
 
 // ------------------------CREATE COMPONENT ACTIONS RECORD----------------------
 /**
- * This is a recursive function that runs after Fiber commit, if user navigating to a new route during jumping. This function performs the following logic:
+ * This is a recursive function that runs after Fiber commit, if user is navigating to a new route during jumping. This function performs the following logic:
  * 1. Traverse from FiberRootNode
  * 2. If the component is stateful, extract its update methods & push to the `componentActionRecord` array
  * @param currentFiberNode A Fiber object
  */
 export default function createComponentActionsRecord(currentFiberNode: Fiber): void {
   // ------------------OBTAIN DATA FROM THE CURRENT FIBER NODE----------------
-  // Destructure the current fiber node:
+  // Destructure the current fiber node
   const {
     sibling,
     stateNode,
@@ -46,28 +41,13 @@ export default function createComponentActionsRecord(currentFiberNode: Fiber): v
     elementType?.name ||
     'nameless';
 
-  //   console.log('createComponentActionsRecord', {
-  //     currentFiberNode,
-  //     // tag,
-  //     // elementType,
-  //     componentName:
-  //       elementType?._context?.displayName || //For ContextProvider
-  //       elementType?._result?.name || //For lazy Component
-  //       elementType?.render?.name ||
-  //       elementType?.name ||
-  //       elementType,
-  //     // memoizedState,
-  //     // stateNode,
-  //     // _debugHookTypes,
-  //   });
-
   // --------------------FILTER COMPONENTS/FIBER NODE-------------------------
   /**
    * For the snapshot tree,
-   * 1. We will only interested in components that are one of these types: Function Component, Class Component, Indeterminate Component or Context Provider.
+   * 1. We are only interested in components that are one of these types: Function Component, Class Component, Indeterminate Component or Context Provider.
    * NOTE: this list of components may change depending on future use
-   * 2. If user use Next JS, filter out default NextJS components
-   * 3. If user use Remix JS, filter out default Remix components
+   * 2. If user is using Next JS, filter out default NextJS components
+   * 3. If user is using Remix JS, filter out default Remix components
    */
 
   if (
@@ -90,20 +70,15 @@ export default function createComponentActionsRecord(currentFiberNode: Fiber): v
   // ---------OBTAIN STATE & SET STATE METHODS FROM CLASS COMPONENT-----------
   // Check if node is a stateful class component when user use setState.
   // If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state
-  // Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data.
   if ((tag === ClassComponent || tag === IndeterminateComponent) && stateNode?.state) {
     // Save component setState() method to our componentActionsRecord for use during timeJump
     componentActionsRecord.saveNew(stateNode);
   }
-
   // --------OBTAIN STATE & DISPATCH METHODS FROM FUNCTIONAL COMPONENT--------
   // Check if node is a stateful class component when user use setState.
   // If user use useState to define/manage state, the state object will be stored in memoizedState.queue => grab the state object stored in the memoizedState.queue
   if (
-    (tag === FunctionComponent ||
-      tag === IndeterminateComponent ||
-      //TODO: Need to figure out why we need context provider
-      tag === ContextProvider) &&
+    (tag === FunctionComponent || tag === IndeterminateComponent || tag === ContextProvider) &&
     memoizedState
   ) {
     if (memoizedState.queue) {
@@ -114,7 +89,7 @@ export default function createComponentActionsRecord(currentFiberNode: Fiber): v
         // which includes the dispatch() function we use to change their state.
         const hooksStates = getHooksStateAndUpdateMethod(memoizedState);
         hooksStates.forEach(({ component }) => {
-          // Save component's state and dispatch() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve.
+          // Save component's state and dispatch() function to our record for future time-travel state changing. Add record index to snapshot so we can retrieve later
           componentActionsRecord.saveNew(component);
         });
       } catch (err) {
@@ -124,7 +99,6 @@ export default function createComponentActionsRecord(currentFiberNode: Fiber): v
       }
     }
   }
-
   // ---------------------TRAVERSE TO NEXT FIBERNODE--------------------------
   // If currentFiberNode has children, recurse on children
   if (child) createComponentActionsRecord(child);