feat : add copy pgn button in analysis and database page

Author: Theprathamshah

src/pages/database.tsx

@@ -9,7 +9,7 @@ import {
   GridRowId,
 } from "@mui/x-data-grid";
 import { useCallback, useMemo } from "react";
-import { red } from "@mui/material/colors";
+import { blue, red } from "@mui/material/colors";
 import LoadGameButton from "@/sections/loadGame/loadGameButton";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { useRouter } from "next/router";
@@ -36,6 +36,16 @@ export default function GameDatabase() {
     [deleteGame]
   );
 
+  const handleCopyGameRow = useCallback(
+    (id: GridRowId) => async () => {
+      if (typeof id !== "number") {
+        throw new Error("Unable to copy game");
+      }
+      await navigator.clipboard.writeText(games[id - 1].pgn);
+    },
+    [games]
+  );
+
   const columns: GridColDef[] = useMemo(
     () => [
       {
@@ -136,8 +146,28 @@ export default function GameDatabase() {
           ];
         },
       },
+      {
+        field: "copy pgn",
+        type: "actions",
+        headerName: "Copy pgn",
+        width: 100,
+        cellClassName: "actions",
+        getActions: ({ id }) => {
+          return [
+            <GridActionsCellItem
+              icon={
+                <Icon icon="ri:clipboard-line" color={blue[400]} width="20px" />
+              }
+              label="Copy pgn"
+              onClick={handleCopyGameRow(id)}
+              color="inherit"
+              key={`${id}-copy-button`}
+            />,
+          ];
+        },
+      },
     ],
-    [handleDeleteGameRow, router]
+    [handleDeleteGameRow, handleCopyGameRow, router]
   );
 
   return (

src/sections/analysis/panelToolbar/index.tsx

@@ -1,7 +1,7 @@
 import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { Icon } from "@iconify/react";
 import { useAtomValue } from "jotai";
-import { boardAtom } from "../states";
+import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";
 import FlipBoardButton from "./flipBoardButton";
 import NextMoveButton from "./nextMoveButton";
@@ -16,7 +16,7 @@ export default function PanelToolBar() {
     useChessActions(boardAtom);
 
   const boardHistory = board.history();
-
+  const game = useAtomValue(gameAtom);
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (boardHistory.length === 0) return;
@@ -65,7 +65,16 @@ export default function PanelToolBar() {
       <NextMoveButton />
 
       <GoToLastPositionButton />
-
+      <Tooltip title="Copy pgn">
+        <IconButton
+          disabled={game.history().length === 0}
+          onClick={() => {
+            navigator.clipboard.writeText(game.pgn());
+          }}
+        >
+          <Icon icon="ri:clipboard-line" height={30} />
+        </IconButton>
+      </Tooltip>
       <SaveButton />
     </Grid>
   );