Add piece editor page

packages/backend/src/database.ts

@@ -1,6 +1,6 @@
 import { Database as BunSqliteDatabase } from "bun:sqlite";
 import { AttachmentId, PieceId, RequestId, SessionId, Sha256, UserId } from "common";
-import { ColumnType, CompiledQuery, CreateTableBuilder, Kysely } from "kysely";
+import { ColumnType, CompiledQuery, CreateTableBuilder, Kysely, Selectable } from "kysely";
 import { BunSqliteDialect } from "kysely-bun-sqlite";
 
 export function generateSessionId(byteLength: number = 32): SessionId {
@@ -35,14 +35,14 @@ export interface AccessLogTable {
 	ip: ColumnType<string | null, string | null, never>;
 }
 
-export interface Attachment {
+export interface AttachmentData {
 	pieceId: ColumnType<PieceId, PieceId, never>;
 	sha256: Sha256;
 	filename: string;
 	mediaType: string;
 }
 
-export interface AttachmentTable extends Attachment, SystemInformation {
+export interface AttachmentTable extends AttachmentData, SystemInformation {
 	attachmentId: ColumnType<AttachmentId, AttachmentId, never>;
 }
 
@@ -51,22 +51,22 @@ export interface FileTable {
 	data: ColumnType<Uint8Array, Uint8Array, never>;
 }
 
-export interface Piece {
+export interface PieceData {
 	name: string;
 	composer: string | null;
 	lyricist: string | null;
 	arranger: string | null;
 }
 
-export interface PieceTable extends Piece, SystemInformation {
+export interface PieceTable extends PieceData, SystemInformation {
 	pieceId: ColumnType<PieceId, PieceId, never>;
 }
 
-export interface Session {
+export interface SessionData {
 	userId: UserId;
 }
 
-export interface SessionTable extends Session {
+export interface SessionTable extends SessionData {
 	sessionId: ColumnType<SessionId, SessionId, never>;
 	expiresAt: string;
 }
@@ -78,6 +78,13 @@ export interface UserTable {
 	admin: number;
 }
 
+export type AccessLog = Selectable<AccessLogTable>;
+export type Attachment = Selectable<AttachmentTable>;
+export type File = Selectable<FileTable>;
+export type Piece = Selectable<PieceTable>;
+export type Session = Selectable<SessionTable>;
+export type User = Selectable<UserTable>;
+
 function systemInformation<TB extends string, C extends string>(schema: CreateTableBuilder<TB, C>) {
 	return schema
 		.addColumn("createdBy", "text", (c) => c.references("User.userId").onDelete("set null").onUpdate("cascade"))

packages/frontend/src/app.tsx

@@ -3,17 +3,29 @@ import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Home } from "./routes/Home";
 import { Login } from "./routes/Login";
+import { Piece } from "./routes/Piece";
+import { Root } from "./routes/Root";
 import "./style.css";
 
 const router = createBrowserRouter([
 	{
 		path: "/",
-		element: <Home />,
+		Component: Root,
+		children: [
+			{
+				index: true,
+				Component: Home,
+			},
+			{
+				path: "piece/:pieceId",
+				Component: Piece,
+			},
+		],
 	},
 	{
 		path: "/login",
-		element: <Login />,
+		Component: Login,
-	}
+	},
 ]);
 
 const rootElement = document.getElementById("root") as HTMLDivElement;

packages/frontend/src/routes/Home.tsx

@@ -1,47 +1,15 @@
-import { FormEventHandler, useEffect, useId, useRef, useState } from "react";
+import { FormEventHandler, useId, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
 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);
+	if (isLoading) {
-	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) {
 		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="p-4 overflow-y-auto flex flex-wrap gap-4">
-			<div className="flex p-4 justify-between items-baseline">
+			{error !== null ? (
-				<div>
+				`Wystąpił błąd: ${error.value}`
-					Użytkownik: {user.username} (<span className="font-mono text-sm">{user.userId}</span>)
+			) : (
-				</div>
+				<table className="grow">
-				<div>
+					<thead>
-					<Button type="button" onClick={onLogoutClick}>
+						<tr>
-						Wyloguj się
+							<th className="p-1 border">ID</th>
-					</Button>
+							<th className="p-1 border">Tytuł</th>
-				</div>
+							<th className="p-1 border">Kompozytor</th>
-			</div>
+							<th className="p-1 border">Słowa</th>
-			<div className="p-4 overflow-y-auto flex flex-wrap gap-4">
+							<th className="p-1 border">Opracowanie</th>
-				{error !== null ? (
+							<th className="p-1 border">Data dodania</th>
-					`Wystąpił błąd: ${error.value}`
+							<th className="p-1 border">Dodane przez</th>
-				) : (
+							<th className="p-1 border">Data modyfikacji</th>
-					<table className="grow">
+							<th className="p-1 border">Zmodyfikowane przez</th>
-						<thead>
+						</tr>
-							<tr>
+					</thead>
-								<th className="p-1 border">ID</th>
+					<tbody>
-								<th className="p-1 border">Tytuł</th>
+						{data.map((piece) => (
-								<th className="p-1 border">Kompozytor</th>
+							<tr key={piece.pieceId}>
-								<th className="p-1 border">Słowa</th>
+								<td className="p-1 border font-mono text-center text-sm"><Link to={`piece/${piece.pieceId}`}>{piece.pieceId}</Link></td>
-								<th className="p-1 border">Opracowanie</th>
+								<td className="p-1 border">{piece.name}</td>
-								<th className="p-1 border">Data dodania</th>
+								<td className="p-1 border">{piece.composer}</td>
-								<th className="p-1 border">Dodane przez</th>
+								<td className="p-1 border">{piece.lyricist}</td>
-								<th className="p-1 border">Data modyfikacji</th>
+								<td className="p-1 border">{piece.arranger}</td>
-								<th className="p-1 border">Zmodyfikowane przez</th>
+								<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>
+					</tbody>
-							{data.map((piece) => (
+				</table>
-								<tr key={piece.pieceId}>
+			)}
-									<td className="p-1 border font-mono text-center text-sm">{piece.pieceId}</td>
+			<div>
-									<td className="p-1 border">{piece.name}</td>
+				<PieceForm />
-									<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>
 			</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>
+	);
+}

packages/frontend/src/utils.ts

@@ -0,0 +1,3 @@
+export function timeout(timeMs: number): Promise<void> {
+	return new Promise<void>((resolve) => setTimeout(resolve, timeMs));
+}