Finished migrating StateRoute to RTK, also editted what props are received in History

Author: Christopher Stamper

src/app/RTKslices.tsx

@@ -305,15 +305,15 @@ export const mainSlice = createSlice({
       const { snapshots, sliderIndex} = tabs[currentTab] || {};
 
        // eslint-disable-next-line max-len
-        // resets name to 0 to send to background.js the current name in the jump action
-        port.postMessage({
-          action: 'jumpToSnap',
-          index: 0,
-          name: 0,
-          payload: snapshots[0],
-          tabId: currentTab,
-        });
-        tabs[currentTab].sliderIndex = 0;
+      // resets name to 0 to send to background.js the current name in the jump action
+      port.postMessage({
+        action: 'jumpToSnap',
+        index: 0,
+        name: 0,
+        payload: snapshots[0],
+        tabId: currentTab,
+      });
+      tabs[currentTab].sliderIndex = 0;
     },
 
 
@@ -323,51 +323,51 @@ export const mainSlice = createSlice({
       const { port, tabs, currentTab } = state;
       const {mode} = tabs[currentTab] || {};
       mode[action.payload] = !mode[action.payload];
-        const newMode = mode[action.payload];
-        let actionText;
-        switch (action.payload) {
-          case 'paused':
-            actionText = 'setPause';
-          default:
-        }
-        port.postMessage({
-          action: actionText,
-          payload: newMode,
-          tabId: currentTab,
-        });
+      const newMode = mode[action.payload];
+      let actionText;
+      switch (action.payload) {
+        case 'paused':
+          actionText = 'setPause';
+        default:
+      }
+      port.postMessage({
+        action: actionText,
+        payload: newMode,
+        tabId: currentTab,
+      });
     },
     importSnapshots: (state, action) => {
       console.log('importSnapshots')
       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;
-    }
+      // 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;
+    },
   },
 })
 

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}