set up clicks on snapshoots to trigger findDiff

Author: josephiswhere

src/app/components/Action.tsx

@@ -15,13 +15,14 @@ interface ActionProps {
   last: boolean;
   index: number;
   sliderIndex: number;
-  dispatch: (a:any) => void;
+  dispatch: (a: any) => void;
   displayName: string;
   componentName: string;
-  componentData: {actualDuration: number}|undefined;
+  componentData: { actualDuration: number } | undefined;
   state?: Record<string, unknown>;
   viewIndex: number;
-  handleOnkeyDown: (e: any, i: number) => void;
+  handleOnkeyDown: (e: any, i: number) => any;
+  logChangedState: (index: number) => void;
 }
 
 /**
@@ -41,10 +42,18 @@ interface ActionProps {
 // index and delta props were removed from Action.jsx  */
 // viewIndex and handleonkeyDown added to props
 const Action = (props: ActionProps): JSX.Element => {
-
   const {
-    selected, last, index, sliderIndex, dispatch, displayName, componentName,
-    componentData, viewIndex, handleOnkeyDown,
+    selected,
+    last,
+    index,
+    sliderIndex,
+    dispatch,
+    displayName,
+    componentName,
+    componentData,
+    viewIndex,
+    handleOnkeyDown,
+    logChangedState,
   } = props;
 
   // nathan test for props
@@ -57,7 +66,7 @@ const Action = (props: ActionProps): JSX.Element => {
     if (!componentData || !componentData.actualDuration) {
       return 'NO TIME';
     }
-    let seconds:number| string;
+    let seconds: number | string;
     let miliseconds: any = componentData.actualDuration;
     if (Math.floor(componentData.actualDuration) > 60) {
       seconds = Math.floor(componentData.actualDuration / 60);
@@ -85,33 +94,33 @@ const Action = (props: ActionProps): JSX.Element => {
     <div
       // Invoking keyboard functionality; functionality is in ActionContainer;
       onKeyDown={(e) => handleOnkeyDown(e, viewIndex)}
-      className={selected || last ? 'action-component selected' : 'action-component'}
+      className={
+        selected || last ? 'action-component selected' : 'action-component'
+      }
       onClick={() => {
         dispatch(changeView(index));
+        console.log(logChangedState(index));
       }}
-      role="presentation"
+      role='presentation'
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
       tabIndex={index}
     >
-      <div className="action-component-text">
+      <div className='action-component-text'>
         {/* {`${displayName}:  ${componentName !== 'nameless' ? componentName : ''} `} */}
         {`displayName: ${displayName}`}
       </div>
-      <button
-        className="time-button"
-        type="button"
-      >
+      <button className='time-button' type='button'>
         {displayTime}
       </button>
       <button
-        className="jump-button"
+        className='jump-button'
         onClick={(e: any): void => {
           e.stopPropagation();
           dispatch(changeSlider(index));
           dispatch(changeView(index));
         }}
         tabIndex={index}
-        type="button"
+        type='button'
       >
         Jump
       </button>

src/app/containers/ActionContainer.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import Action from '../components/Action';
-import { diff, formatters } from "jsondiffpatch";
+import { diff, formatters } from 'jsondiffpatch';
 import SwitchAppDropdown from '../components/SwitchApp';
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
@@ -30,13 +30,13 @@ function ActionContainer(props) {
       children?: any[];
     }) => {
       const newObj = { ...obj };
-      if (newObj.name === "nameless") {
+      if (newObj.name === 'nameless') {
         delete newObj.name;
       }
       if (newObj.componentData) {
         delete newObj.componentData;
       }
-      if (newObj.state === "stateless") {
+      if (newObj.state === 'stateless') {
         delete newObj.state;
       }
       if (newObj.stateSnaphot) {
@@ -48,7 +48,7 @@ function ActionContainer(props) {
           obj.children.forEach(
             (element: { state?: object | string; children?: [] }) => {
               if (
-                element.state !== "stateless" ||
+                element.state !== 'stateless' ||
                 element.children.length > 0
               ) {
                 const clean = statelessCleanning(element);
@@ -69,7 +69,7 @@ function ActionContainer(props) {
     // diff function returns a comparison of two objects, one has an updated change
     // just displays stateful data
     const delta = diff(previousDisplay, snapshots[index]);
-    console.log("AC delta", delta);
+    console.log('AC delta', delta);
     // return delta
     const changedState = findStateChangeObj(delta);
     //const previousDisplayState = findStateChangeObj(previousDisplay);
@@ -92,19 +92,20 @@ function ActionContainer(props) {
   // }
 
   function findStateChangeObj(delta, changedState = []) {
-    
-    if (!delta.children) {
+    if (!delta.children && !delta.state) {
       // console.log('snapshot', snapshot);
       return changedState;
     }
     if (delta.state && delta.state[0] !== 'stateless') {
       changedState.push(delta.state);
     }
+    if (!delta.children) {
+      // console.log('snapshot', snapshot);
+      return changedState;
+    }
     // console.log('snapshot outside if', snapshot);
     return findStateChangeObj(delta.children[0], changedState);
   }
-
-  findDiff(2);
   // function to traverse state from hiararchy and also getting information on display name and component name
   const displayArray = (obj: {
     stateSnapshot: { children: any[] };
@@ -193,10 +194,11 @@ function ActionContainer(props) {
           dispatch={dispatch}
           sliderIndex={sliderIndex}
           handleOnkeyDown={handleOnKeyDown}
+          logChangedState={findDiff}
           viewIndex={viewIndex}
         />
       );
-    },
+    }
   );
   useEffect(() => {
     setActionView(true);

src/app/styles/main.scss

@@ -1,28 +1,28 @@
 @charset 'UTF-8';
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 * {
-	font-family: 'Roboto', sans-serif;
+  font-family: 'Roboto', sans-serif;
 }
 
 /* width */
 ::-webkit-scrollbar {
-	width: 5px;
-	height: 8px;
+  width: 5px;
+  height: 8px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-	background: rgb(20, 20, 20);
+  background: rgb(20, 20, 20);
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-	background: rgb(67, 67, 71);
+  background: rgb(67, 67, 71);
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-	background: rgb(97, 97, 97);
+  background: rgb(97, 97, 97);
 }
 
 // 1. Configuration and helpers
@@ -33,13 +33,13 @@
 
 // 4. Layout-related sections
 @import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
-	'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
-	'layout/buttonsContainer', 'layout/headContainer.scss';
+  'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
+  'layout/buttonsContainer', 'layout/headContainer.scss';
 
 // 5. Components
 @import 'components/buttons', 'components/actionComponent',
-	'components/jsonTree', 'components/RenderingFrequency',
-	'components/PerformanceVisx';
+  'components/jsonTree', 'components/renderingFrequency',
+  'components/performanceVisx';
 
 // slider component
 @import './components/rc-slider', './components/sliderHandle';