removed button controls from action container

Author: garrettlchow

src/app/FrontendTypes.ts

@@ -223,15 +223,13 @@ export interface ActionProps {
   last: boolean;
   index: number;
   sliderIndex: number;
-  // dispatch: (a: { type: string; payload: unknown }) => void;
   displayName: string;
   componentName: string;
   componentData: { actualDuration: number } | undefined;
   routePath: unknown;
   state?: Record<string, unknown>;
   viewIndex: number | undefined;
   isCurrIndex: boolean;
-  handleOnkeyDown: (e: KeyboardEvent, i: number) => void;
 }
 
 export interface DiffRouteProps {

src/app/components/Actions/Action.tsx

@@ -7,17 +7,8 @@ import { useDispatch } from 'react-redux';
 const Action = (props: ActionProps): JSX.Element => {
   const dispatch = useDispatch();
 
-  const {
-    selected,
-    last,
-    index,
-    sliderIndex,
-    displayName,
-    componentData,
-    viewIndex,
-    isCurrIndex,
-    handleOnkeyDown,
-  } = props;
+  const { selected, last, index, sliderIndex, displayName, componentData, viewIndex, isCurrIndex } =
+    props;
 
   const cleanTime = (): string => {
     if (!componentData || !componentData.actualDuration) {
@@ -64,7 +55,6 @@ const Action = (props: ActionProps): JSX.Element => {
     <div className='individual-action'>
       <div
         // @ts-ignore
-        onKeyDown={(e): void => handleOnkeyDown(e, viewIndex)}
         className={selected || last ? 'action-component selected' : 'action-component'}
         onClick={() => {
           dispatch(changeView(index));

src/app/containers/ActionContainer.tsx

@@ -78,28 +78,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
   // the hierarchy gets set on the first click in the page
   if (hierarchy) displayArray(hierarchy); // when page is refreshed we may not have a hierarchy so we need to check if hierarchy was initialized. If it was initialized, invoke displayArray to display the hierarchy
 
-  // This function allows us to use our arrow keys to jump between snapshots. It passes an event and the index of each action-component. Using the arrow keys allows us to highligh snapshots and the enter key jumps to the selected snapshot
-  function handleOnKeyDown(e: Partial<KeyboardEvent>, i: number): void {
-    let currIndex = i;
-
-    if (e.key === 'ArrowUp') {
-      // up arrow key pressed
-      currIndex--;
-      if (currIndex < 0) return;
-      dispatch(changeView(currIndex));
-    } else if (e.key === 'ArrowDown') {
-      // down arrow key pressed
-      currIndex++;
-      if (currIndex > hierarchyArr.length - 1) return;
-      dispatch(changeView(currIndex));
-    } else if (e.key === 'Enter') {
-      // enter key pressed
-      e.stopPropagation(); // prevents further propagation of the current event in the capturing and bubbling phases
-      e.preventDefault(); // needed or will trigger onClick right after
-      dispatch(changeSlider(currIndex));
-    }
-  }
-
   // Sort hierarchyArr by index property of each object. This will be useful when later when we build our components so that our components will be displayed in index/chronological order
   hierarchyArr.sort((a: Obj, b: Obj): number => a.index - b.index);
 
@@ -129,7 +107,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           selected={selected}
           last={last}
           sliderIndex={sliderIndex}
-          handleOnkeyDown={handleOnKeyDown}
           viewIndex={viewIndex}
           isCurrIndex={isCurrIndex}
           routePath={snapshot.routePath}