refactor(web-ts-results): replace redux with zustand

Author: nakrovati

webdriver-ts-results/package-lock.json

@@ -8,8 +8,7 @@
     "plotly.js-cartesian-dist": "2.18.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
-    "redux": "^4.2.1"
+    "zustand": "^4.4.1"
   },
   "scripts": {
     "start": "webpack serve --mode development -c webpack.config.dev.js",

webdriver-ts-results/package.json

@@ -8,9 +8,8 @@ import {
 import CpuResultsTable from "./tables/CpuResultsTable";
 import MemResultsTable from "./tables/MemResultsTable";
 import StartupResultsTable from "./tables/StartupResultsTable";
-import { useDispatch, useSelector } from "react-redux";
-import { sort, State } from "../reducer";
 import { benchmarks } from "../results";
+import { useRootStore } from "../reducer";
 
 const BoxPlotTable = React.lazy(
   () => import(/* webpackChunkName: "BoxPlotTable" */ "./BoxPlotTable"),
@@ -34,14 +33,13 @@ const ResultTable = ({ type }: Props) => {
     },
   };
 
-  const dispatch = useDispatch();
+  const data = useRootStore((state) => state.resultTables[type]);
+  const currentSortKey = useRootStore((state) => state.sortKey);
+  const displayMode = useRootStore((state) => state.displayMode);
+  const cpuDurationMode = useRootStore((state) => state.cpuDurationMode);
+  const sort = useRootStore((state) => state.sort);
 
-  const data = useSelector((state: State) => state.resultTables[type]);
-  const currentSortKey = useSelector((state: State) => state.sortKey);
-  const displayMode = useSelector((state: State) => state.displayMode);
-  const cpuDurationMode = useSelector((state: State) => state.cpuDurationMode);
-
-  const sortBy = (sortKey: string) => dispatch(sort(sortKey));
+  const sortBy = (sortKey: string) => sort(sortKey);
 
   if (
     !data ||

webdriver-ts-results/src/components/ResultTable.tsx

@@ -1,13 +1,6 @@
 import React from "react";
-import { useSelector, useDispatch } from "react-redux";
 import { BenchmarkType } from "../../../Common";
-import {
-  areAllBenchmarksSelected,
-  isNoneBenchmarkSelected,
-  selectBenchmark,
-  selectAllBenchmarks,
-  State,
-} from "../../../reducer";
+import { useRootStore } from "../../../reducer";
 import DropDownContents from "../../DropDown/DropDownContents";
 import BenchmarkSelectorList from "./BenchmarkSelectorList";
 
@@ -19,32 +12,30 @@ interface Props {
 const BenchmarkSelectorCategory = ({ label, benchmarkType }: Props) => {
   console.log("BenchmarkSelectorCategory");
 
-  const dispatch = useDispatch();
-
-  const benchmarks = useSelector(
-    (state: State) => state.benchmarkLists[benchmarkType],
-  );
-  const selectedBenchmarks = useSelector(
-    (state: State) => state.selectedBenchmarks,
+  const benchmarks = useRootStore(
+    (state) => state.benchmarkLists[benchmarkType],
   );
-  const isNoneSelected = useSelector((state: State) =>
-    isNoneBenchmarkSelected(state, benchmarkType),
+  const selectedBenchmarks = useRootStore((state) => state.selectedBenchmarks);
+  const isNoneSelected = useRootStore((state) => state.isNoneBenchmarkSelected);
+  const areAllSelected = useRootStore(
+    (state) => state.areAllBenchmarksSelected,
   );
-  const areAllSelected = useSelector((state: State) =>
-    areAllBenchmarksSelected(state, benchmarkType),
+  const selectAllBenchmarks = useRootStore(
+    (state) => state.selectAllBenchmarks,
   );
+  const selectBenchmark = useRootStore((state) => state.selectBenchmark);
 
   return (
     <DropDownContents
-      isNoneSelected={isNoneSelected}
-      areAllSelected={areAllSelected}
-      selectNone={() => dispatch(selectAllBenchmarks(benchmarkType, false))}
-      selectAll={() => dispatch(selectAllBenchmarks(benchmarkType, true))}
+      isNoneSelected={isNoneSelected(benchmarkType)}
+      areAllSelected={areAllSelected(benchmarkType)}
+      selectNone={() => selectAllBenchmarks(benchmarkType, false)}
+      selectAll={() => selectAllBenchmarks(benchmarkType, true)}
     >
       <h3>{label}</h3>
       <BenchmarkSelectorList
         isSelected={(benchmark) => selectedBenchmarks.has(benchmark)}
-        select={(benchmark, add) => dispatch(selectBenchmark(benchmark, add))}
+        select={(benchmark, add) => selectBenchmark(benchmark, add)}
         benchmarks={benchmarks}
       />
     </DropDownContents>

webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorCategory.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 import { useCallback } from "react";
 import { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { setStateFromClipboard, State } from "../../reducer";
+import { useRootStore } from "../../reducer";
 import PasteIcon from "../../assets/icons/PasteIcon";
 import CopyIcon from "../../assets/icons/CopyIcon";
 
 const CopyPasteSelection = () => {
   console.log("CopyPasteSelection");
 
-  const dispatch = useDispatch();
-
-  const state = useSelector((state: State) => state);
+  const state = useRootStore((state) => state);
+  const setStateFromClipboard = useRootStore(
+    (state) => state.setStateFromClipboard,
+  );
 
   const handlePasteError = (error: Error) => {
     alert("Sorry - couldn't parse pasted selection");
@@ -22,12 +22,12 @@ const CopyPasteSelection = () => {
     (text: string) => {
       try {
         const parsedState = JSON.parse(text);
-        dispatch(setStateFromClipboard(parsedState));
+        setStateFromClipboard(parsedState);
       } catch (error) {
         handlePasteError(error as Error);
       }
     },
-    [dispatch],
+    [setStateFromClipboard],
   );
 
   const handleClipboardPaste = useCallback(