Refactor timejump for consitency. Working on removing state from backend

Author: ngoczwolinski

demo-app/src/client/Components/Home.tsx

@@ -1,18 +1,14 @@
 import { set } from 'lodash';
 import React from 'react';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 function Home() {
   const [dummyDummy1, setDummyData1] = useState('dummyData1');
   const [dummyDummy2, setDummyData2] = useState('dummyData2');
-  const [count, setCount] = useState(0);
-  useEffect(() => {
-    setCount((count) => count + 1);
-  }, [dummyDummy1]);
+
   function handleClick1() {
     setDummyData1((dummyData1) => (dummyData1 === 'dummyData1' ? 'test1' : 'dummyData1'));
   }
-  const [count1, setCount1] = useState(0);
 
   function handleClick2() {
     setDummyData2((dummyData2) => (dummyData2 === 'dummyData2' ? 'test2' : 'dummyData2'));
@@ -30,7 +26,6 @@ function Home() {
         {' '}
         Test{' '}
       </button>
-      <p>Count: {count}</p>
       {/* <h1>Lorem Ipsum</h1> */}
       {/* <p>
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

demo-app/src/client/Components/Increment.tsx

@@ -1,12 +1,24 @@
 import React, { useState } from 'react';
-
+import Box from './Box';
+import { BoardText } from '../../types';
+import { Function } from 'lodash';
 function Increment() {
   const [count, setCount] = useState(0);
-
+  const [value, setValue]: [BoardText, any] = useState('-');
   return (
-    <button className='increment' onClick={() => setCount(count + 1)}>
-      You clicked me {count} times.
-    </button>
+    <div>
+      <button className='increment' onClick={() => setCount(count + 1)}>
+        You clicked me {count} times.
+      </button>
+      {/* <div> */}
+      {/* <Box
+        value={value}
+        column={3}
+        row={2}
+        handleBoxClick={() => setValue((value: BoardText) => (value == 'X' ? 'O' : 'X'))}
+      /> */}
+      {/* </div> */}
+    </div>
   );
 }
 

src/backend/linkFiber.ts

@@ -210,8 +210,8 @@ function convertDataToString(
       console.log('linkFiber', { reactDevData, key });
       throw Error(`Error caught at converDataToString: ${err}`);
     }
-    return reactimeData;
   }
+  return reactimeData;
 }
 // ------------------------FILTER STATE & CONTEXT DATA--------------------------
 /**
@@ -359,7 +359,7 @@ export function createTree(
     context: {};
     state?: {};
     hooksState?: any[];
-    hooksIndex?: number;
+    hooksIndex?: number[];
     index?: number;
   } = {
     actualDuration,
@@ -458,13 +458,17 @@ export function createTree(
       const hooksStates = traverseHooks(memoizedState);
       const hooksNames = getHooksNames(elementType.toString());
       console.log({ hooksNames });
+      // Intialize state & index:
       newState.hooksState = [];
-      componentData.state = {};
+      componentData.hooksState = [];
+      componentData.hooksIndex = [];
       hooksStates.forEach((state, i) => {
-        hooksIndex = componentActionsRecord.saveNew(state.state, state.component);
-        componentData.hooksIndex = hooksIndex;
+        // 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.
+        componentData.hooksIndex.push(componentActionsRecord.saveNew(state.state, state.component));
+        // Save state information in componentData.
         newState.hooksState.push({ [hooksNames[i].hookName]: state.state });
-        componentData.state[hooksNames[i].varName] = state.state;
+        // Passess to front end
+        componentData.hooksState.push({ [hooksNames[i].hookName]: state.state });
       });
       isStatefulComponent = true;
     }

src/backend/masterState.ts

@@ -39,7 +39,9 @@ export default {
   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> => {
+  getComponentByIndexHooks: (
+    inputIndex: Array<number> = [],
+  ): Array<HookStateItem['component']> | undefined => {
     const multiDispatch = [];
     for (let i = 0; i < inputIndex.length; i++) {
       if (componentActionsRecord[inputIndex[i]]) {

src/backend/timeJump.ts

@@ -28,67 +28,53 @@ export default function timeJump(mode) {
     // Base Case: if has visited, return
     if (circularComponentTable.has(target)) {
       return;
-    } else circularComponentTable.add(target);
+    } 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;
     }
-    // Obtain component data & its update method at the given index
-    const component = componentActionsRecord.getComponentByIndex(target.componentData.index);
 
+    // Destructure component data:
+    const { index, state, hooksIndex, hooksState } = target.componentData;
     // ------------------------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('timeJump CLASS', componentActionsRecord);
-      await component.setState(
-        // prevState contains the states of the snapshots we are jumping FROM, not jumping TO
-        (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)),
-      );
+    //index can be zero => falsy value => DO NOT REMOVE UNDEFINED
+    if (index !== undefined) {
+      // Obtain component data & its update method at the given index
+      const classComponent = componentActionsRecord.getComponentByIndex(index);
+      if (classComponent && classComponent.setState) {
+        await classComponent.setState(
+          // prevState contains the states of the snapshots we are jumping FROM, not jumping TO
+          (prevState) => 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);
-    //   }
-    // });
-
     // ----------------------STATEFUL FUNCTIONAL COMPONENT----------------------
-    // REACT HOOKS
     // check if component states are set with hooks
-    // if yes, grab all relevant components for this snapshot in numArr
+    // if yes, grab all relevant components for this snapshot by its index
     // call dispatch on each component passing in the corresponding currState value
-    if (target.state && target.state.hooksState) {
-      const currState = target.state.hooksState;
-      const numArr: number[] = [];
-      let counter = 1;
-      while (counter < currState.length + 1) {
-        numArr.push(target.componentData.hooksIndex - currState.length + counter);
-        counter += 1;
-      }
-      const hooksComponent = componentActionsRecord.getComponentByIndexHooks(numArr);
-      console.log('timeJumps', { hooksComponent, currState });
-      for (let i = 0; i < currState.length; i += 1) {
-        hooksComponent[i].dispatch(Object.values(currState[i])[0]);
+    //index can be zero => falsy value => DO NOT REMOVE UNDEFINED
+    if (hooksIndex !== undefined) {
+      // Obtain component data & its update method at the given index
+      const functionalComponent = componentActionsRecord.getComponentByIndexHooks(hooksIndex);
+      if (functionalComponent.length) {
+        for (let i = 0; i < hooksState.length; i += 1) {
+          await functionalComponent[i].dispatch(Object.values(hooksState[i])[0]);
+        }
       }
+      target.children.forEach((child) => jump(child));
+      return;
     }
   }