From d14ac15dca3dd1c9fcd0b6e6dd01292470d8d893 Mon Sep 17 00:00:00 2001
From: titanium_machine <78664175+titaniummachine1@users.noreply.github.com>
Date: Sat, 3 May 2025 16:44:53 +0200
Subject: [PATCH] more intuitive game loading (#13)

* faster game laoding without need for add button
---
 src/sections/loadGame/chessComInput.tsx  | 12 ++++++--
 src/sections/loadGame/lichessInput.tsx   | 13 +++++++--
 src/sections/loadGame/loadGameDialog.tsx | 36 +++++++++++++++---------
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/sections/loadGame/chessComInput.tsx b/src/sections/loadGame/chessComInput.tsx
index bee4b92..ad4ccc1 100644
--- a/src/sections/loadGame/chessComInput.tsx
+++ b/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}
diff --git a/src/sections/loadGame/lichessInput.tsx b/src/sections/loadGame/lichessInput.tsx
index 1012f80..87957d5 100644
--- a/src/sections/loadGame/lichessInput.tsx
+++ b/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}
diff --git a/src/sections/loadGame/loadGameDialog.tsx b/src/sections/loadGame/loadGameDialog.tsx
index f4bcdae..c94d80e 100644
--- a/src/sections/loadGame/loadGameDialog.tsx
+++ b/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>
   );