more intuitive game loading (#13)

* faster game laoding without need for add button

src/sections/loadGame/chessComInput.tsx

@@ -15,9 +15,11 @@ import { useEffect, useState } from "react";
 interface Props {
   pgn: string;
   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 }: Props) {
+export default function ChessComInput({ pgn, setPgn, onSelect }: Props) {
   const [requestCount, setRequestCount] = useState(0);
   const [chessComUsername, setChessComUsername] = useLocalStorage(
     "chesscom-username",
@@ -68,7 +70,13 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
         >
           {games.map((game) => (
             <ListItemButton
-              onClick={() => setPgn(game.pgn)}
+              onClick={() => {
+                if (onSelect) {
+                  onSelect(game.pgn);
+                } else {
+                  setPgn(game.pgn);
+                }
+              }}
               selected={pgn === game.pgn}
               style={{ width: 350, maxWidth: 350 }}
               key={game.uuid}

src/sections/loadGame/lichessInput.tsx

@@ -15,9 +15,11 @@ import { useEffect, useState } from "react";
 interface Props {
   pgn: string;
   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 }: Props) {
+export default function LichessInput({ pgn, setPgn, onSelect }: Props) {
   const [requestCount, setRequestCount] = useState(0);
   const [lichessUsername, setLichessUsername] = useLocalStorage(
     "lichess-username",
@@ -68,7 +70,14 @@ export default function LichessInput({ pgn, setPgn }: Props) {
         >
           {games.map((game) => (
             <ListItemButton
-              onClick={() => setPgn(game.pgn)}
+              onClick={() => {
+                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,13 +38,14 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
   const [parsingError, setParsingError] = useState("");
   const { addGame } = useGameDatabase();
 
-  const handleAddGame = () => {
-    if (!pgn) return;
+  const handleAddGame = (overridePgn?: string) => {
+    const usedPgn = overridePgn ?? pgn;
+    if (!usedPgn) return;
     setParsingError("");
 
     try {
-      const gameToAdd = getGameFromPgn(pgn);
-      setSentryContext("loadedGame", { pgn });
+      const gameToAdd = getGameFromPgn(usedPgn);
+      setSentryContext("loadedGame", { pgn: usedPgn });
 
       if (setGame) {
         setGame(gameToAdd);
@@ -105,11 +106,25 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
           )}
 
           {gameOrigin === GameOrigin.ChessCom && (
-            <ChessComInput pgn={pgn} setPgn={setPgn} />
+            <ChessComInput
+              pgn={pgn}
+              setPgn={setPgn}
+              onSelect={(selectedPgn: string) => {
+                setPgn(selectedPgn);
+                handleAddGame(selectedPgn);
+              }}
+            />
           )}
 
           {gameOrigin === GameOrigin.Lichess && (
-            <LichessInput pgn={pgn} setPgn={setPgn} />
+            <LichessInput
+              pgn={pgn}
+              setPgn={setPgn}
+              onSelect={(selectedPgn: string) => {
+                setPgn(selectedPgn);
+                handleAddGame(selectedPgn);
+              }}
+            />
           )}
 
           {parsingError && (
@@ -122,16 +137,9 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
         </Grid>
       </DialogContent>
       <DialogActions sx={{ m: 2 }}>
-        <Button
-          variant="outlined"
-          sx={{ marginRight: 2 }}
-          onClick={handleClose}
-        >
+        <Button variant="outlined" onClick={handleClose}>
           Cancel
         </Button>
-        <Button variant="contained" onClick={handleAddGame}>
-          Add
-        </Button>
       </DialogActions>
     </Dialog>
   );