Migrated ComponentMap, PerformanceVisx, and Tree to RTK

Author: Christopher Stamper

src/app/RTKslices.tsx

@@ -448,6 +448,23 @@ export const mainSlice = createSlice({
       checkChildren(tabs[currentTab].currLocation.stateSnapshot);
     },
 
+    deleteSeries: (state) => {
+      const { tabs, currentTab } = state;
+      const allStorage = () => {
+        const keys = Object.keys(localStorage);
+        let i = keys.length;
+        while (i--) {
+          localStorage.removeItem(keys[i]);
+        }
+      };
+      allStorage();
+      Object.keys(tabs).forEach((tab) => {
+        tabs[tab] = {
+          ...tabs[tab],
+        };
+      });
+      tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: false };
+    }
   },
 })
 
@@ -474,6 +491,7 @@ export const {
   importSnapshots,
   tutorialSaveSeriesToggle,
   toggleExpanded,
+  deleteSeries
 } =  mainSlice.actions
 
 

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -15,8 +15,10 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import { useTheme } from '@mui/material/styles';
 import { Button, InputLabel } from '@mui/material';
-import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
-import { useStoreContext } from '../../../store';
+import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../RTKslices';
+// import { useStoreContext } from '../../../store';
+//importing useSelector and useDispatch for rtk conversion
+import { useSelector, useDispatch } from 'react-redux';
 import {
   snapshot,
   TooltipData,
@@ -46,7 +48,12 @@ const tooltipStyles = {
 };
 
 const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
-  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  //commented out line 51 to add hooks for RTK transition
+  // const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const dispatch = useDispatch();
+  const tabs = useSelector(state => state.main.tabs);
+  const currentTab = useSelector(state => state.main.currentTab);
+
   const {
     width, // from ParentSize provided in StateRoute
     height, // from ParentSize provided in StateRoute

src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx

@@ -14,8 +14,10 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import { useTheme } from '@mui/material/styles';
 import { Button } from '@mui/material';
-import { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
-import { useStoreContext } from '../../../store';
+import { deleteSeries, setCurrentTabInApp } from '../../../RTKslices';
+// import { useStoreContext } from '../../../store';
+//importing useSelector and useDispatch for rtk conversion
+import { useDispatch } from 'react-redux';
 import { TooltipData, Margin, BarGraphComparisonAction, ActionObj } from '../../../FrontendTypes';
 
 /* DEFAULTS */
@@ -38,7 +40,9 @@ const tooltipStyles = {
 };
 
 const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
-  const [dispatch] = useStoreContext(); // used to get the dispatch function from our storeContext
+  //commented out line 44 to add hooks for RTK transition
+  // const [dispatch] = useStoreContext(); // used to get the dispatch function from our storeContext
+  const dispatch = useDispatch();
   const {
     width, // from ParentSize provided in StateRoute
     height, // from ParentSize provided in StateRoute

src/app/components/StateRoute/PerformanceVisx/RenderingFrequency.tsx

@@ -2,17 +2,19 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect } from 'react';
-import { onHover, onHoverExit, setCurrentTabInApp } from '../../../actions/actions';
-import { useStoreContext } from '../../../store';
+// import { onHover, onHoverExit, setCurrentTabInApp } from '../../../actions/actions';
+import { setCurrentTabInApp } from '../../../RTKslices';
+// import { useStoreContext } from '../../../store';
+import { useDispatch, useSelector } from 'react-redux';
 
 /*
   
 */
 
 const RenderingFrequency = (props) => {
   const perfData = props.data;
-  const [store, dispatch] = useStoreContext();
-
+  // const [store, dispatch] = useStoreContext();
+  const dispatch = useDispatch();
   useEffect(() => {
     dispatch(setCurrentTabInApp('performance-comparison')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance-comparison' to facilitate render.
   }, []);
@@ -41,7 +43,9 @@ const RenderingFrequency = (props) => {
 
 const ComponentCard = (props): JSX.Element => {
   const { componentName, stateType, averageRenderTime, renderFrequency, information } = props;
-  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  // const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  // const tabs = useSelector((state:any)=>state.main.tabs)
+  // const currentTab = useSelector((state:any)=>state.main.currentTab);
   const [expand, setExpand] = useState(false);
 
   // render time for each component from each snapshot

src/app/components/WebMetrics.tsx

@@ -2,14 +2,16 @@ import React, { useEffect } from 'react';
 import Charts from 'react-apexcharts';
 import ReactHover, { Trigger, Hover } from 'react-hover';
 import { OptionsCursorTrueWithMargin } from '../FrontendTypes';
-import { setCurrentTabInApp } from '../actions/actions';
-import { useStoreContext } from '../store';
-
+// import { setCurrentTabInApp } from '../actions/actions';
+import { setCurrentTabInApp } from '../RTKslices'
+// import { useStoreContext } from '../store';
+import { useDispatch } from 'react-redux';
 /*
   Used to render a single radial graph on the 'Web Metrics' tab
 */
 
 const radialGraph = (props) => {
+  const dispatch = useDispatch();
   const state = {
     series: [props.series], // series appears to be the scale at which data is displayed based on the type of webMetrics measured.
     options: {
@@ -92,7 +94,8 @@ const radialGraph = (props) => {
     },
   };
 
-  const [store, dispatch] = useStoreContext(); // used to get the dispatch function from our storeContext
+  // const [store, dispatch] = useStoreContext(); // used to get the dispatch function from our storeContext
+
   useEffect(() => { 
     dispatch(setCurrentTabInApp('webmetrics')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
   }, []);