Add piece editor page

packages/frontend/src/routes/Home.tsx

@@ -1,47 +1,15 @@
-import { FormEventHandler, useEffect, useId, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { FormEventHandler, useId, useRef, useState } from "react";
 import { client } from "../client";
 import { useLoading } from "../loading";
-import { useStore } from "../store";
 import { Button } from "../styled/Button";
 import { Input } from "../styled/Input";
+import { Link } from "react-router-dom";
 
 export function Home() {
 
-	const navigate = useNavigate();
+	const { isLoading, error, data } = useLoading(() => client.piece.get({ query: {} }));
 
-	const user = useStore(state => state.user);
-	const setUser = useStore(state => state.setUser);
-
-	const { isLoading, error, data } = useLoading(() => client.piece.get());
-
-	const init = async () => {
-		if (user !== null) return;
-
-		const { data, error } = await client.me.get();
-
-		if (error !== null) {
-			navigate("/login");
-			return;
-		}
-
-		setUser(data);
-	};
-
-	useEffect(() => { init(); }, []);
-
-	const onLogoutClick = async () => {
-		const { error } = await client.logout.post();
-
-		if (error !== null) {
-			console.error("Response was not ok");
-		}
-
-		setUser(null);
-		navigate("/login");
-	};
-
-	if (user === null || isLoading) {
+	if (isLoading) {
 		return (
 			<div className="w-full h-full overflow-hidden flex items-center justify-center">
 				<div>Ładowanie…</div>
@@ -50,55 +18,43 @@ export function Home() {
 	}
 
 	return (
-		<div className="w-full h-full overflow-hidden flex flex-col items-stretch">
-			<div className="flex p-4 justify-between items-baseline">
-				<div>
-					Użytkownik: {user.username} (<span className="font-mono text-sm">{user.userId}</span>)
-				</div>
-				<div>
-					<Button type="button" onClick={onLogoutClick}>
-						Wyloguj się
-					</Button>
-				</div>
-			</div>
-			<div className="p-4 overflow-y-auto flex flex-wrap gap-4">
-				{error !== null ? (
-					`Wystąpił błąd: ${error.value}`
-				) : (
-					<table className="grow">
-						<thead>
-							<tr>
-								<th className="p-1 border">ID</th>
-								<th className="p-1 border">Tytuł</th>
-								<th className="p-1 border">Kompozytor</th>
-								<th className="p-1 border">Słowa</th>
-								<th className="p-1 border">Opracowanie</th>
-								<th className="p-1 border">Data dodania</th>
-								<th className="p-1 border">Dodane przez</th>
-								<th className="p-1 border">Data modyfikacji</th>
-								<th className="p-1 border">Zmodyfikowane przez</th>
+		<div className="p-4 overflow-y-auto flex flex-wrap gap-4">
+			{error !== null ? (
+				`Wystąpił błąd: ${error.value}`
+			) : (
+				<table className="grow">
+					<thead>
+						<tr>
+							<th className="p-1 border">ID</th>
+							<th className="p-1 border">Tytuł</th>
+							<th className="p-1 border">Kompozytor</th>
+							<th className="p-1 border">Słowa</th>
+							<th className="p-1 border">Opracowanie</th>
+							<th className="p-1 border">Data dodania</th>
+							<th className="p-1 border">Dodane przez</th>
+							<th className="p-1 border">Data modyfikacji</th>
+							<th className="p-1 border">Zmodyfikowane przez</th>
+						</tr>
+					</thead>
+					<tbody>
+						{data.map((piece) => (
+							<tr key={piece.pieceId}>
+								<td className="p-1 border font-mono text-center text-sm"><Link to={`piece/${piece.pieceId}`}>{piece.pieceId}</Link></td>
+								<td className="p-1 border">{piece.name}</td>
+								<td className="p-1 border">{piece.composer}</td>
+								<td className="p-1 border">{piece.lyricist}</td>
+								<td className="p-1 border">{piece.arranger}</td>
+								<td className="p-1 border text-center">{piece.createdAt}</td>
+								<td className="p-1 border font-mono text-center text-sm">{piece.createdBy}</td>
+								<td className="p-1 border text-center">{piece.modifiedAt ?? "\u2014"}</td>
+								<td className="p-1 border font-mono text-center text-sm">{piece.modifiedBy ?? "\u2014"}</td>
 							</tr>
-						</thead>
-						<tbody>
-							{data.map((piece) => (
-								<tr key={piece.pieceId}>
-									<td className="p-1 border font-mono text-center text-sm">{piece.pieceId}</td>
-									<td className="p-1 border">{piece.name}</td>
-									<td className="p-1 border">{piece.composer}</td>
-									<td className="p-1 border">{piece.lyricist}</td>
-									<td className="p-1 border">{piece.arranger}</td>
-									<td className="p-1 border text-center">{piece.createdAt}</td>
-									<td className="p-1 border font-mono text-center text-sm">{piece.createdBy}</td>
-									<td className="p-1 border text-center">{piece.modifiedAt ?? "\u2014"}</td>
-									<td className="p-1 border font-mono text-center text-sm">{piece.modifiedBy ?? "\u2014"}</td>
-								</tr>
-							))}
-						</tbody>
-					</table>
-				)}
-				<div>
-					<PieceForm />
-				</div>
+						))}
+					</tbody>
+				</table>
+			)}
+			<div>
+				<PieceForm />
 			</div>
 		</div>
 	);

packages/frontend/src/routes/Piece.tsx

@@ -0,0 +1,119 @@
+import type { Piece } from "backend/database";
+import { PieceId } from "common";
+import { FormEventHandler, useId, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
+import { client } from "../client";
+import { useLoading } from "../loading";
+import { Button } from "../styled/Button";
+import { Input } from "../styled/Input";
+
+export function Piece() {
+
+	const id = PieceId(useParams().pieceId!);
+
+	const { isLoading, error, data } = useLoading(() => client.piece.get({ query: { id } }));
+
+	if (isLoading) {
+		return (
+			<div className="w-full h-full overflow-hidden flex items-center justify-center">
+				<div>Ładowanie…</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="p-4 overflow-y-auto flex flex-wrap gap-4">
+			{error !== null ? (
+				`Wystąpił błąd: ${error.value}`
+			) : data[0] === undefined ? (
+				"Utwór nie istnieje"
+			) : (
+				<PieceForm data={data[0]} />
+			)}
+		</div>
+	);
+}
+
+namespace PieceForm {
+	export interface Props {
+		readonly data: Piece;
+	}
+}
+
+function PieceForm(props: PieceForm.Props) {
+
+	const [name, setName] = useState(props.data.name);
+	const [composer, setComposer] = useState(props.data.composer ?? "");
+	const [lyricist, setLyricist] = useState(props.data.lyricist ?? "");
+	const [arranger, setArranger] = useState(props.data.arranger ?? "");
+
+	const nameId = useId();
+	const composerId = useId();
+	const lyricistId = useId();
+	const arrangerId = useId();
+
+	const autoFocusRef = useRef<HTMLInputElement>(null);
+
+	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+		e.preventDefault();
+		if (props.data === null) {
+			return;
+		}
+
+		const { error } = await client.piece({ pieceId: props.data.pieceId }).put({
+			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;
+		}
+
+		autoFocusRef.current?.focus();
+	}
+
+	return (
+		<form className="p-2 flex flex-col gap-2 border rounded" onSubmit={onSubmit}>
+			<label htmlFor={nameId}>Tytuł</label>
+			<Input
+				ref={autoFocusRef}
+				id={nameId}
+				type="text"
+				value={name}
+				required
+				disabled={props.data === null}
+				onChange={(e) => setName(e.target.value)}
+			/>
+			<label htmlFor={composerId}>Kompozytor</label>
+			<Input
+				id={composerId}
+				type="text"
+				value={composer}
+				disabled={props.data === null}
+				onChange={(e) => setComposer(e.target.value)}
+			/>
+			<label htmlFor={lyricistId}>Słowa</label>
+			<Input
+				id={lyricistId}
+				type="text"
+				value={lyricist}
+				disabled={props.data === null}
+				onChange={(e) => setLyricist(e.target.value)}
+			/>
+			<label htmlFor={arrangerId}>Opracowanie</label>
+			<Input
+				id={arrangerId}
+				type="text"
+				value={arranger}
+				disabled={props.data === null}
+				onChange={(e) => setArranger(e.target.value)}
+			/>
+			<Button type="submit" disabled={props.data === null}>
+				Zapisz
+			</Button>
+		</form>
+	);
+}

packages/frontend/src/routes/Root.tsx

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import { client } from "../client";
+import { useStore } from "../store";
+import { Button } from "../styled/Button";
+import { timeout } from "../utils";
+
+export function Root() {
+
+	const navigate = useNavigate();
+
+	const user = useStore(state => state.user);
+	const setUser = useStore(state => state.setUser);
+
+	const init = async () => {
+		if (user !== null) return;
+
+		const { data, error } = await client.me.get();
+		await timeout(1000);
+
+		if (error !== null) {
+			navigate("/login");
+			return;
+		}
+
+		setUser(data);
+	};
+
+	useEffect(() => { init(); }, []);
+
+	const onLogoutClick = async () => {
+		const { error } = await client.logout.post();
+
+		if (error !== null) {
+			console.error("Response was not ok");
+		}
+
+		setUser(null);
+		navigate("/login");
+	};
+
+	if (user === null) {
+		return (
+			<div className="w-full h-full overflow-hidden flex items-center justify-center">
+				<div>Ładowanie…</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="w-full h-full overflow-hidden flex flex-col items-stretch">
+			<div className="flex p-4 justify-between items-baseline">
+				<div>
+					Użytkownik: {user.username} (<span className="font-mono text-sm">{user.userId}</span>)
+				</div>
+				<div>
+					<Button type="button" onClick={onLogoutClick}>
+						Wyloguj się
+					</Button>
+				</div>
+			</div>
+			<Outlet context={user} />
+		</div>
+	);
+}