Merge pull request #6 from oslabs-beta/hooks-implementation

Hooks implementation

Author: andynullwong

package/index.js

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

package/linkFiber.js

@@ -20,7 +20,9 @@ module.exports = (snap, mode) => {
     });
   }
 
-  // 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;
@@ -44,6 +46,8 @@ 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
@@ -52,7 +56,7 @@ module.exports = (snap, mode) => {
     // while memoizedState is truthy, save the value to the object
     while (memoizedState) {
       // Increment the index by 1
-      memoizedObj[`useState${index += 1}`] = memoizedState.memoizedState;
+      memoizedObj[`state${index += 1}`] = memoizedState.memoizedState;
       // Reassign memoizedState to its next value
       memoizedState = memoizedState.next;
     }
@@ -61,8 +65,7 @@ module.exports = (snap, mode) => {
 
   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,
@@ -82,10 +85,10 @@ module.exports = (snap, mode) => {
     // 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);
+      // console.log('The memoizedState is: ', memoizedState)
+
+      const traversed = traverseHooks(memoizedState); 
+      nextTree = tree.appendChild(traversed);
     }
 
     // iterate through siblings
@@ -97,21 +100,18 @@ 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);
+  //   console.log('this is the container', container)
   //   const {
   //     _reactRootContainer: { _internalRoot },
   //     _reactRootContainer,
-  //   } = container;
-  //   // console.log('Root container', _reactRootContainer);
+  //   } = container; 
   //   // only assign internal root if it actually exists
   //   fiberRoot = _internalRoot || _reactRootContainer;
+  //   console.log('fiberRoot', fiberRoot);
   //   updateSnapShotTree();
 
   //   // send the initial snapshot once the content script has started up
@@ -121,37 +121,49 @@ module.exports = (snap, mode) => {
   // };
 
   return {
-    main(container) {
-      // console.log('Container', container);
+    _(container) {
       const {
         _reactRootContainer: { _internalRoot },
         _reactRootContainer,
       } = container;
-      // console.log('Root container', _reactRootContainer);
       // only assign internal root if it actually exists
       fiberRoot = _internalRoot || _reactRootContainer;
       updateSnapShotTree();
-  
       // send the initial snapshot once the content script has started up
       window.addEventListener('message', ({ data: { action } }) => {
         if (action === 'contentScriptStarted') sendSnapshot();
       });
     },
-    changeUseState(useState) {
-      return function (initial) {
+    testUseState(useState) {
+      return function(initial) {
         // running the original useState and storing its result (state and dispatch function)
         const toReturn = useState(initial);
-        console.log(toReturn);
         // storing the original dispatch function definition somewhere
         const oldDispatch = toReturn[1];
         // redefining the dispatch function so we can inject our code
-        toReturn[1] = function (callback) {
-          oldDispatch(callback);
+        toReturn[1] = function(newVal) {
+          oldDispatch(newVal);
           updateSnapShotTree();
           sendSnapshot();
         };
         return toReturn;
       };
     },
+    testUseReducer(useReducer) {
+      return function(reducer, initialState, init) {
+        // Declare a constant and initialize to the built-in useReducer method 
+        // Which returns an array with the state and dispatch 
+        const reduced = useReducer(reducer, initialState, init);
+        // Save the dispatch method 
+        const oldDispatch = reduced[1]; 
+        // reassign the dispatch method with the additional methods
+        reduced[1] = function(type) {
+          oldDispatch(type);
+          updateSnapShotTree();
+          sendSnapshot(); 
+        }
+        return reduced; 
+      }  
+    },
   };
 };

package/package-lock.json

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