Merge pull request #8 from oslabs-beta/featurekelvin

changes to RTK for actionContainer and action component

Author: ctstamper

src/app/FrontendTypes.ts

@@ -159,7 +159,7 @@ export interface ActionProps {
   last: boolean;
   index: number;
   sliderIndex: number;
-  dispatch: (a: { type: string; payload: unknown }) => void;
+  // dispatch: (a: { type: string; payload: unknown }) => void;
   displayName: string;
   componentName: string;
   componentData: { actualDuration: number } | undefined;

src/app/components/Action.tsx

@@ -4,8 +4,9 @@
 
 import React from 'react';
 import ReactHover, { Trigger, Hover } from 'react-hover';
-import { changeView, changeSlider } from '../actions/actions';
+import { changeView, changeSlider } from '../RTKslices';
 import { ActionProps, OptionsCursorTrueWithMargin } from '../FrontendTypes';
+import { useDispatch } from 'react-redux';
 
 /*
   This render's the individual snapshot components on the left side column
@@ -27,13 +28,18 @@ import { ActionProps, OptionsCursorTrueWithMargin } from '../FrontendTypes';
  */
 
 const Action = (props: ActionProps): JSX.Element => {
+
+  //here we are adding useSelector and useDispatch for RTK state conversion
+  const dispatch = useDispatch();
+
   // We destructure the 'props' that were passed into this component
   const {
     selected, // boolean on whether the current index is the same as the viewIndex in 'ActionContainer'
     last, // boolean on (whether the view index is less than 0) AND if (the index is the same as the last snapshot's index value in hierarchyArr) in 'ActionContainer'
     index, // from snapshot.index in "ActionContainer's" 'hierarchyArr'
     sliderIndex, // from tabs[currentTab] object in 'ActionContainer'
-    dispatch,
+    //commented out dispatch that was prop drilled as conversion to RTX might invalidate need for prop drilling to access dispatch
+    // dispatch,
     displayName, // from snapshot.displayName in "ActionContainer's" 'hierarchyArr'
     componentData, // from snapshot.componentData in "ActionContainer's" 'hierarchyArr'
     viewIndex, // from tabs[currentTab] object in 'ActionContainer'

src/app/containers/ActionContainer.tsx

@@ -137,7 +137,9 @@ function ActionContainer(props): JSX.Element {
           componentData={snapshot.componentData}
           selected={selected}
           last={last}
-          dispatch={dispatch}
+          //not sure if we need to prop drill dispatch anymore as we can import it directly within action component
+          //line 142 commented out for this reason above
+          // dispatch={dispatch}
           sliderIndex={sliderIndex}
           handleOnkeyDown={handleOnKeyDown}
           viewIndex={viewIndex}