test changes for RTK update

Co-authored-by: ctstamper <[email protected]>
Co-authored-by: jimmally <[email protected]>
Co-authored-by: kelvinmirhan <[email protected]>

Author: 4 people

package.json

@@ -186,6 +186,7 @@
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
     "@mui/styled-engine-sc": "^5.12.0",
+    "@reduxjs/toolkit": "^1.9.6",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.3",
     "@visx/axis": "^1.0.0",
@@ -229,13 +230,15 @@
     "react-hover": "^2.0.0",
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
+    "react-redux": "^8.1.3",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.2.0",
     "react-spinners": "^0.11.0",
     "recoil": "0.0.10",
+    "redux": "^4.2.1",
     "styled-components": "^6.0.4",
     "util": "^0.12.4",
     "web-vitals": "^1.1.0",
     "yarn": "^1.22.19"
   }
-}
+}

src/app/RTKslices.tsx

@@ -0,0 +1,66 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { InitialStateProps } from './FrontendTypes';
+
+const initialState: InitialStateProps = { // we initialize what our initialState is here
+    port: null,
+    currentTab: null,
+    currentTitle: 'No Target',
+    tabs: {},
+    currentTabInApp: null,
+  };
+
+const findName = (index, obj) => {
+  // eslint-disable-next-line eqeqeq
+  if (obj && obj.index == index) {
+    return obj.name;
+  }
+  const objChildArray = [];
+  if (obj) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const objChild of obj.children) {
+      objChildArray.push(findName(index, objChild));
+    }
+  }
+  // eslint-disable-next-line no-restricted-syntax
+  for (const objChildName of objChildArray) {
+    if (objChildName) {
+      return objChildName;
+    }
+  }
+};
+
+export const historySlice = createSlice({
+  name: 'history',
+  initialState: initialState,
+  reducers: {
+    changeView: (state, action) => {
+      const {tabs, currentTab} = state;
+      const {viewIndex} = tabs[currentTab] || {};
+
+      tabs[currentTab].viewIndex = viewIndex === action.payload ? -1 : action.payload;
+    },
+    changeSlider: (state, action) => {
+      const { port, currentTab, tabs } = state;
+      const { hierarchy, snapshots } = tabs[currentTab] || {};
+
+      const nameFromIndex = findName(action.payload, hierarchy);
+
+      port.postMessage({
+        action: 'jumpToSnap',
+        payload: snapshots[action.payload],
+        index: action.payload,
+        name: nameFromIndex,
+        tabId: currentTab,
+      });
+      
+      tabs[currentTab].sliderIndex = action.payload;
+    },
+    setCurrentTabInApp: (state, action) => {
+      state.currentTabInApp = action.payload;
+    },
+  },
+});
+
+
+
+export const { changeView, changeSlider, setCurrentTabInApp } = historySlice.actions;

src/app/RTKstore.tsx

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';      //Import store from redux tool kit
+import { historySlice } from './RTKslices'
+
+//Export Store 
+export const store = configureStore({
+    reducer: {
+        history: historySlice.reducer
+    }
+        
+});

src/app/components/StateRoute/History.tsx

@@ -6,9 +6,13 @@ import React, { useEffect } from 'react';
 import { diff, formatters } from 'jsondiffpatch';
 import * as d3 from 'd3';
 import { DefaultMargin } from '../../FrontendTypes';
-import { changeView, changeSlider, setCurrentTabInApp } from '../../actions/actions';
+//removed changeView from line 11 and added it as an import on line 16 from RTKSlices
+// import { changeView, changeSlider,setCurrentTabInApp } from '../../actions/actions';
 import { useStoreContext } from '../../store';
-
+//importing these methods for RTK
+import { useSelector, useDispatch } from 'react-redux';
+//import the relevant actions that are used within this file for the slice we are creating
+import { changeView, changeSlider, setCurrentTabInApp } from '../../RTKslices'
 /*
   Render's history page after history button has been selected. Allows user to traverse state history and relevant state branches.
 */
@@ -32,7 +36,14 @@ function History(props: Record<string, unknown>): JSX.Element {
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
     snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
   } = props;
-  const [, dispatch] = useStoreContext(); // use the dispatch that is connected with our storeContext
+  
+  //Commented out dispatch: 10/03/23 3:18 PM from original
+  // const [, dispatch] = useStoreContext(); // use the dispatch that is connected with our storeContext
+  
+  //here we are adding useSelector and useDispatch for RTK state conversion
+  const dispatch = useDispatch();
+  const currentTab = useSelector(state => state.history.currentTab)
+  const tabs = useSelector(state => state.history.tabs)
 
   const svgRef = React.useRef(null);
   const root = JSON.parse(JSON.stringify(hierarchy)); // why do we stringify and then parse our hierarchy back to JSON? (asked 7/31/23)

src/app/index.tsx

@@ -4,11 +4,17 @@ import { createRoot } from 'react-dom/client';
 import App from './components/App';
 import './styles/main.scss';
 
+//adding this line below 11:35 AM 10/03/23
+import {store} from './RTKstore'; //imported RTK Store
+import {Provider} from 'react-redux'; //imported Provider 
+
 //Updated rendering sytax for React 18
 const root = createRoot(document.getElementById("root"));
 root.render(
   // Strict mode is for developers to better track best practices 
   // <StrictMode>
+  <Provider store={store}>
     <App/>
+    </Provider>
   // </StrictMode>
 );