useState showing on the tree

Author: davidchai717

package/linkFiber.js

@@ -12,6 +12,7 @@ module.exports = (snap, mode) => {
     // DEV: So that when we are jumping to an old snapshot it wouldn't think we want to create new snapshots
     if (mode.jumping || mode.paused) return;
     const payload = snap.tree.getCopy();
+    console.log(payload);
     // console.log('payload', payload);
     window.postMessage({
       action: 'recordSnap',
@@ -46,31 +47,28 @@ module.exports = (snap, mode) => {
   // Helper function to traverse through the memoized state
   function traverseHooks(memoizedState) {
     // Declare variables and assigned to 0th index and an empty object, respectively
-    let index = 0; 
-    let memoizedObj = {};
-    // while memoizedState is truthy, save the value to the object 
-    while (memoizedState) { 
-      memoizedObj[index] = memoizedState.memoizedState; 
-      // Reassign memoizedState to its next value
-      memoizedState = memoizedState.next; 
+    let index = 0;
+    const memoizedObj = {};
+    // while memoizedState is truthy, save the value to the object
+    while (memoizedState) {
       // Increment the index by 1
-      index += 1; 
+      memoizedObj[`useState${index += 1}`] = memoizedState.memoizedState;
+      // Reassign memoizedState to its next value
+      memoizedState = memoizedState.next;
     }
-    return memoizedObj; 
+    return memoizedObj;
   }
 
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
     // We have to figure out which properties to destructure from currentFiber
-    // To support hooks and Context API 
-    const { sibling, stateNode, child, memoizedState } = currentFiber;
-    // TODO: Refactor the conditionals - think about the edge case where a stateful component might have a key called 'baseState' in the state
-    if (memoizedState && memoizedState.hasOwnProperty('baseState')) {
-      // console.log('The hook element is:', currentFiber);
-      // console.log('The memoizedState is: ', memoizedState);
-      const result = traverseHooks(memoizedState); 
-      console.log('This is the result of calling traverseHooks:', result);
-    }
+    // To support hooks and Context API
+    const {
+      sibling,
+      stateNode,
+      child,
+      memoizedState,
+    } = currentFiber;
 
     let nextTree = tree;
     // check if stateful component
@@ -80,8 +78,16 @@ module.exports = (snap, mode) => {
       // change setState functionality
       changeSetState(stateNode);
     }
-    // Need to check if functional component AND uses hooks 
-    
+    // Check if the component uses hooks
+    // TODO: Refactor the conditionals - think about the edge case where a stateful
+    // component might have a key called 'baseState' in the state
+    if (memoizedState && memoizedState.hasOwnProperty('baseState')) {
+      // console.log('The memoizedState is: ', memoizedState);
+      const result = traverseHooks(memoizedState);
+      console.log('This is the result of calling traverseHooks:', result);
+      nextTree = tree.appendChild(result);
+    }
+
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children
@@ -93,7 +99,7 @@ module.exports = (snap, mode) => {
   function updateSnapShotTree() {
     // console.log('fiberRoot', fiberRoot);
     const { current } = fiberRoot;
-    // console.log('current', current);
+    console.log('current', current);
     snap.tree = createTree(current);
   }
 

package/tree.js

@@ -28,7 +28,7 @@ class Tree {
   getCopy(copy = new Tree('root', true)) {
     // copy state of children
     copy.children = this.children.map(
-      child => new Tree(child.component.state, true, child.component.constructor.name),
+      child => new Tree(child.component.state || child.component, true, child.component.constructor.name),
     );
 
     // copy children's children recursively