minimized prop drilling with sidebar context

dqualizer · Aug 15, 2024 · fc0e1e9 · fc0e1e9
1 parent add02e9
commit fc0e1e9
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 100 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/src/app/providers/SidebarContext.tsx b/src/app/providers/SidebarContext.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { createContext, useContext, useState } from "react";
+
+type ContextType = {
+  scenarioModeState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  rqaExplorerState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  loadTestSpecifierState: [
+    boolean,
+    React.Dispatch<React.SetStateAction<boolean>>,
+  ];
+  resilienceTestSpecifierState: [
+    boolean,
+    React.Dispatch<React.SetStateAction<boolean>>,
+  ];
+  monitoringSpecifierState: [
+    boolean,
+    React.Dispatch<React.SetStateAction<boolean>>,
+  ];
+};
+
+const Context = createContext<ContextType>({
+  scenarioModeState: [false, () => {}],
+  rqaExplorerState: [false, () => {}],
+  loadTestSpecifierState: [false, () => {}],
+  resilienceTestSpecifierState: [false, () => {}],
+  monitoringSpecifierState: [false, () => {}],
+});
+
+export const SideBarProvider = ({
+  children,
+}: { children: React.ReactNode }) => {
+  const scenarioModeState = useState(false);
+  const rqaExplorerState = useState(false);
+  const loadTestSpecifierState = useState(false);
+  const resilienceTestSpecifierState = useState(false);
+  const monitoringSpecifierState = useState(false);
+
+  return (
+    <Context.Provider
+      value={{
+        scenarioModeState,
+        rqaExplorerState,
+        loadTestSpecifierState,
+        resilienceTestSpecifierState,
+        monitoringSpecifierState,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+};
+
+export const useSideBarContext = () => {
+  return useContext(Context);
+};
diff --git a/src/components/ScenarioEditor.tsx b/src/components/ScenarioEditor.tsx
@@ -1,26 +1,23 @@
+import { useSideBarContext } from "@/app/providers/SidebarContext";
 import Conditional from "@/components/Conditional";
 import LoadTestSpecifier from "@/components/loadtest/LoadtestSpecifier";
 import { ResilienceTestSpecifier } from "@/components/resilience-test-specifier/ResilienceTestSpecifier";
-import { type Dispatch, type SetStateAction, useState } from "react";
+import { useState } from "react";
 import type { Edge } from "reactflow";
 import MonitoringSpecifier from "./monitoring/MonitoringSpecifier";
 import { RqaList } from "./rqaExplorer/RqaList";
 
-export default function ScenarioEditor({
-  showLoadTestSpecifier,
-  showResilienceTestSpecifier,
-  rqaExplorerShow,
-  showMonitoringSpecifier,
-  setShowLoadTestSpecifier,
-  setShowResilienceTestSpecifier,
-}: {
-  showLoadTestSpecifier: boolean;
-  showResilienceTestSpecifier: boolean;
-  rqaExplorerShow: boolean;
-  showMonitoringSpecifier: boolean;
-  setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
-  setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
-}) {
+export default function ScenarioEditor() {
+  const {
+    rqaExplorerState: [showRqaExplorer],
+    loadTestSpecifierState: [showLoadTestSpecifier, setShowLoadTestSpecifier],
+    resilienceTestSpecifierState: [
+      showResilienceTestSpecifier,
+      setShowResilienceTestSpecifier,
+    ],
+    monitoringSpecifierState: [showMonitoringSpecifier],
+  } = useSideBarContext();
+
   const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
 
   return (
@@ -31,7 +28,7 @@ export default function ScenarioEditor({
       <Conditional showWhen={showResilienceTestSpecifier}>
         <ResilienceTestSpecifier selectedEdge={selectedEdge} />
       </Conditional>
-      <Conditional showWhen={rqaExplorerShow}>
+      <Conditional showWhen={showRqaExplorer}>
         <RqaList
           loadTestSpecifier={setShowLoadTestSpecifier}
           resilienceTestSpecifier={setShowResilienceTestSpecifier}

diff --git a/src/components/ScenarioEditorTaskbar.tsx b/src/components/ScenarioEditorTaskbar.tsx
@@ -1,17 +1,14 @@
+import { useSideBarContext } from "@/app/providers/SidebarContext";
 import EqualizerIcon from "@mui/icons-material/Equalizer";
-import type { Dispatch, SetStateAction } from "react";
 
-export default function ScenarioEditorTaskbar({
-  setRqaExplorerShow,
-  setShowLoadTestSpecifier,
-  setShowResilienceTestSpecifier,
-  setShowMonitoringSpecifier,
-}: {
-  setRqaExplorerShow: Dispatch<SetStateAction<boolean>>;
-  setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
-  setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
-  setShowMonitoringSpecifier: Dispatch<SetStateAction<boolean>>;
-}) {
+export default function ScenarioEditorTaskbar() {
+  const {
+    rqaExplorerState: [, setRqaExplorerShow],
+    loadTestSpecifierState: [, setShowLoadTestSpecifier],
+    resilienceTestSpecifierState: [, setShowResilienceTestSpecifier],
+    monitoringSpecifierState: [, setShowMonitoringSpecifier],
+  } = useSideBarContext();
+
   return (
     <>
       <button

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,50 +1,26 @@
 "use client";
 
 import "@/language/icon/icons.css";
-import type { Edge, Node } from "reactflow";
 
-import Taskbar from "@/components/Taskbar";
-import { useState } from "react";
+import {
+  SideBarProvider,
+  useSideBarContext,
+} from "@/app/providers/SidebarContext";
 import ScenarioEditor from "./ScenarioEditor";
 import ScenarioExplorer from "./ScenarioExplorer";
+import Taskbar from "./Taskbar";
 
-export default function Sidebar({
-  nodes,
-  edges,
-}: {
-  nodes: Node[];
-  edges: Edge[];
-}) {
-  // hideComponentOnViewportClick(loadtestRef, setShowLoadTestSpecifier);
-  const [scenarioMode, setScenarioMode] = useState(false);
-  const [rqaExplorer, setRqaExplorer] = useState(false);
-  const [showLoadTestSpecifier, setShowLoadTestSpecifier] = useState(false);
-  const [showResilienceTestSpecifier, setShowResilienceTestSpecifier] =
-    useState(false);
-  const [showMonitoringSpecifier, setShowMonitoringSpecifier] = useState(false);
+export default function Sidebar() {
+  const {
+    scenarioModeState: [showScenarioExplorer],
+  } = useSideBarContext();
 
   return (
     <div className="sidebar">
-      <Taskbar
-        scenarioMode={scenarioMode}
-        setScenarioMode={setScenarioMode}
-        setRqaExplorerShow={setRqaExplorer}
-        setShowLoadTestSpecifier={setShowLoadTestSpecifier}
-        setShowResilienceTestSpecifier={setShowResilienceTestSpecifier}
-        setShowMonitoringSpecifier={setShowMonitoringSpecifier}
-      />
-      {scenarioMode ? (
-        <ScenarioExplorer />
-      ) : (
-        <ScenarioEditor
-          showLoadTestSpecifier={showLoadTestSpecifier}
-          showResilienceTestSpecifier={showResilienceTestSpecifier}
-          rqaExplorerShow={rqaExplorer}
-          showMonitoringSpecifier={showMonitoringSpecifier}
-          setShowLoadTestSpecifier={setShowLoadTestSpecifier}
-          setShowResilienceTestSpecifier={setShowResilienceTestSpecifier}
-        />
-      )}
+      <SideBarProvider>
+        <Taskbar />
+        {showScenarioExplorer ? <ScenarioExplorer /> : <ScenarioEditor />}
+      </SideBarProvider>
     </div>
   );
 }
diff --git a/src/components/Taskbar.tsx b/src/components/Taskbar.tsx
@@ -1,45 +1,30 @@
+import { useSideBarContext } from "@/app/providers/SidebarContext";
 import CloudOffIcon from "@mui/icons-material/CloudOff";
 import CloudQueueIcon from "@mui/icons-material/CloudQueue";
-import type { Dispatch, SetStateAction } from "react";
 import ScenarioEditorTaskbar from "./ScenarioEditorTaskbar";
 import ScenarioExplorerTaskbar from "./ScenarioExporerTaskbar";
 
-export default function Taskbar({
-  scenarioMode,
-  setScenarioMode,
-  setRqaExplorerShow,
-  setShowLoadTestSpecifier,
-  setShowResilienceTestSpecifier,
-  setShowMonitoringSpecifier,
-}: {
-  scenarioMode: boolean;
-  setScenarioMode: Dispatch<SetStateAction<boolean>>;
-  setRqaExplorerShow: Dispatch<SetStateAction<boolean>>;
-  setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
-  setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
-  setShowMonitoringSpecifier: Dispatch<SetStateAction<boolean>>;
-}) {
+export default function Taskbar() {
+  const {
+    scenarioModeState: [showScenarioExplorer, setShowScenarioExplorer],
+  } = useSideBarContext();
+
   return (
     <div className="taskbar-container">
       <button
         type="button"
         className="change-mode"
-        onClick={() => setScenarioMode((prevState) => !prevState)}
+        onClick={() => setShowScenarioExplorer((prevState) => !prevState)}
       >
-        <div>{scenarioMode ? <CloudQueueIcon /> : <CloudOffIcon />}</div>
+        <div>
+          {showScenarioExplorer ? <CloudQueueIcon /> : <CloudOffIcon />}
+        </div>
       </button>
 
-      {scenarioMode ? (
+      {showScenarioExplorer ? (
         <ScenarioExplorerTaskbar />
       ) : (
-        <ScenarioEditorTaskbar
-          {...{
-            setRqaExplorerShow,
-            setShowLoadTestSpecifier,
-            setShowResilienceTestSpecifier,
-            setShowMonitoringSpecifier,
-          }}
-        />
+        <ScenarioEditorTaskbar />
       )}
     </div>
   );

diff --git a/src/components/analyzer/graph.tsx b/src/components/analyzer/graph.tsx
@@ -48,7 +48,7 @@ export default function Graph() {
         <Controls />
         <MiniMap />
       </ReactFlow>
-      <Sidebar nodes={nodes} edges={edges} />
+      <Sidebar />
     </>
   );
 }