initial hooks implementation

Author: davidchai717

package/__tests__/linkFiber.test.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-filename-extension */
-import React from 'react';
+import React, { Component, useState } from 'react';
 import { render } from 'react-dom';
 
 const linkFiberRequire = require('../linkFiber');
@@ -8,7 +8,7 @@ let linkFiber;
 let mode;
 let snapShot;
 
-class App extends React.Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = { foo: 'bar' };
@@ -20,6 +20,17 @@ class App extends React.Component {
   }
 }
 
+// Need to create a functioanl component instance to test 
+// Would need to be revised but here's the gist
+// const funcComponent = () => {
+//     const [ number, setNumber ] = useState(0); 
+//     const newNumber = setNumber(1); 
+    
+//     return (
+//       <div>{newNumber}</div>
+//     )
+// }
+
 describe('unit test for linkFiber', () => {
   beforeEach(() => {
     snapShot = { tree: null };

package/__tests__/timeJump.test.js

@@ -19,6 +19,10 @@ class FiberNode {
   }
 }
 
+// MVP FEATURE: Additional Testing 
+// Testing for useState and useContext 
+
+
 describe('unit testing for timeJump.js', () => {
   let timeJump;
   let snapShot;

package/linkFiber.js

@@ -12,7 +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', payload);
+    // console.log('payload', payload);
     window.postMessage({
       action: 'recordSnap',
       payload,
@@ -43,10 +43,34 @@ 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; 
+      // Increment the index by 1
+      index += 1; 
+    }
+    return memoizedObj; 
+  }
+
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
-
-    const { sibling, stateNode, child } = currentFiber;
+    // 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);
+    }
 
     let nextTree = tree;
     // check if stateful component
@@ -56,7 +80,8 @@ module.exports = (snap, mode) => {
       // change setState functionality
       changeSetState(stateNode);
     }
-
+    // Need to check if functional component AND uses hooks 
+    
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children
@@ -66,19 +91,19 @@ module.exports = (snap, mode) => {
   }
 
   function updateSnapShotTree() {
-    console.log('fiberRoot', fiberRoot);
+    // console.log('fiberRoot', fiberRoot);
     const { current } = fiberRoot;
-    console.log('current', current);
+    // console.log('current', current);
     snap.tree = createTree(current);
   }
 
   return container => {
-    console.log('Container', container);
+    // console.log('Container', container);
     const {
       _reactRootContainer: { _internalRoot },
       _reactRootContainer,
     } = container;
-    console.log('Root container', _reactRootContainer);
+    // console.log('Root container', _reactRootContainer);
     // only assign internal root if it actually exists
     fiberRoot = _internalRoot || _reactRootContainer;
     updateSnapShotTree();

package/timeJump.js

@@ -12,7 +12,6 @@ module.exports = (origin, mode) => {
   // recursively change state of tree
   function jump(target, coords = []) {
     const originNode = traverseTree(origin.tree, coords);
-
     // set the state of the origin tree
     originNode.component.setState(target.state, () => {
       // iterate through new children once state has been set

package/tree.js

@@ -15,7 +15,7 @@ class Tree {
     }
     this.children = [];
     // DEV: Added print() for debugging purposes
-    this.print();
+    // this.print();
   }
 
   appendChild(component) {
@@ -38,6 +38,8 @@ 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)

src/app/components/Action.jsx

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 
 import { changeView, changeSlider } from '../actions/actions';
 
+// BUG FIX: 
+  // changeSlider should also respond to the click event on the div
+
 const Action = props => {
   const {
     selected, index, sliderIndex, dispatch,

src/app/components/Diff.jsx

@@ -5,6 +5,8 @@ import ReactHtmlParser from 'react-html-parser';
 
 import { useStoreContext } from '../store';
 
+// FIX: Update the div copy to something more explanatory 
+
 function Diff({ snapshot, show }) {
   const [mainState] = useStoreContext();
   const { currentTab, tabs } = mainState;

src/app/components/SwitchApp.jsx

@@ -3,6 +3,9 @@ import Select from 'react-select';
 import { useStoreContext } from '../store';
 import { setTab } from '../actions/actions';
 
+
+// BUG FIX: Fix the dropdown styling to make it more distinguishable
+ 
 const SwitchAppDropdown = () => {
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
 

src/app/containers/ActionContainer.jsx

@@ -5,6 +5,10 @@ import Action from '../components/Action';
 import { emptySnapshots } from '../actions/actions';
 import { useStoreContext } from '../store';
 
+// MVP Feature: Include a dropdown functionality 
+// to show stateful/functional/Context API differentiation
+// May want to add another child component to the container
+
 function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { snapshots, sliderIndex, viewIndex } = tabs[currentTab];