Merge pull request #12 from oslabs-beta/featurekelvin

RTK conversion for BarGraphComparison and BarGraphComparisonActions

Author: kelvinmirhan

src/app/RTKslices.tsx

@@ -431,6 +431,23 @@ export const mainSlice = createSlice({
       const { tabs, currentTab } = state;
       tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: action.payload }
 
+    },
+    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 };
     }
   },
 })
@@ -456,7 +473,8 @@ export const {
   resetSlider,
   toggleMode,
   importSnapshots,
-  tutorialSaveSeriesToggle
+  tutorialSaveSeriesToggle,
+  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