move handlers into useChessGame hook

src/hooks/useChessGame.ts

@@ -0,0 +1,77 @@
+import { type ChangeEvent, useReducer, useRef } from "react";
+import { gameReducer, initialGameState } from "#/reducers/gameReducer.ts";
+import { buildPgnString, getHeaders } from "#/utils/pgnUtils.ts";
+import { downloadString } from "#/utils/stringUtils.ts";
+
+export const useChessGame = () => {
+	const [gameState, gameDispatch] = useReducer(gameReducer, initialGameState);
+	const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+	const handleSavePgn = () => {
+		const pgnString = buildPgnString(gameState);
+		downloadString(pgnString, "game.pgn");
+	};
+
+	const handleSavePdf = () => {
+		console.log("Save PDF");
+	};
+
+	const handleClearGame = () => {
+		if (fileInputRef.current) {
+			fileInputRef.current.value = "";
+		}
+
+		gameDispatch({
+			type: "CLEAR_GAME",
+		});
+	};
+
+	const handleLoadPgn = (e: ChangeEvent<HTMLInputElement>) => {
+		e.preventDefault();
+
+		const selectedFile = e.target.files?.[0];
+
+		if (selectedFile?.name.endsWith(".pgn")) {
+			const reader = new FileReader();
+			reader.onload = (event) => {
+				const pgnData = event.target?.result;
+				let pgnString = "";
+
+				if (pgnData) {
+					if (typeof pgnData === "string") {
+						pgnString = pgnData;
+					} else {
+						pgnString = new TextDecoder().decode(pgnData);
+					}
+				}
+
+				if (pgnString) {
+					const headers = {
+						...getHeaders(pgnString),
+						title: "",
+						subtitle: "",
+					};
+					gameDispatch({
+						type: "SET_GAME",
+						payload: { pgn: pgnString, headers: headers },
+					});
+				} else {
+					e.target.files = null;
+					handleClearGame();
+				}
+			};
+			reader.readAsText(selectedFile);
+		} else {
+			handleClearGame();
+		}
+	};
+
+	return {
+		gameState,
+		fileInputRef,
+		handleSavePgn,
+		handleSavePdf,
+		handleClearGame,
+		handleLoadPgn,
+	};
+};

src/pages/Chessboard.container.tsx

@@ -1,80 +1,17 @@
-import { type ChangeEvent, useReducer, useRef } from "react";
+import { useChessGame } from "#/hooks/useChessGame.ts";
 import Chessboard from "#/pages/Chessboard.tsx";
-import { gameReducer, initialGameState } from "#/reducers/gameReducer.ts";
-import { buildPgnString, getHeaders } from "#/utils/pgnUtils.ts";
-import { downloadString } from "#/utils/stringUtils.ts";
 
 const ChessboardContainer = () => {
-	const [gameState, gameDispatch] = useReducer(gameReducer, initialGameState);
+	const chessGameProps = useChessGame();
-	const fileInputRef = useRef<HTMLInputElement | null>(null);
-
-	const handleSavePgn = () => {
-		const pgnString = buildPgnString(gameState);
-		downloadString(pgnString, "game.pgn");
-	};
-
-	const handleSavePdf = () => {
-		console.log("Save PDF");
-	};
-
-	const handleClearGame = () => {
-		if (fileInputRef.current) {
-			fileInputRef.current.value = "";
-		}
-
-		gameDispatch({
-			type: "CLEAR_GAME",
-		});
-	};
-
-	const handleLoadPgn = (e: ChangeEvent<HTMLInputElement>) => {
-		e.preventDefault();
-
-		const selectedFile = e.target.files?.[0];
-
-		if (selectedFile?.name.endsWith(".pgn")) {
-			const reader = new FileReader();
-			reader.onload = (event) => {
-				const pgnData = event.target?.result;
-				let pgnString = "";
-
-				if (pgnData) {
-					if (typeof pgnData === "string") {
-						pgnString = pgnData;
-					} else {
-						pgnString = new TextDecoder().decode(pgnData);
-					}
-				}
-
-				if (pgnString) {
-					const headers = {
-						...getHeaders(pgnString),
-						title: "",
-						subtitle: "",
-					};
-					gameDispatch({
-						type: "SET_GAME",
-						payload: { pgn: pgnString, headers: headers },
-					});
-				} else {
-					e.target.files = null;
-					handleClearGame();
-				}
-			};
-			reader.readAsText(selectedFile);
-		} else {
-			handleClearGame();
-		}
-	};
 
 	return (
 		<Chessboard
-			gameState={gameState}
+			gameState={chessGameProps.gameState}
-			handleLoadPgn={handleLoadPgn}
+			handleLoadPgn={chessGameProps.handleLoadPgn}
-			handleClearGame={handleClearGame}
+			handleClearGame={chessGameProps.handleClearGame}
-			handleSavePgn={handleSavePgn}
+			handleSavePgn={chessGameProps.handleSavePgn}
-			handleSavePdf={handleSavePdf}
+			handleSavePdf={chessGameProps.handleSavePdf}
-			fileInputRef={fileInputRef}
+			fileInputRef={chessGameProps.fileInputRef}
 		/>
 	);
 };

src/reducers/gameReducer.ts

@@ -28,7 +28,7 @@ export interface IGameState {
 }
 
 type GameAction =
-	| { type: "SET_GAME"; payload: { pgn: string; headers: "" } }
+	| { type: "SET_GAME"; payload: { pgn: string; headers: IHeader } }
 	| { type: "CLEAR_GAME" }
 	| { type: "SET_HEADERS"; payload: IHeader }
 	| { type: "ADD_DIAGRAM"; payload: IDiagrams }