Merge branch 'dev' into TravelContainerComponents

Author: jimmally

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/RTKslices.tsx

@@ -364,6 +364,7 @@ export const mainSlice = createSlice({
         tabs[currentTab].sliderIndex = 0;
         console.log('resetSlider: state end', current(state));
 
+
     },
 
 
@@ -388,40 +389,47 @@ export const mainSlice = createSlice({
         });
         console.log('Toggle Mode: state end', current(state));
 
+
     },
     importSnapshots: (state, action) => {
       console.log('importSnapshots: ', current(state));
 
       const { port, tabs, currentTab } = state;
-              // Log the value of tabs[currentTab].snapshots before the update
-              port.postMessage({
-                action: 'import',
-                payload: action.payload,
-                tabId: currentTab,
-              });
-      
-              const savedSnapshot = action.payload;
-      
-              tabs[currentTab].sliderIndex = savedSnapshot.sliderIndex;
-              tabs[currentTab].viewIndex = savedSnapshot.viewIndex;
-              tabs[currentTab].playing = false;
-      
-              // resets hierarchy to page last state recorded
-              tabs[currentTab].hierarchy.stateSnapshot = savedSnapshot.hierarchy.stateSnapshot;
-      
-              // resets hierarchy
-              tabs[currentTab].hierarchy.children = savedSnapshot.hierarchy.children;
-      
-              // resets snapshots to page last state recorded
-              tabs[currentTab].snapshots = savedSnapshot.snapshots;
-      
-              // resets currLocation to page last state recorded
-              tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
-              tabs[currentTab].index = savedSnapshot.index;
-              tabs[currentTab].currParent = savedSnapshot.currParent;
-              tabs[currentTab].currBranch = savedSnapshot.Branch;
-              tabs[currentTab].seriesSavedStatus = false;
-              console.log('importSnapshots: state end', current(state));
+
+      // Log the value of tabs[currentTab].snapshots before the update
+      port.postMessage({
+        action: 'import',
+        payload: action.payload,
+        tabId: currentTab,
+      });
+
+      const savedSnapshot = action.payload;
+
+      tabs[currentTab].sliderIndex = savedSnapshot.sliderIndex;
+      tabs[currentTab].viewIndex = savedSnapshot.viewIndex;
+      tabs[currentTab].playing = false;
+
+      // resets hierarchy to page last state recorded
+      tabs[currentTab].hierarchy.stateSnapshot = savedSnapshot.hierarchy.stateSnapshot;
+
+      // resets hierarchy
+      tabs[currentTab].hierarchy.children = savedSnapshot.hierarchy.children;
+
+      // resets snapshots to page last state recorded
+      tabs[currentTab].snapshots = savedSnapshot.snapshots;
+
+      // resets currLocation to page last state recorded
+      tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
+      tabs[currentTab].index = savedSnapshot.index;
+      tabs[currentTab].currParent = savedSnapshot.currParent;
+      tabs[currentTab].currBranch = savedSnapshot.Branch;
+      tabs[currentTab].seriesSavedStatus = false;
+      console.log('importSnapshots: state end', current(state));
+
+    },
+    tutorialSaveSeriesToggle: (state, action) => {
+      const { tabs, currentTab } = state;
+      tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: action.payload }
 
     }
   },
@@ -447,7 +455,8 @@ export const {
   moveBackward,
   resetSlider,
   toggleMode,
-  importSnapshots
+  importSnapshots,
+  tutorialSaveSeriesToggle
 } =  mainSlice.actions
 
 

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/components/StateRoute/History.tsx

@@ -33,7 +33,7 @@ function History(props: Record<string, unknown>): JSX.Element {
     height: totalHeight, // from ParentSize provided in StateRoute
     margin = defaultMargin,
     hierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
-    dispatch, // from useStoreContext in 'StateRoute'
+    // dispatch, // from useStoreContext in 'StateRoute'
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
     snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
   } = props;

src/app/components/StateRoute/StateRoute.tsx

@@ -11,7 +11,8 @@ import { ParentSize } from '@visx/responsive';
 import Tree from './Tree';
 import ComponentMap from './ComponentMap/ComponentMap';
 import { changeView, changeSlider } from '../../actions/actions';
-import { useStoreContext } from '../../store';
+// import { useStoreContext } from '../../store';
+import { useDispatch, useSelector } from 'react-redux';
 import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetrics from '../WebMetrics';
 import { StateRouteProps } from '../../FrontendTypes'
@@ -32,7 +33,11 @@ const StateRoute = (props: StateRouteProps) => {
     webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
     currLocation // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
-  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  // const [{ tabs, currentTab }, dispatch] = useStoreContext();
+
+  // Don't believe we need dispatch here because all it was used for was to prop drill, and I removed that functionality
+  // const dispatch = useDispatch();
+  const { tabs, currentTab } = useSelector((state: any) => state.main);
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
 
   const renderComponentMap = () => {
@@ -62,7 +67,8 @@ const StateRoute = (props: StateRouteProps) => {
               width={width} 
               height={height}
               hierarchy={hierarchy}
-              dispatch={dispatch}
+              // Commented out dispatch that was prop drilled as conversion to RTK might invalidate need for prop drilling to access dispatch
+              // dispatch={dispatch}
               sliderIndex={sliderIndex}
               viewIndex={viewIndex}
               currLocation={currLocation}

src/app/components/Tutorial.tsx

@@ -5,12 +5,13 @@
 import * as React from 'react';
 import { Component } from 'react';
 import 'intro.js/introjs.css';
-import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
+// import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
 import { TutorialProps, TutorialState, StepsObj } from '../FrontendTypes';
 import { Button } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 const { Steps } = require('intro.js-react'); //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. The package 'intro.js-react' is small React wrapper around Intro.js. The wrapper provides support for both steps and hints. https://introjs.com/docs/
-
+import { setCurrentTabInApp, tutorialSaveSeriesToggle } from '../RTKslices'
+import { useDispatch, useSelector } from 'react-redux';
 /*
   This is the tutorial displayed when the "How to use" button is clicked
   This needs to be a class component to be compatible with updateStepElement from intro.js
@@ -35,10 +36,13 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
   public refs: any;
 
   render(): JSX.Element {
-    const {
-      currentTabInApp, // 'currentTabInApp' from 'ButtonsContainer' after useStoreContext()
-      dispatch // 'dispatch' from 'ButtonsContainer' after useStoreContext()
-    } = this.props;
+    // const {
+    //   currentTabInApp, // 'currentTabInApp' from 'ButtonsContainer' after useStoreContext()
+    //   dispatch // 'dispatch' from 'ButtonsContainer' after useStoreContext()
+    // } = this.props;
+
+    const dispatch = useDispatch();
+    const currentTabInApp = useSelector((state: any) => state.main.currentTabInApp);
 
     // This updates the steps so that they can target dynamically rendered elements
     const onChangeHandler = (currentStepIndex: number) => { // takes in the current step and updates the tab[currentTab]'s seriesSavedStatus based on conditions and updates the element associated with the step.

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}

src/app/containers/ButtonsContainer.tsx

@@ -78,7 +78,10 @@ function ButtonsContainer(): JSX.Element {
         Upload
       </Button>
       {/* The component below renders a button for the tutorial walkthrough of Reactime */}
-      <Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
+      <Tutorial
+      //commented out so we can use useDispatch in Tutorial.tsx
+      //  dispatch={dispatch} 
+       currentTabInApp={currentTabInApp} />
     </div>
   );
 }