Merge pull request #35 from oslabs-beta/staging

Staging

Author: crperezt

.eslintrc

@@ -1,11 +1,13 @@
 {
   "extends": ["airbnb", "plugin:jest/recommended"],
   "root": true,
-  "plugins": ["jest", "react"],
+  "plugins": ["jest", "react", "react-hooks"],
   "rules": {
     "arrow-parens": [2, "as-needed"],
     "import/no-unresolved": "off",
-    "import/extensions": "off"
+    "import/extensions": "off",
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
   },
   "env": {
     "es6": true,

dev-reactime/linkFiber.js

@@ -116,8 +116,8 @@ module.exports = (snap, mode) => {
 
     // Check if node is a stateful setState component
     if (stateNode && stateNode.state && (tag === 0 || tag === 1)) {
-      console.log('in create tree if')
-      console.log('this is currentFiber from createTree', currentFiber)
+      console.log('in create tree if');
+      console.log('this is currentFiber from createTree', currentFiber);
       // Save component's state and setState() function to our record for future
       // time-travel state changing. Add record index to snapshot so we can retrieve.
       componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
@@ -128,8 +128,8 @@ module.exports = (snap, mode) => {
     // Check if node is a hooks useState function
     let hooksIndex;
     if (memoizedState && (tag === 0 || tag === 1 || tag === 10)) {
-      console.log('in create tree if')
-      console.log('this is currentFiber from createTree', currentFiber)
+      console.log('in create tree if');
+      console.log('this is currentFiber from createTree', currentFiber);
       if (memoizedState.queue) {
         // Hooks states are stored as a linked list using memoizedState.next,
         // so we must traverse through the list and get the states.
@@ -187,38 +187,6 @@ module.exports = (snap, mode) => {
     return tree;
   }
 
-
-  // function createUnfilteredTree(curFiber, parentNode) {
-  //   // on call from updateSnapShot, no parentNode provided, so create a root node
-  //   if(! parentNode) parentNode = new Tree('root');
-    
-  //   // Base case: parentNode's child or sibling pointed to null
-  //   if (!curFiber) return parentNode;
-    
-  //   let newChildNode = null;
-
-  //   // If stateful, add to parentNode's children array, then inject new setState into fiber node
-  //   if (curFiber.stateNode && curFiber.stateNode.state) {
-  //     newChildNode = parentNode.appendChild(curFiber.stateNode);
-  //     // changeSetState(curFiber.stateNode);
-  //     newChildNode.isStateful = true;
-  //   }
-  //   else {
-
-  //   }
-
-  //   // Recurse to sibling; siblings that have state should be added to our parentNode
-  //   createTree(curFiber.sibling, parentNode);  
-
-  //   // Recurse to child; If this fiber was stateful, then we added a newChildNode here, and we want
-  //   // to attach further children to that. If this fiber wasn't stateful, we want to attach any 
-  //   // children to our existing parentNode.
-  //   createTree(curFiber.child, newChildNode || parentNode);
-
-  //   return parentNode;
-  // }
-
-
   // ! BUG: skips 1st hook click
   function updateSnapShotTree() {
     /* let current;
@@ -253,14 +221,14 @@ module.exports = (snap, mode) => {
       fiberRoot = _internalRoot || _reactRootContainer;
     }
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    console.log('this is devTools', devTools)
+    console.log('this is devTools', devTools);
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
 
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
           fiberRoot = args[1];
-          console.log('this is fiberRoot', fiberRoot)
+          console.log('this is fiberRoot', fiberRoot);
           updateSnapShotTree();
           sendSnapshot();
           return original(...args);
@@ -277,82 +245,3 @@ module.exports = (snap, mode) => {
     });
   };
 };
-
-
-
-
-// function createUnfilteredTree(currentFiber, tree = new Tree('root')) {
-//   // Base case: child or sibling pointed to null
-//   if (!currentFiber) return tree;
-
-//   const { sibling, stateNode, child, memoizedState, elementType,
-//           tag, actualDuration, actualStartTime, selfBaseDuration, treeBaseDuration,
-//   } = currentFiber;
-
-//   const extraProps = {
-//     tag, actualDuration, actualStartTime, selfBaseDuration, treeBaseDuration,
-//   };
-
-//   let nextTree = tree;
-//   let nextTreeUnfiltered = unfilteredTreeNode = new UnfilteredTreeNode('root');
-
-//   // Check if stateful component
-//   if (stateNode && stateNode.state) {
-//     nextTree = tree.appendChild(stateNode); // Add component to tree
-//     changeSetState(stateNode); // Change setState functionality
-//   }
-//   nextTreeUnfiltered = unfilteredTreeNode.appendChild(stateNode);
-
-//   // TODO: handle Hooks cases...
-
-//   // Recurse on siblings
-//   createTree(sibling, tree);
-//   // Recurse on children
-//   createTree(child, nextTree);
-
-//   return tree;
-// }
-
-
-
-// Check if the component uses hooks
-// if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
-//   // 'catch-all' for suspense elements (experimental)
-//   if (typeof elementType.$$typeof === 'symbol') return;
-//   // Traverse through the currentFiber and extract the getters/setters
-//   astHooks = astParser(elementType);
-//   saveState(astHooks);
-//   // Create a traversed property and assign to the evaluated result of
-//   // invoking traverseHooks with memoizedState
-//   memoizedState.traversed = traverseHooks(memoizedState);
-//   nextTree = tree.appendChild(memoizedState);
-// }
-
-
-
-
-
-
-
-
-// function createTree(currentFiber, tree = new Tree('root')) {
-//   // Base case: child or sibling pointed to null
-//   if (!currentFiber) return tree;
-
-//   const { sibling, stateNode, child, memoizedState, elementType } = currentFiber;
-
-//   let nextTree = tree;
-
-//   // Check if stateful component
-//   if (stateNode && stateNode.state) {
-//     nextTree = tree.appendChild(stateNode); // Add component to tree
-//     changeSetState(stateNode); // Change setState functionality
-//   }
-
-//   // Recurse on siblings
-//   createTree(sibling, tree);
-//   // Recurse on children
-//   createTree(child, nextTree);
-
-//   return tree;
-// }

dev-reactime/tree.js

@@ -44,72 +44,7 @@ class Tree {
       });
     }
     return copy;
-
-  // This is a regular old tree version of the above, but above version
-  // is better suited for D3 chart displays
-// class Tree {
-//   constructor(state, name = 'nameless', index) {
-//     this.state = state === 'root' ? 'root' : JSON.parse(JSON.stringify(state));
-//     this.name = name;
-//     this.index = index;
-//     this.child = null;
-//     this.sibling = null;
-//   }
-
-//   setNode(state, name, index) {
-//     this.state = { ...this.child.state, ...state };
-//     this.name = name;
-//     this.index = index;
-//   }
-
-//   appendToChild(state, name = this.name, index = this.index) {
-//     if (this.child) {
-//       this.child.state = { ...this.child.state, ...state };
-//       this.child.name = name;
-//       this.child.index = index;
-//     } else {
-//       this.child = new Tree(state, name, index);
-//     }
-//   }
-
-//   appendToSibling(state, name = this.name, index = this.index) {
-//     if (this.sibling) {
-//       state = { ...this.sibling.state, ...state };
-//       this.sibling.name = name;
-//       this.sibling.index = index;
-//     } else {
-//       this.sibling = new Tree(state, name, index);
-//     }
-//   }
-
-//   cleanTreeCopy() {
-//     const copy = new Tree(this.state, this.name, this.index);
-//     if (this.sibling) {
-//       copy.sibling = new Tree(this.sibling.state, this.sibling.name, this.sibling.index);
-//       copy.sibling = scrubUnserializableMembers(copy.sibling);
-//       copy.sibling = this.sibling.sibling;
-//       copy.sibling.cleanTreeCopy();
-//     }
-
-//     if (this.child) {
-//       copy.child = new Tree(this.child.state, this.child.name, this.child.index);
-//       copy.child = scrubUnserializableMembers(copy.child);
-//       copy.child = this.child.child;
-//       copy.child.cleanTreeCopy();
-//     }
-// 
-//   // unfinished:
-//   cleanD3Copy(children = []) {
-//     copy = D3Tree(this.state, this.name, this.index, this.isStateless);
-//     let nextSibling = this.sibling;
-//     while(nextSibling = this.sibling) {
-//     copy.cleanD3Copy(copy.)
-//   }
-  
-}
-
-//     return copy;
-//   }
+  }
 
   // print out the tree structure in the console
   // DEV: Process may be different for useState components
@@ -119,7 +54,8 @@ class Tree {
     // console.log('current tree structure for *this : ', this);
     const children = ['children: '];
     // DEV: What should we push instead for components using hooks (it wouldn't be state)
-    this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
+    // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
+    this.children.forEach(child => { 
       children.push(child.state || child.component.state);
     });
     if (this.name) console.log('this.name if exists: ', this.name);
@@ -132,52 +68,4 @@ class Tree {
   }
 }
 
-// class UnfilteredTreeNode extends Tree {
-//   constructor(component, useStateInstead = false, name, unfilteredProps) {
-//     super(component, useStateInstead, name);
-//     // this.isStateful = unfilteredProps.isStateful;
-//     // this.tagLabel = reactWorkTags[unfilteredProps.tag];
-//     if(unfilteredProps) {
-//       this.tag = unfilteredProps.tag;
-//       this.actualDuration = unfilteredProps.actualDuration;
-//       this.actualStartTime = unfilteredProps.actualStartTime;
-//       this.selfBaseDuration = unfilteredProps.selfBaseDuration;
-//       this.treeBaseDuration = unfilteredProps.treeBaseDuration;
-//     }
-//   }
-
-//   appendChild(component) {
-//     const newChild = new UnfilteredTreeNode(component);
-//     this.children.push(newChild);
-//     return newChild;
-//   }
-// }
-
-module.exports = Tree
-// module.exports = {
-//   Tree,
-  // UnfilteredTreeNode,
-// };
-
-
-
-
-  // // print out the tree structure 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() {
-  //   console.log("current tree structure for *this : ", this);
-  //   const children = ['children: '];
-  //   // DEV: What should we push instead for components using hooks (it wouldn't be state)
-  //   this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
-  //     children.push(child.state || child.component.state);
-  //   });
-  //   if (this.name) console.log("this.name if exists: ", this.name);
-  //   if (children.length === 1) {
-  //     console.log(`children length 1. ${this.state ? `this.state: ` : `this.component.state: `}`, this.state || this.component.state);
-  //   } else console.log(`children length !== 1. ${this.state ? `this.state: ` : `this.component.state, children: `}`, this.state || this.component.state, ...children);
-  //   this.children.forEach(child => {
-  //     child.print();
-  //   });
-  // }
+module.exports = Tree;

src/app/components/Action.jsx

@@ -6,13 +6,37 @@ import { changeView, changeSlider } from '../actions/actions';
 // viewIndex and handleonkeyDown added to props
 const Action = props => {
   const {
-    selected, last, index, sliderIndex, dispatch, displayName, componentName, state, viewIndex, handleOnkeyDown,
+    selected, last, index, sliderIndex, dispatch, displayName, componentName, componentData, state, viewIndex, handleOnkeyDown,
   } = props;
-  console.log('last', last)
-  console.log('index', index)
-  console.log('viewIndex', viewIndex)
-  console.log('selected', selected)
-  selected
+
+  // display render time for state change in seconds and miliseconds
+  const cleanTime = () => {
+    let seconds;
+    let miliseconds = componentData.actualDuration;
+    if (Math.floor(componentData.actualDuration) > 60) {
+      seconds = Math.floor(componentData.actualDuration / 60);
+      seconds = JSON.stringify(seconds);
+      if (seconds.length < 2) {
+        seconds = '0'.concat(seconds);
+      }
+      miliseconds = Math.floor(componentData.actualDuration % 60);
+    } else {
+      seconds = '00';
+    }
+    miliseconds = JSON.stringify(miliseconds);
+    const arrayMiliseconds = miliseconds.split('.');
+    if (arrayMiliseconds[0].length < 2) {
+      arrayMiliseconds[0] = '0'.concat(arrayMiliseconds[0]);
+    }
+    if (arrayMiliseconds[1].length > 3) {
+      arrayMiliseconds[1] = arrayMiliseconds[1].slice(0, 2);
+    }
+    if (index == 0) {
+      return `${seconds}:${arrayMiliseconds[0]}.${arrayMiliseconds[1]}`;
+    }
+    return `+${seconds}:${arrayMiliseconds[0]}.${arrayMiliseconds[1]}`;
+  };
+  const displayTime = cleanTime();
 
   return (
     <div
@@ -29,6 +53,12 @@ const Action = props => {
       <div className="action-component-text">
         {`${displayName}:  ${componentName} `}
       </div>
+      <button
+        className="time-button"
+        type="button"
+      >
+        {displayTime}
+      </button>
       <button
         className="jump-button"
         onClick={e => {
@@ -50,8 +80,8 @@ Action.propTypes = {
   selected: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,
   dispatch: PropTypes.func.isRequired,
-  displayName: PropTypes.string.isRequired, 
-  componentName: PropTypes.string.isRequired, 
+  displayName: PropTypes.string.isRequired,
+  componentName: PropTypes.string.isRequired,
   state: PropTypes.object.isRequired,
   handleOnkeyDown: PropTypes.func.isRequired,
   viewIndex: PropTypes.number.isRequired,

src/app/components/Chart.jsx

@@ -34,6 +34,7 @@ class Chart extends Component {
   componentDidUpdate() {
     const { hierarchy } = this.props;
     root = JSON.parse(JSON.stringify(hierarchy));
+    console.log("Chart -> componentDidUpdate -> hierarchy", hierarchy);
     this.maked3Tree();
   }