render time

Author: aquinojardim

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/containers/ActionContainer.jsx

@@ -16,19 +16,20 @@ function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   console.log('actionContainer tabs[currentTab];', tabs[currentTab]);
-
+  console.log('actionContainer hierarchy;', hierarchy);
   let actionsArr = [];
   const hierarchyArr = [];
 
   // gabi and nate :: delete function to traverse state from snapshots, now we are tranversing state from hiararchy and alsog getting infromation on display name and component name
   const displayArray = obj => {
-    console.log('obj', obj);
+    console.log('obj start displayArray', obj);
     if (obj.stateSnapshot.children.length > 0 && obj.stateSnapshot.children[0] && obj.stateSnapshot.children[0].state && obj.stateSnapshot.children[0].name) {
       const newObj = {
         index: obj.index,
         displayName: `${obj.name}.${obj.branch}`,
         state: obj.stateSnapshot.children[0].state,
         componentName: obj.stateSnapshot.children[0].name,
+        componentData: JSON.stringify(obj.stateSnapshot.children[0].componentData) === '{}' ? '' : obj.stateSnapshot.children[0].componentData
       };
 
       hierarchyArr.push(newObj);
@@ -75,6 +76,7 @@ function ActionContainer() {
         state={snapshot.state}
         displayName={snapshot.displayName}
         componentName={snapshot.componentName}
+        componentData={snapshot.componentData}
         selected={selected}
         last={last}
         dispatch={dispatch}

src/app/styles/components/_actionComponent.scss

@@ -9,10 +9,14 @@
   border-bottom-width: 1px;
   border-color: $border-color;
   cursor: pointer;
-  text-overflow: ellipsis;
+  overflow: hidden;
   @extend %disable-highlight
 }
 
+.action-component-text{
+  margin-bottom: 10px;
+}
+
 .action-component.selected {
   background-color: $light-grey-one;
 }

src/app/styles/components/_buttons.scss

@@ -8,12 +8,27 @@
   margin-left: 20px; 
 }
 
+.action-component:hover .time-button {
+  display: none;
+}
+
 .action-component:hover .jump-button {
   opacity: 1;
   transform: rotateX(0deg);
   transition: opacity 300ms, transform 0.15s linear;
 }
 
+.time-button {
+  outline: none;
+  height: 20px;
+  width: 70px;
+  border: none;
+  border-radius: 3px;
+  background-color: #565A61;
+  font: normal 11px monaco, Consolas, "Lucida Console", monospace, Arial, sans-serif;
+  color: #B0B0B0;
+}
+
 .jump-button {
   @extend %button-shared;
   width: 50px;