Merge branch 'dev' into BarGraph

Author: jimmally

src/app/RTKslices.tsx

@@ -1,5 +1,6 @@
 import { createSlice, current } from '@reduxjs/toolkit';
 import { InitialStateProps } from './FrontendTypes';
+import _ from 'lodash';
 
 const initialState: InitialStateProps = { // we initialize what our initialState is here
     port: null,
@@ -470,7 +471,38 @@ export const mainSlice = createSlice({
           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
+      const checkChildren = (node) => {
+        if (_.isEqual(node, action.payload))
+          node.isExpanded = !node.isExpanded;
+        else if (node.children) {
+          node.children.forEach(child => {
+            checkChildren(child);
+          });
         }
+      };
+      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 };
     }
   },
 })
@@ -499,7 +531,9 @@ export const {
   tutorialSaveSeriesToggle,
   onHover,
   onHoverExit,
-  save
+  save,
+  toggleExpanded,
+  deleteSeries
 } =  mainSlice.actions
 
 

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -18,8 +18,9 @@ import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
 import ToolTipDataDisplay from './ToolTipDataDisplay';
-import { toggleExpanded, setCurrentTabInApp } from '../../../actions/actions';
-import { useStoreContext } from '../../../store';
+import { toggleExpanded, setCurrentTabInApp } from '../../../RTKslices';
+// import { useStoreContext } from '../../../store';
+import { useDispatch } from 'react-redux';
 import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../FrontendTypes'
 
 const defaultMargin: DefaultMargin = {
@@ -41,7 +42,8 @@ export default function ComponentMap({
   const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'. 
   const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
   const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'. 
-  const [, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function to get access to our dispatch function
+  // const [, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function to get access to our dispatch function
+  const dispatch = useDispatch();
 
   const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
 

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/PerformanceVisx.tsx

@@ -8,8 +8,9 @@ import RenderingFrequency from './RenderingFrequency';
 import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
-import { useStoreContext } from '../../../store';
-import { setCurrentTabInApp } from '../../../actions/actions';
+// import { useStoreContext } from '../../../store';
+import { useDispatch, useSelector } from 'react-redux';
+import { setCurrentTabInApp } from '../../../RTKslices';
 import { PerfData, Series, PerformanceVisxProps } from '../../../FrontendTypes';
 
 const collectNodes = (snaps, componentName) => {
@@ -177,7 +178,9 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
     snapshots, // from 'tabs[currentTab]' object in 'MainContainer'
     hierarchy // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
-  const [{ currentTabInApp }, dispatch] = useStoreContext();
+  // const [{ currentTabInApp }, dispatch] = useStoreContext();
+  const dispatch = useDispatch();
+  const { currentTabInApp } = useSelector((state: any) => state.main);
   const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
   const [series, setSeries] = useState(true);

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/StateRoute/Tree.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import JSONTree from 'react-json-tree'; // React JSON Viewer Component
-import { setCurrentTabInApp } from '../../actions/actions';
-import { useStoreContext } from '../../store';
+import { setCurrentTabInApp } from '../../RTKslices';
+// import { useStoreContext } from '../../store';
+import { useDispatch } from 'react-redux';
 import { TreeProps } from '../../FrontendTypes';
 
 /*
@@ -43,7 +44,8 @@ const Tree = (props: TreeProps) => {
     currLocation // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
   // @ts-ignore
-  const [store, dispatch] = useStoreContext();
+  // const [store, dispatch] = useStoreContext();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(setCurrentTabInApp('tree')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'tree' to facilitate render.

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.
   }, []);