Use onClick-properties to pass callbacks and avoid usage of built-in …

…MouseEventHandlers
jgiven · Mar 1, 2024 · 03cd18c · 03cd18c
1 parent 1f5b309
commit 03cd18c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 41 deletions.
diff --git a/new/src/components/ScenarioOverview/ScenarioHead.tsx b/new/src/components/ScenarioOverview/ScenarioHead.tsx
@@ -18,7 +18,7 @@ import AddIcon from "@mui/icons-material/Add";
 import PrintOutlinedIcon from "@mui/icons-material/PrintOutlined";
 import BookmarkOutlinedIcon from "@mui/icons-material/BookmarkOutlined";
 import { createReportCircle } from "./DonutChart";
-import React, { MouseEventHandler } from "react";
+import { PropsWithChildren } from "react";
 import { processWords } from "../../wordProcessor";
 import { useSearchParams } from "react-router-dom";
 import {
@@ -29,26 +29,26 @@ import {
     StyledLink
 } from "./ScenarioHead.styles";
 
+export enum HeaderIconType {}
+
 export interface ScenarioOverviewProps {
     statistic: ReportStatistics;
-    targets: ActionButtonTargets;
+    onCollapseButtonClick: () => void;
+    onExpandButtonClick: () => void;
+    onPrintButtonClick: () => void;
+    onBookmarkButtonClick: () => void;
     headers: Headers;
 }
 
-interface ActionButtonTargets {
-    minusButtonTarget: MouseEventHandler;
-    plusButtonTarget: MouseEventHandler;
-    printButtonTarget: MouseEventHandler;
-    bookmarkButtonTarget: MouseEventHandler;
-}
-
 interface Headers {
     aboveHeader?: string;
     header: string;
     belowHeader?: string;
 }
 
 export function ScenarioHead(props: ScenarioOverviewProps) {
+    const { statistic, headers, ...iconClickHandlers } = props;
+
     return (
         <div style={{ display: "flex" }}>
             <StyledContent>
@@ -61,12 +61,12 @@ export function ScenarioHead(props: ScenarioOverviewProps) {
                             alignItems="flex-start"
                         >
                             <Grid item xs={12} sm={8}>
-                                <ScenarioTitles headers={props.headers} />
+                                <ScenarioTitles headers={headers} />
                             </Grid>
                             <Grid item sx={{ flexGrow: 1 }} />
                             <Grid item>{createReportCircle(props)}</Grid>
                             <Grid item>
-                                <ScenarioActionButtons targets={props.targets} />
+                                <ScenarioActionButtons {...iconClickHandlers} />
                             </Grid>
                         </Grid>
                     </ListItem>
@@ -147,38 +147,52 @@ function ScenarioTitles(props: { headers: Headers }) {
     );
 }
 
-function ScenarioActionButtons(props: { targets: ActionButtonTargets }) {
+interface ScenarioActionButtonsProps {
+    onCollapseButtonClick: () => void;
+    onExpandButtonClick: () => void;
+    onPrintButtonClick: () => void;
+    onBookmarkButtonClick: () => void;
+}
+
+function ScenarioActionButtons({
+    onCollapseButtonClick,
+    onExpandButtonClick,
+    onPrintButtonClick,
+    onBookmarkButtonClick
+}: ScenarioActionButtonsProps) {
     return (
         <Grid container>
             <Grid item>
-                <ScenarioHeaderIcon action={props.targets.minusButtonTarget}>
+                <ScenarioHeaderIcon onClick={onCollapseButtonClick}>
                     <RemoveIcon fontSize="inherit" />
                 </ScenarioHeaderIcon>
             </Grid>
             <Grid item>
-                <ScenarioHeaderIcon action={props.targets.plusButtonTarget}>
+                <ScenarioHeaderIcon onClick={onExpandButtonClick}>
                     <AddIcon />
                 </ScenarioHeaderIcon>
             </Grid>
             <Grid item>
-                <ScenarioHeaderIcon action={props.targets.printButtonTarget}>
+                <ScenarioHeaderIcon onClick={onPrintButtonClick}>
                     <PrintOutlinedIcon fontSize="inherit" />
                 </ScenarioHeaderIcon>
             </Grid>
             <Grid item>
-                <ScenarioHeaderIcon action={props.targets.bookmarkButtonTarget}>
+                <ScenarioHeaderIcon onClick={onBookmarkButtonClick}>
                     <BookmarkOutlinedIcon fontSize="inherit" />
                 </ScenarioHeaderIcon>
             </Grid>
         </Grid>
     );
 }
 
-function ScenarioHeaderIcon(props: { children: React.ReactNode; action: MouseEventHandler }) {
+type ScenarioHeaderIconProps = PropsWithChildren<{ onClick: () => void }>;
+
+function ScenarioHeaderIcon({ children, onClick }: ScenarioHeaderIconProps) {
     return (
         <StyledIconContainer>
-            <StyledIconButton className="actionPanelButton" onClick={props.action}>
-                {props.children}
+            <StyledIconButton className="actionPanelButton" onClick={onClick}>
+                {children}
             </StyledIconButton>
         </StyledIconContainer>
     );

diff --git a/new/src/components/Scenarios/ScenarioOverview.tsx b/new/src/components/Scenarios/ScenarioOverview.tsx
@@ -36,21 +36,17 @@ export function ScenarioOverview(props: {
                                         header: props.title
                                     }}
                                     statistic={createStatistics(props.scenarios)}
-                                    targets={{
-                                        minusButtonTarget: () => {
-                                            console.log("Collapsing stuff");
-                                            setAllExpanded(ExpansionState.COLLAPSED);
-                                        },
-                                        plusButtonTarget: () => {
-                                            console.log("Expanding stuff");
-                                            setAllExpanded(ExpansionState.EXPANDED);
-                                        },
-                                        printButtonTarget: () => {
-                                            console.error("print not implemented");
-                                        },
-                                        bookmarkButtonTarget: () => {
-                                            console.error("bookmark not implemented");
-                                        }
+                                    onCollapseButtonClick={() => {
+                                        setAllExpanded(ExpansionState.COLLAPSED);
+                                    }}
+                                    onExpandButtonClick={() => {
+                                        setAllExpanded(ExpansionState.EXPANDED);
+                                    }}
+                                    onBookmarkButtonClick={() => {
+                                        /* not implemented yet */
+                                    }}
+                                    onPrintButtonClick={() => {
+                                        /* not implemented yet */
                                     }}
                                 />
                             </div>
@@ -82,17 +78,19 @@ export function ScenarioOverview(props: {
 }
 
 function createStatistics(scenarios: ScenarioModel[]): ReportStatistics {
-    const allCases = scenarios.flatMap((scenario) => scenario.scenarioCases);
-    const failedScenarios = scenarios.filter((scenario) => scenario.executionStatus === "FAILED");
-    const pendingScenarios = scenarios.filter((scenario) => scenario.executionStatus === "PENDING");
-    const successfulScenarios = scenarios.filter((scenario) => scenario.executionStatus === "SUCCESS");
+    const allCases = scenarios.flatMap(scenario => scenario.scenarioCases);
+    const failedScenarios = scenarios.filter(scenario => scenario.executionStatus === "FAILED");
+    const pendingScenarios = scenarios.filter(scenario => scenario.executionStatus === "PENDING");
+    const successfulScenarios = scenarios.filter(
+        scenario => scenario.executionStatus === "SUCCESS"
+    );
     return {
         numScenarios: scenarios.length,
         numFailedScenarios: failedScenarios.length,
         durationInNanos: allCases
-            .map((scenarioCase) => scenarioCase.durationInNanos)
+            .map(scenarioCase => scenarioCase.durationInNanos)
             .reduce((totalDuration, current) => totalDuration + current),
         numPendingScenarios: pendingScenarios.length,
-        numSuccessfulScenarios: successfulScenarios.length,
+        numSuccessfulScenarios: successfulScenarios.length
     };
-}
+}