updates

Author: Yu Jin Kang

package/linkFiber.js

@@ -9,14 +9,17 @@ module.exports = (snap, mode) => {
 
   function sendSnapshot() {
     // don't send messages while jumping or while paused
+    // 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', payload);
     window.postMessage({
       action: 'recordSnap',
       payload,
     });
   }
 
+  // DEV: This is how we know when a change has happened (by injecting an event listener to every component's setState functionality). Will need to create a separate one for useState components
   function changeSetState(component) {
     // check that setState hasn't been changed yet
     if (component.setState.linkFiberChanged) return;
@@ -40,20 +43,33 @@ module.exports = (snap, mode) => {
     component.setState.linkFiberChanged = true;
   }
 
+  // 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; 
+    }
+    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 
-    // Potential properties (pulling from `current`):
-        // memoizedState (initialized to null and it refers to the state used to create the output)
-        
-        // updateQueue ? >> refers to a queue of state updates and callbacks 
-                // React adds the callback from setState to the updateQueue and schedules work
-
-
-
-
-    const { sibling, stateNode, child } = currentFiber;
+    const { sibling, stateNode, child, memoizedState } = currentFiber;
+    console.log('here is the currentFiber', 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);
+      traverseHooks(memoizedState); 
+      //console.log('This is the result of calling traverseHooks:', result);
+    }
 
     let nextTree = tree;
     // check if stateful component
@@ -74,11 +90,14 @@ module.exports = (snap, mode) => {
   }
 
   function updateSnapShotTree() {
+    // console.log('fiberRoot', fiberRoot);
     const { current } = fiberRoot;
+    // console.log('current', current);
     snap.tree = createTree(current);
   }
 
   return container => {
+    // console.log('Container', container);
     const {
       _reactRootContainer: { _internalRoot },
       _reactRootContainer,

package/tree.js

@@ -14,6 +14,8 @@ class Tree {
       this.name = name;
     }
     this.children = [];
+    // DEV: Added print() for debugging purposes
+    // this.print();
   }
 
   appendChild(component) {
@@ -35,10 +37,12 @@ class Tree {
   }
 
   // print out the tree in the console
+  // DEV: Process may be different for useState components
   // BUG FIX: Don't print the Router as a component 
   // Change how the children are printed 
   print() {
     const children = ['children: '];
+    // DEV: What should we push instead for components using hooks (it wouldn't be state)
     this.children.forEach(child => {
       children.push(child.state || child.component.state);
     });