updates

Author: Yu Jin Kang

package/index.js

@@ -25,4 +25,4 @@ window.addEventListener('message', ({ data: { action, payload } }) => {
   }
 });
 
-module.exports = linkFiber;
+module.exports = linkFiber; 

package/linkFiber.js

@@ -12,14 +12,17 @@ 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('Here is the payload:', payload);
     // 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
+  // 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;
@@ -43,33 +46,32 @@ module.exports = (snap, mode) => {
     component.setState.linkFiberChanged = true;
   }
 
+  // Helper function to 
+
   // 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; 
+    let index = 0;
+    const memoizedObj = {};
+    // while memoizedState is truthy, save the value to the object
+    while (memoizedState) {
+      // Increment the index by 1
+      memoizedObj[`useState${index += 1}`] = memoizedState.memoizedState;
       // Reassign memoizedState to its next value
-      memoizedState = memoizedState.next; 
+      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;
-    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);
-    }
+  
+    const {
+      sibling,
+      stateNode,
+      child,
+      memoizedState,
+    } = currentFiber;
 
     let nextTree = tree;
     // check if stateful component
@@ -79,31 +81,38 @@ 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); 
+      nextTree = tree.appendChild(result);
+    }
+
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children
     createTree(child, nextTree);
-
+    console.log('this is the tree after being traversed', tree)
     return tree;
   }
 
   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,
     } = container;
     // only assign internal root if it actually exists
     fiberRoot = _internalRoot || _reactRootContainer;
+    console.log('here is the fiberRoot', fiberRoot)
     updateSnapShotTree();
 
     // send the initial snapshot once the content script has started up

package/package-lock.json

@@ -22,5 +22,6 @@
     "react devtool"
   ],
   "author": "Bryan Lee, Josh Kim, Ryan Dang, Sierra Swaby",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {}
 }

package/package.json

@@ -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