pass generatingPdf state to checkbox to disable, remove container compoentn for chessboard

src/hooks/useChessGame.ts

@@ -149,5 +149,6 @@ export const useChessGame = () => {
 		handlePlyChange,
 		handleToggleDiagram,
 		currentPosition,
+		generatingPdf,
 	};
 };

src/pages/Chessboard.container.tsx

@@ -1,23 +0,0 @@
-import { useChessGame } from "#/hooks/useChessGame.ts";
-import Chessboard from "#/pages/Chessboard.tsx";
-
-const ChessboardContainer = () => {
-	const chessGameProps = useChessGame();
-
-	return (
-		<Chessboard
-			gameState={chessGameProps.gameState}
-			handleLoadPgn={chessGameProps.handleLoadPgn}
-			handleClearGame={chessGameProps.handleClearGame}
-			handleSavePgn={chessGameProps.handleSavePgn}
-			handleSavePdf={chessGameProps.handleSavePdf}
-			handleToggleClock={chessGameProps.handleToggleClock}
-			handleToggleDiagram={chessGameProps.handleToggleDiagram}
-			handlePlyChange={chessGameProps.handlePlyChange}
-			fileInputRef={chessGameProps.fileInputRef}
-			currentPosition={chessGameProps.currentPosition}
-		/>
-	);
-};
-
-export default ChessboardContainer;

src/pages/Chessboard.tsx

@@ -1,34 +1,23 @@
-import type { ChangeEvent, RefObject } from "react";
 import LichessButton from "#/components/LichessButton.tsx";
 import PgnViewer from "#/components/PgnViewer.tsx";
 import Section from "#/components/Section.tsx";
-import type { IGameState } from "#/reducers/gameReducer.ts";
+import { useChessGame } from "#/hooks/useChessGame.ts";
 
-interface IProps {
+const Chessboard = () => {
-	gameState: IGameState;
+	const {
-	handleLoadPgn: (e: ChangeEvent<HTMLInputElement>) => void;
+		gameState,
-	handleClearGame: () => void;
+		fileInputRef,
-	handleSavePgn: () => void;
+		currentPosition,
-	handleSavePdf: () => void;
+		generatingPdf,
-	handleToggleClock: () => void;
+		handleLoadPgn,
-	handleToggleDiagram: () => void;
+		handleClearGame,
-	handlePlyChange: ({ ply, fen }: { ply: number; fen: string }) => void;
+		handleSavePgn,
-	fileInputRef: RefObject<HTMLInputElement | null>;
+		handleSavePdf,
-	currentPosition: { ply: number; fen: string };
+		handleToggleClock,
-}
+		handleToggleDiagram,
+		handlePlyChange,
+	} = useChessGame();
 
-const Chessboard = ({
-	gameState,
-	handleLoadPgn,
-	handleClearGame,
-	handleSavePgn,
-	handleSavePdf,
-	handleToggleClock,
-	handleToggleDiagram,
-	handlePlyChange,
-	fileInputRef,
-	currentPosition,
-}: IProps) => {
 	return (
 		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
 			<Section title="Convert PGN to PDF">
@@ -64,7 +53,7 @@ const Chessboard = ({
 					className="cursor-pointer"
 					type="button"
 					onClick={handleSavePdf}
-					disabled={!gameState.pgn}
+					disabled={!gameState.pgn || generatingPdf}
 				>
 					Save PDF
 				</button>

src/routes/chessboard.tsx

@@ -1,10 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
-import ChessboardContainer from "#/pages/Chessboard.container.tsx";
+import Chessboard from "#/pages/Chessboard.tsx";
 
 export const Route = createFileRoute("/chessboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <ChessboardContainer />;
+	return <Chessboard />;
 }