refacto : global refacto

2024-02-22 23:18:02 +01:00
parent 2a74b62bae
commit 2af0959e82
24 changed files with 230 additions and 190 deletions
--- a/src/pages/database.tsx
+++ b/src/pages/database.tsx
@@ -0,0 +1,137 @@
+import { Grid, Typography } from "@mui/material";
+import { Icon } from "@iconify/react";
+import {
+  DataGrid,
+  GridColDef,
+  GridLocaleText,
+  GRID_DEFAULT_LOCALE_TEXT,
+  GridActionsCellItem,
+  GridRowId,
+} from "@mui/x-data-grid";
+import { useCallback, useMemo } from "react";
+import { red } from "@mui/material/colors";
+import LoadGameButton from "@/sections/loadGame/loadGameButton";
+import { useGameDatabase } from "@/hooks/useGameDatabase";
+
+const gridLocaleText: GridLocaleText = {
+  ...GRID_DEFAULT_LOCALE_TEXT,
+  noRowsLabel: "No games found",
+};
+
+export default function GameDatabase() {
+  const { games, deleteGame } = useGameDatabase(true);
+
+  const handleDeleteGameRow = useCallback(
+    (id: GridRowId) => async () => {
+      if (typeof id !== "number") {
+        throw new Error("Unable to remove game");
+      }
+      await deleteGame(id);
+    },
+    [deleteGame]
+  );
+
+  const columns: GridColDef[] = useMemo(
+    () => [
+      {
+        field: "event",
+        headerName: "Event",
+        width: 150,
+      },
+      {
+        field: "site",
+        headerName: "Site",
+        width: 150,
+      },
+      {
+        field: "date",
+        headerName: "Date",
+        width: 150,
+      },
+      {
+        field: "round",
+        headerName: "Round",
+        headerAlign: "center",
+        align: "center",
+        width: 150,
+      },
+      {
+        field: "white",
+        headerName: "White",
+        width: 150,
+        headerAlign: "center",
+        align: "center",
+      },
+      {
+        field: "result",
+        headerName: "Result",
+        headerAlign: "center",
+        align: "center",
+        width: 100,
+      },
+      {
+        field: "black",
+        headerName: "Black",
+        width: 150,
+        headerAlign: "center",
+        align: "center",
+      },
+      {
+        field: "actions",
+        type: "actions",
+        headerName: "Delete",
+        width: 100,
+        cellClassName: "actions",
+        getActions: ({ id }) => {
+          return [
+            <GridActionsCellItem
+              icon={
+                <Icon icon="mdi:delete-outline" color={red[400]} width="20px" />
+              }
+              label="Supprimer"
+              onClick={handleDeleteGameRow(id)}
+              color="inherit"
+              key={`${id}-delete-button`}
+            />,
+          ];
+        },
+      },
+    ],
+    [handleDeleteGameRow]
+  );
+
+  return (
+    <Grid container rowSpacing={3} justifyContent="center" alignItems="center">
+      <Grid
+        item
+        container
+        xs={12}
+        justifyContent="center"
+        alignItems="center"
+        spacing={4}
+      >
+        <Grid item container justifyContent="center" sx={{ maxWidth: "250px" }}>
+          <LoadGameButton />
+        </Grid>
+      </Grid>
+
+      <Grid item container xs={12} justifyContent="center" alignItems="center">
+        <Typography variant="subtitle2">
+          You have {0} games in your database
+        </Typography>
+      </Grid>
+
+      <Grid item maxWidth="100%" minWidth="50px">
+        <DataGrid
+          aria-label="Games list"
+          rows={games}
+          columns={columns}
+          disableColumnMenu
+          hideFooter={true}
+          autoHeight={true}
+          localeText={gridLocaleText}
+        />
+      </Grid>
+    </Grid>
+  );
+}