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ę

packages/frontend/src/store.ts

@@ -1,20 +1,46 @@
-import { UserId } from "common";
+import { PieceId, UserId } from "common";
 import * as Function from "common/Function";
 import { useLayoutEffect, useState } from "react";
 
 export type Update<T> = T | ((prev: T) => T);
 export type Updater<T> = (action: Update<T>) => void;
 
-export const mapProp = <const K extends string, T>(prop: K, action: T) => <O extends { readonly [_ in K]: T }>(object: O): O => {
-	return Object.freeze({ ...object, [prop]: typeof action === "function" ? action(object[prop]) : action });
+export const mapProp = <const K extends string, T>(prop: K, action: Update<T>) => <O extends { readonly [_ in K]: T }>(object: O): O => {
+	return Object.freeze({ ...object, [prop]: typeof action === "function" ? (action as (prev: T) => T)(object[prop]) : action });
+};
+
+export const removeProp = <const K extends string, T>(prop: K) => <O extends { readonly [_ in K]: T}>({ [prop]: _, ...rest }: O): Readonly<Omit<O, K>> => {
+	return Object.freeze(rest);
+};
+
+export const makeMap = <const K extends string, T extends { readonly [k in K]: PropertyKey }>(prop: K, array: readonly T[]): { readonly [_ in T[K]]: T } => {
+	return Object.freeze(Object.fromEntries(array.map((item) => [item[prop], item])) as { [k in T[K]]: T });
 };
 
 export namespace Store {
 	export interface User {
-		readonly username: string;
 		readonly userId: UserId;
+		readonly username: string;
 		readonly admin: boolean;
 	}
+
+	export interface Piece {
+		readonly pieceId: PieceId;
+		readonly name: string;
+		readonly composer: string | null;
+		readonly lyricist: string | null;
+		readonly arranger: string | null;
+		readonly createdBy: UserId | null;
+		readonly createdAt: string;
+		readonly modifiedBy: UserId | null;
+		readonly modifiedAt: string | null;
+	}
+
+	export namespace Piece {
+		export interface Map {
+			readonly [_: PieceId]: Store.Piece;
+		}
+	}
 }
 
 export interface Store {
@@ -22,11 +48,16 @@ export interface Store {
 	readonly loginPassword: string;
 
 	readonly user: Store.User | null;
+	readonly pieces: Store.Piece.Map;
 
 	readonly setLoginUsername: Updater<string>;
 	readonly setLoginPassword: Updater<string>;
 
 	readonly setUser: Updater<Store.User | null>;
+
+	readonly setPieces: (pieces: readonly Store.Piece[]) => void;
+	readonly setPiece: (piece: Store.Piece) => void;
+	readonly deletePiece: (pieceId: PieceId) => void;
 }
 
 let store: Store = Object.freeze<Store>({
@@ -34,11 +65,16 @@ let store: Store = Object.freeze<Store>({
 	loginPassword: "",
 
 	user: null,
+	pieces: Object.freeze({}),
 
 	setLoginUsername: (action) => set(mapProp("loginUsername", action)),
 	setLoginPassword: (action) => set(mapProp("loginPassword", action)),
 
 	setUser: (action) => set(mapProp("user", action)),
+
+	setPieces: (pieces) => set(mapProp("pieces", makeMap("pieceId", pieces))),
+	setPiece: (piece) => set(mapProp("pieces", mapProp(piece.pieceId, piece))),
+	deletePiece: (pieceId) => set(mapProp("pieces", removeProp(pieceId))),
 });
 
 // --- STORE IMPLEMENTATION ----------------------------------------------------

packages/frontend/src/styled/Input.tsx

@@ -1,13 +1,14 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes } from "react";
 
 export namespace Input {
 	export type Props = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className">;
 }
 
-export function Input({ children, ...props }: Input.Props) {
+export const Input = forwardRef<HTMLInputElement, Input.Props>(function Input({ children, ...props }: Input.Props, ref) {
 	return (
 		<input
 			{...props}
+			ref={ref}
 			className="
 				w-[32ch]
 				p-2
@@ -24,4 +25,4 @@ export function Input({ children, ...props }: Input.Props) {
 			{children}
 		</input>
 	);
-}
+});