converted webmetrics.tsx and renderingfrequency.tsx

Author: AndrewByun

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