populate header fields

src/components/CustomHeaders.tsx

@@ -1,6 +1,11 @@
 import FormField from "#/components/FormField.tsx";
+import type { IHeader } from "#/interfaces.ts";
 
-const CustomHeaders = () => {
+interface IProps {
+	headers: IHeader;
+}
+
+const CustomHeaders = ({ headers }: IProps) => {
 	return (
 		<div className="my-4 w-full">
 			<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
@@ -13,10 +18,10 @@ const CustomHeaders = () => {
 				</summary>
 				<div>
 					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
-						<FormField fieldName="title" type="text" />
-						<FormField fieldName="subtitle" type="text" />
-						<FormField fieldName="date" type="text" />
-						<FormField fieldName="author" type="text" />
+						<FormField fieldName="title" type="text" headers={headers} />
+						<FormField fieldName="subtitle" type="text" headers={headers} />
+						<FormField fieldName="date" type="text" headers={headers} />
+						<FormField fieldName="author" type="text" headers={headers} />
 					</form>
 				</div>
 			</details>

src/components/FormField.tsx

@@ -1,9 +1,15 @@
+import { useChessGame } from "#/hooks/useChessGame.ts";
+import type { IHeader } from "#/interfaces.ts";
+
 export interface IFormField {
 	fieldName: string;
 	type: string;
+	headers: IHeader;
 }
 
-const FormField = ({ fieldName, type }: IFormField) => {
+const FormField = ({ fieldName, type, headers }: IFormField) => {
+	const { updateHeaders } = useChessGame();
+
 	return (
 		<div className="flex flex-col gap-2">
 			<label htmlFor={fieldName} className="text-sm capitalize">
@@ -14,6 +20,8 @@ const FormField = ({ fieldName, type }: IFormField) => {
 				type={type}
 				id={fieldName}
 				name={fieldName}
+				value={headers[fieldName]}
+				onChange={(e) => updateHeaders(e, fieldName)}
 			/>
 		</div>
 	);

src/components/HeaderFields.tsx

@@ -1,6 +1,13 @@
 import FormField from "#/components/FormField.tsx";
+import type { IHeader } from "#/interfaces.ts";
+
+interface IProps {
+	headers: IHeader;
+}
+
+const HeaderFields = ({ headers }: IProps) => {
+	console.log(headers);
 
-const HeaderFields = () => {
 	return (
 		<div className="my-4 w-full">
 			<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
@@ -10,19 +17,19 @@ const HeaderFields = () => {
 				</summary>
 				<div>
 					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
-						<FormField fieldName="event" type="text" />
-						<FormField fieldName="site" type="text" />
-						<FormField fieldName="date" type="text" />
-						<FormField fieldName="round" type="text" />
-						<FormField fieldName="white" type="text" />
-						<FormField fieldName="black" type="text" />
-						<FormField fieldName="result" type="text" />
-						<FormField fieldName="eco" type="text" />
-						<FormField fieldName="whiteElo" type="text" />
-						<FormField fieldName="blackElo" type="text" />
-						<FormField fieldName="plyCount" type="text" />
-						<FormField fieldName="eventDate" type="text" />
-						<FormField fieldName="source" type="text" />
+						<FormField fieldName="event" type="text" headers={headers} />
+						<FormField fieldName="site" type="text" headers={headers} />
+						<FormField fieldName="date" type="text" headers={headers} />
+						<FormField fieldName="round" type="text" headers={headers} />
+						<FormField fieldName="white" type="text" headers={headers} />
+						<FormField fieldName="black" type="text" headers={headers} />
+						<FormField fieldName="result" type="text" headers={headers} />
+						<FormField fieldName="eco" type="text" headers={headers} />
+						<FormField fieldName="whiteElo" type="text" headers={headers} />
+						<FormField fieldName="blackElo" type="text" headers={headers} />
+						<FormField fieldName="plyCount" type="text" headers={headers} />
+						<FormField fieldName="eventDate" type="text" headers={headers} />
+						<FormField fieldName="source" type="text" headers={headers} />
 					</form>
 				</div>
 			</details>

src/hooks/useChessGame.ts

@@ -6,7 +6,7 @@ import {
 	useState,
 } from "react";
 import { toast } from "react-toastify";
-import type { IPosition } from "#/interfaces.ts";
+import type { IHeader, IPosition } from "#/interfaces.ts";
 import { gameReducer, initialGameState } from "#/reducers/gameReducer.ts";
 import { downloadPDF } from "#/utils/pdfUtils.ts";
 import { buildPgnString, getHeaders } from "#/utils/pgnUtils.ts";
@@ -153,6 +153,18 @@ export const useChessGame = () => {
 		);
 	};
 
+	const updateHeaders = (
+		e: ChangeEvent<HTMLInputElement>,
+		fieldName: string,
+	) => {
+		e.preventDefault();
+		const updatedHeaders = {
+			...gameState.headers,
+			[fieldName]: e.target.value,
+		} as IHeader;
+		gameDispatch({ type: "SET_HEADERS", payload: updatedHeaders });
+	};
+
 	return {
 		gameState,
 		fileInputRef,
@@ -165,5 +177,6 @@ export const useChessGame = () => {
 		handleToggleDiagram,
 		currentPosition,
 		generatingPdf,
+		updateHeaders,
 	};
 };

src/interfaces.ts

@@ -17,6 +17,9 @@ export interface IHeader {
 	plyCount: string;
 	eventDate: string;
 	source: string;
+	title: string;
+	subtitle: string;
+	author: string;
 	[key: string]: string;
 }
 

src/pages/Chessboard.tsx

@@ -23,7 +23,7 @@ const Chessboard = () => {
 	return (
 		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
 			<Section title="Convert PGN to PDF">
-				<LichessButton /> or{" "}
+				<LichessButton onClickHandler={() => console.log("Lichess Login")} /> or{" "}
 				<input
 					type="file"
 					id="file-input"
@@ -101,8 +101,8 @@ const Chessboard = () => {
 						</button>
 					</div>
 
-					<HeaderFields />
-					<CustomHeaders />
+					<HeaderFields headers={gameState.headers} />
+					<CustomHeaders headers={gameState.headers} />
 				</div>
 			</div>
 		</main>