Merge pull request #14 from oslabs-beta/BarGraph

Bar graph

Author: jimmally

src/app/RTKslices.tsx

@@ -433,6 +433,45 @@ export const mainSlice = createSlice({
       tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: action.payload }
 
     },
+
+    onHover: (state, action) => {
+      const { currentTab, port } = state;
+
+      port.postMessage({
+        action: 'onHover',
+        payload: action.payload,
+        tabId: currentTab,
+      });
+    },
+
+    onHoverExit: (state, action) => {
+      const { currentTab, port } = state;
+
+      port.postMessage({
+        action: 'onHoverExit',
+        payload: action.payload,
+        tabId: currentTab,
+      });
+    },
+
+    save: (state, action) => {
+      const { currentTab, tabs } = state;
+
+      const { newSeries, newSeriesName } = action.payload;
+        if (!tabs[currentTab].seriesSavedStatus) {
+          tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'inputBoxOpen' };
+        }
+        // Runs if series name input box is active.
+        // Updates chrome local storage with the newly saved series. Console logging the seriesArray grabbed from local storage may be helpful.
+        if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
+          //Set a type for seriesArray 10/04/2023
+          let seriesArray: any = localStorage.getItem('project');
+          seriesArray = seriesArray === null ? [] : JSON.parse(seriesArray);
+          newSeries.name = newSeriesName;
+          seriesArray.push(newSeries);
+          localStorage.setItem('project', JSON.stringify(seriesArray));
+          tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'saved' };
+        },
     toggleExpanded: (state, action) => {
       const { tabs, currentTab } = state;
       // find correct node from currLocation and toggle isExpanded
@@ -490,6 +529,9 @@ export const {
   toggleMode,
   importSnapshots,
   tutorialSaveSeriesToggle,
+  onHover,
+  onHoverExit,
+  save,
   toggleExpanded,
   deleteSeries
 } =  mainSlice.actions

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

@@ -8,8 +8,9 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeSet1 } from 'd3-scale-chromatic';
-import { onHover, onHoverExit, save } from '../../../actions/actions';
-import { useStoreContext } from '../../../store';
+import { onHover, onHoverExit, save } from '../../../RTKslices';
+// import { useStoreContext } from '../../../store';
+import { useDispatch, useSelector } from 'react-redux';
 import { snapshot, TooltipData, Margin, BarGraphProps } from '../../../FrontendTypes';
 
 /* DEFAULTS */
@@ -32,7 +33,10 @@ const tooltipStyles = {
 };
 
 const BarGraph = (props: BarGraphProps): JSX.Element => {
-  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const dispatch = useDispatch();
+  // const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const { tabs, currentTab } = useSelector((state: any) => state.main);
+
   const {
     width, // from stateRoute container
     height, // from stateRoute container