Attachment CRUD API, show piece table and add piece form

packages/frontend/src/routes/Home.tsx

@@ -1,8 +1,9 @@
-import { useEffect } from "react";
+import { FormEventHandler, useEffect, useId, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { client } from "../client";
-import { useStore } from "../store";
+import { Store, useStore } from "../store";
 import { Button } from "../styled/Button";
+import { Input } from "../styled/Input";
 
 export function Home() {
 
@@ -11,6 +12,20 @@ export function Home() {
 	const user = useStore(state => state.user);
 	const setUser = useStore(state => state.setUser);
 
+	const pieces = useStore(state => state.pieces);
+	const setPieces = useStore(state => state.setPieces);
+
+	const loadPieces = async () => {
+		const { data, error } = await client.piece.get();
+
+		if (error !== null) {
+			console.error(error.value);
+			return;
+		}
+
+		setPieces(data);
+	};
+
 	const init = async () => {
 		if (user !== null) return;
 
@@ -22,6 +37,7 @@ export function Home() {
 		}
 
 		setUser(data);
+		await loadPieces();
 	};
 
 	useEffect(() => {
@@ -59,6 +75,110 @@ export function Home() {
 					</Button>
 				</div>
 			</div>
+			<div>
+				<table className="w-full">
+					<thead>
+						<tr>
+							<th className="p-2 border">Tytuł</th>
+							<th className="p-2 border">Kompozytor</th>
+							<th className="p-2 border">Słowa</th>
+							<th className="p-2 border">Opracowanie</th>
+						</tr>
+					</thead>
+					<tbody>
+						{(Object.values(pieces) as Store.Piece[]).map((piece) => (
+							<tr key={piece.pieceId}>
+								<td className="p-2 border">{piece.name}</td>
+								<td className="p-2 border">{piece.composer}</td>
+								<td className="p-2 border">{piece.lyricist}</td>
+								<td className="p-2 border">{piece.arranger}</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+			<div className="self-center">
+				<PieceForm />
+			</div>
 		</div>
 	);
 }
+
+function PieceForm() {
+
+	const [name, setName] = useState("");
+	const [composer, setComposer] = useState("");
+	const [lyricist, setLyricist] = useState("");
+	const [arranger, setArranger] = useState("");
+
+	const nameId = useId();
+	const composerId = useId();
+	const lyricistId = useId();
+	const arrangerId = useId();
+
+	const addPiece = useStore(state => state.setPiece);
+
+	const autoFocusRef = useRef<HTMLInputElement>(null);
+
+	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+		e.preventDefault();
+
+		const { data, error } = await client.piece.post({
+			name,
+			composer: composer.length > 0 ? composer : null,
+			lyricist: lyricist.length > 0 ? lyricist : null,
+			arranger: arranger.length > 0 ? arranger : null,
+		});
+
+		if (error) {
+			console.error(error.value);
+			return;
+		}
+
+		setName("");
+		setComposer("");
+		setLyricist("");
+		setArranger("");
+
+		addPiece(data);
+		autoFocusRef.current?.focus();
+	}
+
+	return (
+		<form className="p-2 flex flex-col gap-2 border border-black rounded dark:border-white" onSubmit={onSubmit}>
+			<label htmlFor={nameId}>Tytuł</label>
+			<Input
+				ref={autoFocusRef}
+				id={nameId}
+				type="text"
+				value={name}
+				required
+				onChange={(e) => setName(e.target.value)}
+			/>
+			<label htmlFor={composerId}>Kompozytor</label>
+			<Input
+				id={composerId}
+				type="text"
+				value={composer}
+				onChange={(e) => setComposer(e.target.value)}
+			/>
+			<label htmlFor={lyricistId}>Słowa</label>
+			<Input
+				id={lyricistId}
+				type="text"
+				value={lyricist}
+				onChange={(e) => setLyricist(e.target.value)}
+			/>
+			<label htmlFor={arrangerId}>Opracowanie</label>
+			<Input
+				id={arrangerId}
+				type="text"
+				value={arranger}
+				onChange={(e) => setArranger(e.target.value)}
+			/>
+			<Button type="submit">
+				Dodaj
+			</Button>
+		</form>
+	);
+}

packages/frontend/src/routes/Login.tsx

@@ -51,7 +51,7 @@ export function Login() {
 					value={loginUsername}
 					autoFocus
 					required
-					onInput={(e) => setLoginUsername(e.currentTarget.value)}
+					onChange={(e) => setLoginUsername(e.target.value)}
 				/>
 				<label htmlFor={passwordId}>Hasło</label>
 				<Input
@@ -59,7 +59,7 @@ export function Login() {
 					type="password"
 					value={loginPassword}
 					required
-					onInput={(e) => setLoginPassword(e.currentTarget.value)}
+					onChange={(e) => setLoginPassword(e.target.value)}
 				/>
 				<Button type="submit">
 					Zaloguj się