Dashboard.view.tsx to handle rendering and Dashboard.tsx to handle state

src/components/Dashboard/Dashboard.models.ts

@@ -50,11 +50,12 @@ export interface DashboardConfig {
   };
 }
 
-export interface DashboardProps {
+export interface DashboardViewProps {
   config: DashboardConfig;
   data: ReportData;
+  state: DashboardState;
+  stateSetters: DashboardStateSetters;
   isFetching: boolean;
-  onFlowChange?: (state: DashboardState) => void;
 }
 
 

src/components/Dashboard/Dashboard.view.tsx

@@ -8,88 +8,22 @@ import {
   Button
 } from "@mui/material";
 import { useTheme, alpha } from "@mui/material/styles";
-import { DashboardProps, DashboardState, DashboardStateSetters, DashboardFlow } from "./Dashboard.models";
+import { DashboardViewProps } from "./Dashboard.models";
 
-export default function Dashboard({
+export default function DashboardView({
   config,
   data,
+  state,
+  stateSetters,
   isFetching,
-  onFlowChange,
-}: DashboardProps) {
+}: DashboardViewProps) {
   const theme = useTheme();
   const themeMode = theme.palette.mode;
 
-  const [state, setState] = React.useState<DashboardState>({
-    flow: "outflows",
-    periodType: "rolling",
-    selectedPeriodId: null,
-    selectedGroupKey: null,
-    comparison: false,
-  });
-
-  const toggleFlow = () => {
-    setState(prev => {
-      const nextFlow: DashboardFlow = prev.flow === "outflows" ? "inflows" : "outflows";
-      const nextState: DashboardState = {
-        ...prev,
-        flow: nextFlow,
-        selectedGroupKey: null,
-        selectedPeriodId: null,
-      };
-      onFlowChange?.(nextState);
-      return nextState;
-    });
-  };
-
-  const handleFlowChange = (
-    _event: React.MouseEvent<HTMLElement>,
-    newFlow: DashboardFlow | null
-  ) => {
-    if (newFlow !== null && newFlow !== state.flow) {
-      setState(prev => {
-        const nextState: DashboardState = {
-          ...prev,
-          flow: newFlow,
-          selectedGroupKey: null,
-          selectedPeriodId: null,
-        };
-        onFlowChange?.(nextState);
-        return nextState;
-      });
-    }
-  };
-
-  const togglePeriodType = () => {
-    setState(prev => ({
-      ...prev,
-      periodType: prev.periodType === "rolling" ? "calendar" : "rolling",
-    }));
-  };
-
-  const toggleComparison = () => {
-    setState(prev => ({
-      ...prev,
-      comparison: !prev.comparison,
-    }));
-  };
-
-  const setSelectedPeriodId = (selectedPeriodId: typeof state.selectedPeriodId) => {
-    setState(prev => ({ ...prev, selectedPeriodId }));
-  };
-
-  const setSelectedGroupKey = (groupKey: typeof state.selectedGroupKey) => {
-    setState(prev => ({ ...prev, selectedGroupKey: groupKey }));
-  };
-
-  const stateSetters: DashboardStateSetters = {
-    togglePeriodType,
-    toggleComparison,
-    toggleFlow,
-    setSelectedPeriodId,
-    setSelectedGroupKey,
-  };
-
-  const { flow, selectedGroupKey } = state;
+  const {
+    flow,
+    selectedGroupKey,
+  } = state;
 
   const colors = React.useMemo(() => {
     const palette = config.style.palette[flow];
@@ -145,7 +79,7 @@ export default function Dashboard({
         <ToggleButtonGroup
           value={flow}
           exclusive
-          onChange={handleFlowChange}
+          onChange={stateSetters.toggleFlow}
           sx={{
             borderRadius: 3,
             overflow: "hidden",
@@ -169,7 +103,7 @@ export default function Dashboard({
           <Button
             size="small"
             sx={{ mt: 1, textTransform: "none" }}
-            onClick={() => setSelectedGroupKey(null)}
+            onClick={() => stateSetters.setSelectedGroupKey(null)}
           >
             Clear Drill-down
           </Button>

src/components/Dashboard/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./Dashboard";
+export { default } from "./Dashboard.view";
 export * from "./Dashboard.models";