added key command functionality on each action component; able to press arrows to scroll up/down and can jump to a state with the enter key

Author: edwinjmenendez

src/app/components/Action.jsx

@@ -3,40 +3,26 @@ import PropTypes from 'prop-types';
 import { changeView, changeSlider } from '../actions/actions';
 
 /* // gabi and nate :: index and delta props were removed from Action.jsx  */
+// viewIndex and handleonkeyDown added to props
 const Action = props => {
   const {
-    selected, index, sliderIndex, dispatch, displayName, componentName, state
+    selected, index, sliderIndex, dispatch, displayName, componentName, state, viewIndex, handleOnkeyDown,
   } = props;
 
-  // function arrowKeys(event, indexx) {
-  //   if (event.keyCode === 40) {
-  //     indexx += 1;
-  //     console.log('down was pushed; index : ', indexx);
-  //     dispatch(changeView(indexx));
-  //   } else if (event.keyCode === 38) {
-
-  //     console.log('up was pushed indexx, : ', indexx);
-  //     dispatch(changeView(indexx));
-  //   }
-  // }
-
   return (
     <div
+      // Edwin: invoking keyboard functionality; functionality is in ActionContainer;
+      onKeyDown={e => handleOnkeyDown(e, viewIndex)}
       className={selected ? 'action-component selected' : 'action-component'}
-      onClick={() => dispatch(changeView(index))}
+      onClick={() => {
+        dispatch(changeView(index));
+      }}
       role="presentation"
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
-      onKeyDown={e => {
-        if (e.keyCode === 13) {
-          e.stopPropagation();
-          dispatch(changeView(index));
-          dispatch(changeSlider(index));
-        }
-      }}
       tabIndex={index}
     >
       <div className="action-component-text">
-        {`${displayName}:  ${componentName} `} 
+        {`${displayName}:  ${componentName} `}
       </div>
       <button
         className="jump-button"
@@ -61,7 +47,9 @@ Action.propTypes = {
   dispatch: PropTypes.func.isRequired,
   displayName: PropTypes.string.isRequired, 
   componentName: PropTypes.string.isRequired, 
-  state: PropTypes.object.isRequired
+  state: PropTypes.object.isRequired,
+  handleOnkeyDown: PropTypes.func.isRequired,
+  viewIndex: PropTypes.number.isRequired,
 };
 
 export default Action;

src/app/containers/ActionContainer.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { diff } from 'jsondiffpatch';
 import Action from '../components/Action';
 
-import { emptySnapshots } from '../actions/actions';
+import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 const resetSlider = () => {
@@ -20,39 +20,64 @@ function ActionContainer() {
   let actionsArr = [];
   let 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) => {
-      const newObj = {
-        index: obj.index,
-        displayName : `${obj.name}.${obj.branch}`,
-        state: obj.stateSnapshot.children[0].state,
-        componentName: obj.stateSnapshot.children[0].name,
-      }
-      hierarchyArr.push(newObj)
-      if(obj.children){
-        obj.children.forEach((element) => {
-          displayArray(element)
-        })
-      }
-    }    
-    displayArray(hierarchy)
-    console.log('this is hierarchyArr', hierarchyArr)
-    
-    actionsArr = hierarchyArr.map((snapshot, index) => {
-      const selected = index === viewIndex;
-      return (
-        <Action
-          key={`action${index}`}
-          index={index}
-          state={snapshot.state}
-          displayName={snapshot.displayName}
-          componentName={snapshot.componentName} 
-          selected={selected}
-          dispatch={dispatch}
-          sliderIndex={sliderIndex}
-        />
-      );
-    });
+  // 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) => {
+    const newObj = {
+      index: obj.index,
+      displayName: `${obj.name}.${obj.branch}`,
+      state: obj.stateSnapshot.children[0].state,
+      componentName: obj.stateSnapshot.children[0].name,
+    }
+    hierarchyArr.push(newObj)
+    if (obj.children) {
+      obj.children.forEach((element) => {
+        displayArray(element);
+      });
+    }
+  }    
+  displayArray(hierarchy)
+  console.log('this is hierarchyArr', hierarchyArr)
+
+  // Edwin: handles keyboard presses, function passes an event and index of each action-component
+  function handleOnKeyDown(e, i) {
+    let currIndex = i;
+    // up array key pressed
+    if (e.keyCode === 38) {
+      currIndex -= 1;
+      if (currIndex < 0) return;
+      dispatch(changeView(currIndex));
+    }
+    // down arrow key pressed
+    else if (e.keyCode === 40) {
+      currIndex += 1;
+      if (currIndex > hierarchyArr.length - 1) return;
+      dispatch(changeView(currIndex));
+    }
+    // enter key pressed
+    else if (e.keyCode === 13) {
+      e.stopPropagation();
+      dispatch(changeSlider(currIndex));
+    }
+  }
+
+  actionsArr = hierarchyArr.map((snapshot, index) => {
+    const selected = index === viewIndex;
+    return (
+      <Action
+        key={`action${index}`}
+        index={index}
+        state={snapshot.state}
+        displayName={snapshot.displayName}
+        componentName={snapshot.componentName} 
+        selected={selected}
+        dispatch={dispatch}
+        sliderIndex={sliderIndex}
+        handleOnkeyDown={handleOnKeyDown}
+        viewIndex={viewIndex}
+      />
+    );
+  });
+
 
   return (
     <div className="action-container">