Complete review for dispatch setState jumping

Author: ngoczwolinski

src/backend/linkFiber.ts

@@ -655,7 +655,6 @@ export default function linkFiber(snapShot: Snapshot, mode: Status): () => void
         // eslint-disable-next-line prefer-destructuring
         // Obtain the updated FiberRootNode, after the target React application re-renders
         fiberRoot = args[1];
-        console.log('onCommit', { fiberRoot });
         // If the target React application is visible, send a request to update the snapShot tree displayed on Chrome Extension
         if (isVisible) throttledUpdateSnapshot(fiberRoot);
         // After our added work is completed we invoke the original onComitFiberRoot function

src/backend/masterState.ts

@@ -27,6 +27,7 @@ export default {
   },
   // adds new component to ComponentActionsRecord
   saveNew: (state, component): number => {
+    console.log('masterState', { component, componentActionsRecord });
     componentActionsRecord[index] = { state, component };
     index++;
 
@@ -35,7 +36,7 @@ export default {
   getRecordByIndex: (inputIndex: number): HookStateItem => componentActionsRecord[inputIndex],
   // this is used for class components -
   /* inputIndex will always be a fixed number (coming in timeJump.ts) */
-  getComponentByIndex: (inputIndex: number): any =>
+  getComponentByIndex: (inputIndex: number): HookStateItem['component'] | undefined =>
     componentActionsRecord[inputIndex] ? componentActionsRecord[inputIndex].component : undefined,
   // this is used for react hooks - hooks will be passed in as an array from timeJump.ts
   getComponentByIndexHooks: (inputIndex: Array<number> = []): Array<any> => {

src/backend/routes.ts

@@ -54,7 +54,6 @@ class Routes {
       // If the last visited index is not the last position in routeHistory stack. This happens when user use the timeJump functionality.
       // => Rebuild the browserHistory
       if (this.current !== this.routeHistory.length - 1) {
-        console.log('Rebuild browser history');
         this.rebuildHistory(url);
       }
       // Create a new route instance from the passed in url.
@@ -64,8 +63,6 @@ class Routes {
       // Update the last visited index.
       this.current = this.routeHistory.length - 1;
     }
-    console.log('Route History', this.routeHistory, this.current);
-    console.log('History length', window.history.length);
     return route;
   }
 

src/backend/snapShot.ts

@@ -20,7 +20,6 @@ export default function updateSnapShotTree(
   mode: Status,
   fiberRoot: FiberRoot,
 ): void {
-  console.log('snapShot.ts - Update');
   // this is the currently active root fiber(the mutable root of the tree)
   const { current } = fiberRoot;
   componentActionsRecord.clear();

src/backend/timeJump.ts

@@ -22,50 +22,63 @@ const circularComponentTable = new Set();
 export default function timeJump(mode) {
   // Recursively change state of tree
   // Set the state of the origin tree if the component is stateful
-  function jump(target): void {
+  async function jump(target): Promise<void> {
+    // ----------------
     if (!target) return;
-    if (target.state === 'stateless') {
+    // Base Case: if has visited, return
+    if (circularComponentTable.has(target)) {
+      return;
+    } else circularComponentTable.add(target);
+    // ------------------------STATELESS/ROOT COMPONENT-------------------------
+    // Since stateless component has no data to update, continue to traverse its child nodes:
+    if (target.state === 'stateless' || target.state === 'root') {
       target.children.forEach((child) => jump(child));
       return;
     }
-    // for stateful class components
+    // Obtain component data & its update method at the given index
     const component = componentActionsRecord.getComponentByIndex(target.componentData.index);
 
+    // ------------------------STATEFUL CLASS COMPONENT-------------------------
+    // for stateful class components
     // check if it is a stateful class component
     // if yes, find the component by its index and assign it to a variable
     // call that components setState method to reset state to the state at the time of the jump snapshot
     if (component && component.setState) {
-      // console.log('timeJumps', { component });
-      component.setState(
+      console.log('timeJump CLASS', componentActionsRecord);
+      await component.setState(
         // prevState contains the states of the snapshots we are jumping FROM, not jumping TO
-        (prevState) => {
-          Object.keys(prevState).forEach((key) => {
-            // the if conditional below does not appear to ever be reached if all states are defined - leaving code in just in case codebases do have undefined states
-            // if (target.state[key] !== undefined) {
-            //   target.state[key] = undefined;
-            // }
-          });
-          return target.state;
-        },
+        (prevState) => target.state,
+        // (prevState) => {
+        //   Object.keys(prevState).forEach((key) => {
+        //     // the if conditional below does not appear to ever be reached if all states are defined - leaving code in just in case codebases do have undefined states
+        //     // if (target.state[key] !== undefined) {
+        //     //   target.state[key] = undefined;
+        //     // }
+        //   });
+        //   return target.state;
+        // }
+
         // Iterate through new children after state has been set
         () => target.children.forEach((child) => jump(child)),
       );
+      return;
     }
 
-    target.children.forEach((child) => {
-      if (!circularComponentTable.has(child)) {
-        circularComponentTable.add(child);
-        jump(child);
-      }
-    });
+    // target.children.forEach((child) => {
+    //   if (!circularComponentTable.has(child)) {
+    //     circularComponentTable.add(child);
+    //     jump(child);
+    //   }
+    // });
 
+    // ----------------------STATEFUL FUNCTIONAL COMPONENT----------------------
     // REACT HOOKS
     // check if component states are set with hooks
     // if yes, grab all relevant components for this snapshot in numArr
     // call dispatch on each component passing in the corresponding currState value
     if (target.state && target.state.hooksState) {
       const currState = target.state.hooksState;
-      const numArr: Array<number> = [];
+      const numArr: number[] = [];
       let counter = 1;
       while (counter < currState.length + 1) {
         numArr.push(target.componentData.hooksIndex - currState.length + counter);
@@ -87,16 +100,18 @@ export default function timeJump(mode) {
     const navigating: boolean = routes.navigate(target.route);
     if (navigating) {
       addEventListener('popstate', (event) => {
-        jump(target);
+        jump(target).then(() => {
+          document.body.onmouseover = () => {
+            mode.jumping = false;
+          };
+        });
+      });
+    } else {
+      jump(target).then(() => {
         document.body.onmouseover = () => {
           mode.jumping = false;
         };
       });
-    } else {
-      jump(target);
-      document.body.onmouseover = () => {
-        mode.jumping = false;
-      };
     }
   };
 }