fix : load game

sentry.client.config.ts

@@ -21,6 +21,7 @@ if (
     ignoreErrors: [
       "AbortError: The user aborted a request.",
       "Failed to fetch",
+      "Fetch is aborted",
     ],
   });
 }

src/sections/loadGame/chessComInput.tsx

@@ -13,13 +13,10 @@ import {
 import { useEffect, useState } from "react";
 
 interface Props {
-  pgn: string;
+  onSelect: (pgn: string) => void;
-  setPgn: (pgn: string) => void;
-  /** Called when a game is selected; if provided, bypasses manual 'Add' */
-  onSelect?: (pgn: string) => void;
 }
 
-export default function ChessComInput({ pgn, setPgn, onSelect }: Props) {
+export default function ChessComInput({ onSelect }: Props) {
   const [requestCount, setRequestCount] = useState(0);
   const [chessComUsername, setChessComUsername] = useLocalStorage(
     "chesscom-username",
@@ -70,14 +67,7 @@ export default function ChessComInput({ pgn, setPgn, onSelect }: Props) {
         >
           {games.map((game) => (
             <ListItemButton
-              onClick={() => {
+              onClick={() => onSelect(game.pgn)}
-                if (onSelect) {
-                  onSelect(game.pgn);
-                } else {
-                  setPgn(game.pgn);
-                }
-              }}
-              selected={pgn === game.pgn}
               style={{ width: 350, maxWidth: 350 }}
               key={game.uuid}
             >

src/sections/loadGame/gamePgnInput.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 export default function GamePgnInput({ pgn, setPgn }: Props) {
   return (
-    <FormControl sx={{ m: 1, width: 600 }}>
+    <FormControl fullWidth>
       <TextField
         label="Enter PGN here..."
         variant="outlined"

src/sections/loadGame/lichessInput.tsx

@@ -13,13 +13,10 @@ import {
 import { useEffect, useState } from "react";
 
 interface Props {
-  pgn: string;
+  onSelect: (pgn: string) => void;
-  setPgn: (pgn: string) => void;
-  /** Called when a game is selected; if provided, bypasses manual 'Add' */
-  onSelect?: (pgn: string) => void;
 }
 
-export default function LichessInput({ pgn, setPgn, onSelect }: Props) {
+export default function LichessInput({ onSelect }: Props) {
   const [requestCount, setRequestCount] = useState(0);
   const [lichessUsername, setLichessUsername] = useLocalStorage(
     "lichess-username",
@@ -70,15 +67,7 @@ export default function LichessInput({ pgn, setPgn, onSelect }: Props) {
         >
           {games.map((game) => (
             <ListItemButton
-              onClick={() => {
+              onClick={() => onSelect(game.pgn)}
-                const selectedPgn: string = game.pgn;
-                if (onSelect) {
-                  onSelect(selectedPgn);
-                } else {
-                  setPgn(selectedPgn);
-                }
-              }}
-              selected={pgn === game.pgn}
               style={{ width: 350, maxWidth: 350 }}
               key={game.id}
             >

src/sections/loadGame/loadGameDialog.tsx

@@ -38,14 +38,13 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
   const [parsingError, setParsingError] = useState("");
   const { addGame } = useGameDatabase();
 
-  const handleAddGame = (overridePgn?: string) => {
+  const handleAddGame = (pgn: string) => {
-    const usedPgn = overridePgn ?? pgn;
+    if (!pgn) return;
-    if (!usedPgn) return;
     setParsingError("");
 
     try {
-      const gameToAdd = getGameFromPgn(usedPgn);
+      const gameToAdd = getGameFromPgn(pgn);
-      setSentryContext("loadedGame", { pgn: usedPgn });
+      setSentryContext("loadedGame", { pgn });
 
       if (setGame) {
         setGame(gameToAdd);
@@ -71,7 +70,18 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
   };
 
   return (
-    <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      maxWidth="md"
+      fullWidth
+      PaperProps={{
+        sx: {
+          position: "fixed",
+          top: 0,
+        },
+      }}
+    >
       <DialogTitle marginY={1} variant="h5">
         {setGame ? "Load a game" : "Add a game to your database"}
       </DialogTitle>
@@ -106,25 +116,11 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
           )}
 
           {gameOrigin === GameOrigin.ChessCom && (
-            <ChessComInput
+            <ChessComInput onSelect={handleAddGame} />
-              pgn={pgn}
-              setPgn={setPgn}
-              onSelect={(selectedPgn: string) => {
-                setPgn(selectedPgn);
-                handleAddGame(selectedPgn);
-              }}
-            />
           )}
 
           {gameOrigin === GameOrigin.Lichess && (
-            <LichessInput
+            <LichessInput onSelect={handleAddGame} />
-              pgn={pgn}
-              setPgn={setPgn}
-              onSelect={(selectedPgn: string) => {
-                setPgn(selectedPgn);
-                handleAddGame(selectedPgn);
-              }}
-            />
           )}
 
           {parsingError && (
@@ -140,6 +136,15 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
         <Button variant="outlined" onClick={handleClose}>
           Cancel
         </Button>
+        {gameOrigin === GameOrigin.Pgn && (
+          <Button
+            variant="contained"
+            sx={{ marginLeft: 2 }}
+            onClick={() => handleAddGame(pgn)}
+          >
+            Add
+          </Button>
+        )}
       </DialogActions>
     </Dialog>
   );