refactor(common-ui,clusters-ui): add BooleanCell and update clusters …

…view with it
AntaresSimulatorTeam · Mar 26, 2024 · cef2c05 · cef2c05
1 parent 3c0ed3e
commit cef2c05
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 35 deletions.
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { createMRTColumnHelper, type MRT_Row } from "material-react-table";
-import { Box, Chip } from "@mui/material";
+import { Box } from "@mui/material";
 import { useLocation, useNavigate, useOutletContext } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { StudyMetadata } from "../../../../../../../common/types";
@@ -23,6 +23,7 @@ import {
   useClusterDataWithCapacity,
 } from "../common/clustersUtils";
 import { TRow } from "../../../../../../common/GroupedDataTable/types";
+import BooleanCell from "../../../../../../common/GroupedDataTable/cellRenderers/BooleanCell";
 
 function Renewables() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -50,14 +51,7 @@ function Renewables() {
         header: "Enabled",
         size: 50,
         filterVariant: "checkbox",
-        Cell: ({ cell }) => (
-          <Chip
-            label={cell.getValue() ? t("button.yes") : t("button.no")}
-            color={cell.getValue() ? "success" : "error"}
-            size="small"
-            sx={{ minWidth: 40 }}
-          />
-        ),
+        Cell: BooleanCell,
       }),
       columnHelper.accessor("tsInterpretation", {
         header: "TS Interpretation",

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { createMRTColumnHelper, type MRT_Row } from "material-react-table";
-import { Box, Chip, Tooltip } from "@mui/material";
+import { Box, Tooltip } from "@mui/material";
 import { useLocation, useNavigate, useOutletContext } from "react-router-dom";
 import { StudyMetadata } from "../../../../../../../common/types";
 import useAppSelector from "../../../../../../../redux/hooks/useAppSelector";
@@ -18,6 +18,7 @@ import {
 } from "./utils";
 import usePromiseWithSnackbarError from "../../../../../../../hooks/usePromiseWithSnackbarError";
 import type { TRow } from "../../../../../../common/GroupedDataTable/types";
+import BooleanCell from "../../../../../../common/GroupedDataTable/cellRenderers/BooleanCell";
 
 function Storages() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -141,14 +142,7 @@ function Storages() {
         header: t("study.modelization.storages.initialLevelOptim"),
         size: 200,
         filterVariant: "checkbox",
-        Cell: ({ cell }) => (
-          <Chip
-            label={cell.getValue() ? t("button.yes") : t("button.no")}
-            color={cell.getValue() ? "success" : "error"}
-            size="small"
-            sx={{ minWidth: 40 }}
-          />
-        ),
+        Cell: BooleanCell,
       }),
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { createMRTColumnHelper, type MRT_Row } from "material-react-table";
-import { Box, Chip } from "@mui/material";
+import { Box } from "@mui/material";
 import { useLocation, useNavigate, useOutletContext } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { StudyMetadata } from "../../../../../../../common/types";
@@ -23,6 +23,7 @@ import {
   useClusterDataWithCapacity,
 } from "../common/clustersUtils";
 import { TRow } from "../../../../../../common/GroupedDataTable/types";
+import BooleanCell from "../../../../../../common/GroupedDataTable/cellRenderers/BooleanCell";
 
 function Thermal() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -50,27 +51,13 @@ function Thermal() {
         header: "Enabled",
         size: 50,
         filterVariant: "checkbox",
-        Cell: ({ cell }) => (
-          <Chip
-            label={cell.getValue() ? t("button.yes") : t("button.no")}
-            color={cell.getValue() ? "success" : "error"}
-            size="small"
-            sx={{ minWidth: 40 }}
-          />
-        ),
+        Cell: BooleanCell,
       }),
       columnHelper.accessor("mustRun", {
         header: "Must Run",
         size: 50,
         filterVariant: "checkbox",
-        Cell: ({ cell }) => (
-          <Chip
-            label={cell.getValue() ? t("button.yes") : t("button.no")}
-            color={cell.getValue() ? "success" : "error"}
-            size="small"
-            sx={{ minWidth: 40 }}
-          />
-        ),
+        Cell: BooleanCell,
       }),
       columnHelper.accessor("unitCount", {
         header: "Unit Count",

diff --git a/webapp/src/components/common/GroupedDataTable/cellRenderers/BooleanCell.tsx b/webapp/src/components/common/GroupedDataTable/cellRenderers/BooleanCell.tsx
@@ -0,0 +1,22 @@
+import { Chip } from "@mui/material";
+import type { MRT_Cell, MRT_RowData } from "material-react-table";
+import { useTranslation } from "react-i18next";
+
+interface Props<T extends MRT_RowData> {
+  cell: MRT_Cell<T, boolean>;
+}
+
+function BooleanCell<T extends MRT_RowData>({ cell }: Props<T>) {
+  const { t } = useTranslation();
+
+  return (
+    <Chip
+      label={cell.getValue() ? t("button.yes") : t("button.no")}
+      color={cell.getValue() ? "success" : "error"}
+      size="small"
+      sx={{ minWidth: 40 }}
+    />
+  );
+}
+
+export default BooleanCell;