merged with master

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/tree.js

@@ -59,7 +59,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);

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();
   }