set and clear game state using reducers - removed the need for global state management

src/pages/Chessboard.container.tsx

@@ -1,7 +1,81 @@
+import { type ChangeEvent, useReducer, useRef } from "react";
 import Chessboard from "#/pages/Chessboard.tsx";
+import { gameReducer, initialGameState } from "#/reducers/gameReducer.ts";
 
 const ChessboardContainer = () => {
-	return <Chessboard />;
+	const [gameState, gameDispatch] = useReducer(gameReducer, initialGameState);
+	const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+	const handleSavePgn = () => {
+		console.log("Save 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) {
+					gameDispatch({
+						type: "SET_GAME",
+						payload: { pgn: pgnString, headers: "" },
+					});
+				} else {
+					gameDispatch({
+						type: "CLEAR_GAME",
+					});
+				}
+			};
+			reader.readAsText(selectedFile);
+		} else {
+			if (fileInputRef.current) {
+				fileInputRef.current.value = "";
+			}
+			e.target.files = null;
+			gameDispatch({
+				type: "CLEAR_GAME",
+			});
+		}
+	};
+
+	return (
+		<Chessboard
+			gameState={gameState}
+			handleLoadPgn={handleLoadPgn}
+			handleClearGame={handleClearGame}
+			handleSavePgn={handleSavePgn}
+			handleSavePdf={handleSavePdf}
+			fileInputRef={fileInputRef}
+		/>
+	);
 };
 
 export default ChessboardContainer;

src/pages/Chessboard.tsx

@@ -1,16 +1,65 @@
+import type { ChangeEvent, RefObject } from "react";
 import LichessButton from "#/components/LichessButton.tsx";
-import PgnViewerComponent from "#/components/LichessPgnViewerComponent.tsx";
+import PgnViewer from "#/components/PgnViewer.tsx";
 import Section from "#/components/Section.tsx";
+import type { IGameState } from "#/reducers/gameReducer.ts";
 
-const Chessboard = () => {
+interface IProps {
+	gameState: IGameState;
+	handleLoadPgn: (e: ChangeEvent<HTMLInputElement>) => void;
+	handleClearGame: () => void;
+	handleSavePgn: () => void;
+	handleSavePdf: () => void;
+	fileInputRef: RefObject<HTMLInputElement | null>;
+}
+
+const Chessboard = ({
+	gameState,
+	handleLoadPgn,
+	handleClearGame,
+	handleSavePgn,
+	handleSavePdf,
+	fileInputRef,
+}: IProps) => {
 	return (
 		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
 			<Section title="Convert PGN to PDF">
 				<LichessButton /> or{" "}
-				<input type="file" id="file-input" className="file-input max-w-xs" />
+				<input
+					type="file"
+					id="file-input"
+					ref={fileInputRef}
+					className="file-input max-w-xs"
+					onChange={handleLoadPgn}
+				/>
 			</Section>
 
-			<PgnViewerComponent pgn="" />
+			<div className="flex gap-4">
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleClearGame}
+				>
+					Clear Game
+				</button>
+
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleSavePgn}
+				>
+					Save PGN
+				</button>
+
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleSavePdf}
+				>
+					Save PDF
+				</button>
+			</div>
+			<PgnViewer gamePgn={gameState.pgn || ""} />
 		</main>
 	);
 };