Add effect because I coldn't resist

packages/backend/src/app.ts

@@ -1,8 +1,8 @@
 import cors from "@elysiajs/cors";
 import { swagger } from "@elysiajs/swagger";
-import { AttachmentId, PieceId, RequestId, SessionId, Sha256 } from "common";
+import { AttachmentId, PieceId, RequestId, SessionId, Sha256, UserId } from "common";
 import * as Function from "common/Function";
-import { Elysia, error, form, t } from "elysia";
+import { Elysia, error, t } from "elysia";
 import { sql } from "kysely";
 import { generateSessionId, initDatabase } from "./database";
 
@@ -148,6 +148,35 @@ const app = new Elysia()
 			.execute();
 	})
 
+	// --- MARK: USER MANAGEMENT -----------------------------------------------
+
+	.get("/user/:userId", async ({ db, params: { userId }, user }) => {
+
+		if (user === null) {
+			return error("Unauthorized");
+		}
+
+		const res = await db
+			.selectFrom("User")
+			.select(["userId", "username", "admin"])
+			.where("userId", "=", userId)
+			.executeTakeFirst();
+
+		if (res === undefined) {
+			return error("Not Found");
+		}
+
+		return {
+			userId: res.userId,
+			username: res.username,
+			admin: res.admin !== 0,
+		};
+	}, {
+		params: t.Object({
+			userId: tbranded<UserId>(),
+		}),
+	})
+
 	// --- MARK: PIECE CRUD ----------------------------------------------------
 
 	.post("/piece", async ({ db, body: { name, composer, lyricist, arranger }, user }) => {
@@ -182,19 +211,66 @@ const app = new Elysia()
 
 		let q = db
 			.selectFrom("Piece")
-			.selectAll()
+			.select("pieceId")
 			.orderBy(["name", "composer", "arranger"])
-			.limit(100);
+			.offset(query.offset ?? 0)
+			.limit(query.limit ?? 100);
 
-		if (query.id !== undefined) {
-			q = q.where("pieceId", "=", query.id);
+		if (query.name !== undefined) {
+			q = q.where("name", "like", "%" + query.name + "%");
+		}
+
+		if (query.author !== undefined) {
+			q = q.where((eb) => eb.or([
+				eb("composer", "like", "%" + query.author + "%"),
+				eb("arranger", "like", "%" + query.author + "%"),
+				eb("lyricist", "like", "%" + query.author + "%"),
+			]))
 		}
 
 		const res = await q.execute();
-		return res;
+		return res.map(({ pieceId }) => pieceId);
 	}, {
 		query: t.Object({
-			id: t.Optional(tbranded<PieceId>()),
+			name: t.Optional(t.String()),
+			author: t.Optional(t.String()),
+			offset: t.Optional(t.Integer({ minimum: 0 })),
+			limit: t.Optional(t.Integer({ minimum: 1, maximum: 100 })),
+		}),
+	})
+
+	.get("/piece/:pieceId", async ({ db, query, params: { pieceId }, user }) => {
+
+		if (user === null) {
+			return error("Unauthorized");
+		}
+
+		const piece = await db
+			.selectFrom("Piece")
+			.selectAll()
+			.where("pieceId", "=", pieceId)
+			.executeTakeFirst();
+
+		if (piece === undefined) {
+			return error("Not Found");
+		}
+
+		const attachments = await db
+			.selectFrom("Attachment")
+			.selectAll()
+			.where("pieceId", "=", pieceId)
+			.execute();
+
+		return {
+			...piece,
+			attachments: attachments.map(({ sha256, ...rest }) => ({
+				sha256: Buffer.from(sha256).toString("hex"),
+				...rest,
+			})),
+		}
+	}, {
+		params: t.Object({
+			pieceId: tbranded<PieceId>(),
 		}),
 	})
 
@@ -277,7 +353,10 @@ const app = new Elysia()
 			.returningAll()
 			.executeTakeFirstOrThrow();
 
-		return res;
+		return {
+			...res,
+			sha256: Buffer.from(res.sha256).toString("hex"),
+		};
 	}, {
 		body: t.Object({
 			filename: t.String({ minLength: 1 }),
@@ -289,26 +368,6 @@ const app = new Elysia()
 		}),
 	})
 
-	.get("piece/:pieceId/attachment", async ({ db, params: { pieceId }, user }) => {
-
-		if (user === null) {
-			return error("Unauthorized");
-		}
-
-		const res = await db
-			.selectFrom("Attachment")
-			.selectAll()
-			.where("pieceId", "=", pieceId)
-			.orderBy("filename")
-			.execute();
-
-		return res;
-	}, {
-		params: t.Object({
-			pieceId: tbranded<PieceId>(),
-		}),
-	})
-
 	/* NOTE The piece ID is reduntant, because attachment IDs are unique for the
 	 * entire DB, not just per piece. However, we consider a piece to be the
 	 * sole owner of an attachment, i.e. attachments are not shared (attachments
@@ -316,7 +375,7 @@ const app = new Elysia()
 	 * reflect the ownership in the URLs.
 	 */
 
-	.get("piece/:pieceId/attachment/:attachmentId", async ({ db, params: { pieceId, attachmentId }, user }) => {
+	.get("piece/:pieceId/attachment/:attachmentId", async ({ db, params: { pieceId, attachmentId }, user, set }) => {
 
 		if (user === null) {
 			return error("Unauthorized");
@@ -336,11 +395,8 @@ const app = new Elysia()
 			return error("Not Found");
 		}
 
-		return form({
-			filename: res.filename,
-			mediaType: res.mediaType,
-			data: new File([res.data], res.filename, { type: res.mediaType }),
-		});
+		set.headers["content-disposition"] = `attachment; filename="${res.filename}"`;
+		return Bun.file(res.data, { type: res.mediaType });
 	}, {
 		params: t.Object({
 			pieceId: tbranded<PieceId>(),

packages/frontend/package.json

@@ -24,6 +24,7 @@
 		"@radix-ui/react-slot": "catalog:",
 		"clsx": "catalog:",
 		"common": "workspace:^",
+		"effect": "catalog:",
 		"lucide-react": "catalog:",
 		"opensheetmusicdisplay": "catalog:",
 		"react": "catalog:",

packages/frontend/src/cache.ts

@@ -0,0 +1,111 @@
+import type * as Db from "backend/database";
+import { AttachmentId, PieceId, UserId } from "common";
+import { Cache, Duration, Effect, Option, pipe } from "effect";
+import { client, mapResponse } from "./client";
+
+export interface User {
+	readonly userId: UserId;
+	readonly username: string;
+	readonly admin: boolean;
+}
+
+export interface SystemInformation {
+	readonly createdBy: Option.Option<User>;
+	readonly createdAt: string;
+	readonly modifiedBy: Option.Option<User>;
+	readonly modifiedAt: Option.Option<string>;
+}
+
+export interface Attachment extends SystemInformation {
+	readonly attachmentId: AttachmentId;
+	readonly pieceId: PieceId;
+	readonly sha256: string;
+	readonly filename: string;
+	readonly mediaType: string;
+}
+
+export interface Piece extends SystemInformation {
+	readonly pieceId: PieceId;
+	readonly name: string;
+	readonly composer: Option.Option<string>;
+	readonly lyricist: Option.Option<string>;
+	readonly arranger: Option.Option<string>;
+	readonly attachments: readonly Attachment[];
+}
+
+interface DbSystemInformation {
+	readonly createdBy: UserId | null;
+	readonly createdAt: string;
+	readonly modifiedBy: UserId | null;
+	readonly modifiedAt: string | null;
+}
+
+export const denormalizeSystemInformation = <T extends DbSystemInformation>({
+	createdBy,
+	modifiedBy,
+	modifiedAt,
+	...rest
+}: T) => pipe(
+	Effect.all({
+		createdBy: pipe(
+			createdBy,
+			Effect.fromNullable,
+			Effect.flatMap((userId) => Effect.uninterruptible(userCache.get(userId))),
+			Effect.optionFromOptional,
+		),
+		modifiedBy: pipe(
+			modifiedBy,
+			Effect.fromNullable,
+			Effect.flatMap((userId) => Effect.uninterruptible(userCache.get(userId))),
+			Effect.optionFromOptional,
+		),
+	}, { concurrency: "unbounded" }),
+	Effect.map((si) => Object.freeze({
+		...rest,
+		...si,
+		modifiedAt: Option.fromNullable(modifiedAt),
+	})),
+);
+
+export const denormalizePiece = ({
+	composer,
+	lyricist,
+	arranger,
+	attachments,
+	...rest
+}: Db.Piece & { attachments: (Omit<Db.Attachment, "sha256"> & { sha256: string })[] }) => pipe(
+	Effect.all({
+		attachments: Effect.all(attachments.map(denormalizeSystemInformation), { concurrency: "unbounded" }),
+	}, { concurrency: "unbounded" }),
+	Effect.map((piece) => Object.freeze({
+		...rest,
+		...piece,
+		composer: Option.fromNullable(composer),
+		lyricist: Option.fromNullable(lyricist),
+		arranger: Option.fromNullable(arranger),
+	})),
+	Effect.flatMap(denormalizeSystemInformation),
+);
+
+export const userLookup = (userId: UserId) => pipe(
+	Effect.promise((signal) => client.user({ userId }).get({ fetch: { signal } })),
+	Effect.flatMap(mapResponse),
+);
+
+export const pieceLookup = (pieceId: PieceId) => pipe(
+	Effect.promise((signal) => client.piece({ pieceId }).get({ fetch: { signal } })),
+	Effect.flatMap(mapResponse),
+	Effect.flatMap(denormalizePiece),
+);
+
+export const userCache = Effect.runSync(Cache.make({
+	capacity: Infinity,
+	timeToLive: Duration.infinity,
+	lookup: userLookup,
+}));
+
+export const pieceCache = Effect.runSync(Cache.make({
+	capacity: Infinity,
+	timeToLive: Infinity,
+	lookup: pieceLookup,
+}));

packages/frontend/src/client.ts

@@ -1,4 +1,9 @@
-import { treaty } from "@elysiajs/eden";
+import { Treaty, treaty } from "@elysiajs/eden";
 import type { App } from "backend/app";
+import { Effect } from "effect";
+
+export type ResponseEffect<R extends Record<number, unknown>> = Effect.Effect<R[200], Exclude<keyof R, 200> extends never ? never : { [Status in keyof R]: { status: Status, value: R[Status] } }[Exclude<keyof R, 200>]>;
 
 export const client = treaty<App>("localhost:3000", { fetch: { credentials: "include" } });
+
+export const mapResponse = <R extends Record<number, unknown>>({ error, data }: Treaty.TreatyResponse<R>): ResponseEffect<R> => error !== null ? Effect.fail(error) as any : Effect.succeed(data);

packages/frontend/src/components/ui/dropdown-menu.tsx

@@ -92,7 +92,7 @@ const DropdownMenuCheckboxItem = forwardRef<
 			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-stone-100 focus:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-800 dark:focus:text-stone-50",
 			className
 		)}
-		checked={checked}
+		{...(checked !== undefined) ? { checked } : undefined}
 		{...props}
 	>
 		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">

packages/frontend/src/hooks/useLoading.ts

@@ -1,11 +1,9 @@
 import { mapProp, Updater, useStore } from "@/hooks/useStore";
 import { Treaty } from "@elysiajs/eden";
-import { ELYSIA_FORM_DATA } from "elysia";
+import { Effect, Fiber, pipe } from "effect";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-type FormDataFix<T> = T extends { [ELYSIA_FORM_DATA]: infer U } ? U : T;
-
 export type LoadingResult<R extends Record<number, unknown>> =
 	| {
 		isLoading: true,
@@ -13,9 +11,9 @@ export type LoadingResult<R extends Record<number, unknown>> =
 		error: null,
 	} | {
 		isLoading: false,
-		data: FormDataFix<R[200]>,
+		data: R[200],
 		error: null,
-		setData: Updater<FormDataFix<R[200]>>,
+		setData: Updater<R[200]>,
 	} | {
 		isLoading: false,
 		data: null,
@@ -25,7 +23,7 @@ export type LoadingResult<R extends Record<number, unknown>> =
 	}
 	;
 
-export function useLoading<R extends Record<number, unknown>>(fn: () => Promise<Treaty.TreatyResponse<R>>) {
+export function useLoading<R extends Record<number, unknown>>(fn: () => Promise<Treaty.TreatyResponse<R>>, deps: React.DependencyList) {
 
 	const navigate = useNavigate();
 
@@ -56,6 +54,69 @@ export function useLoading<R extends Record<number, unknown>>(fn: () => Promise<
 		});
 
 		return () => { cancelled = true; };
+	}, deps);
+
+	return result;
+}
+
+const IS_LOADING = Object.freeze({
+	isLoading: true,
+	data: null,
+	error: null,
+	setData: null,
+});
+
+export type LoadingEffectResult<A, E> =
+	| {
+		readonly isLoading: true,
+		readonly data: null,
+		readonly error: null,
+		readonly setData: null,
+	} | {
+		readonly isLoading: false,
+		readonly data: A,
+		readonly error: null,
+		readonly setData: Updater<A>,
+	} | {
+		readonly isLoading: false,
+		readonly data: null,
+		readonly error: E,
+		readonly setData: null,
+	}
+	;
+
+function mapSuccess<A>(data: A) {
+	return Object.freeze({ isLoading: false as const, data, error: null });
+}
+
+function mapFailure<E>(error: E) {
+	return Object.freeze({ isLoading: false as const, data: null, error });
+}
+
+export function useLoadingEffect<A, E>(effect: Effect.Effect<A, E>) {
+
+	const [result, setResult] = useState<LoadingEffectResult<A, E>>(IS_LOADING);
+
+	useEffect(() => {
+		const fiber = pipe(
+			effect,
+			Effect.match({
+				onSuccess: mapSuccess,
+				onFailure: mapFailure,
+			}),
+			Effect.tap((result) => {
+				setResult({
+					...result,
+					setData: ((action: any) => (setResult as any)(mapProp("data", action))) as any,
+				});
+			}),
+			Effect.runFork,
+		);
+		const interruptEffect = Fiber.interrupt(fiber);
+
+		return () => {
+			Effect.runFork(interruptEffect);
+		};
 	}, []);
 
 	return result;

packages/frontend/src/routes/Attachment.tsx

@@ -11,14 +11,14 @@ export default function Attachment() {
 	const pieceId = PieceId(params.pieceId!);
 	const attachmentId = AttachmentId(params.attachmentId!);
 
-	const { isLoading, error, data } = useLoading(() => client.piece({ pieceId }).attachment({ attachmentId }).get());
+	const { isLoading, error, data } = useLoading(() => client.piece({ pieceId }).attachment({ attachmentId }).get(), [pieceId, attachmentId]);
 
 	const containerRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		if (isLoading || error !== null) return;
 
-		const url = URL.createObjectURL(data?.data);
+		const url = URL.createObjectURL(data);
 
 		const render = () => osmd.render();
 

packages/frontend/src/routes/Home.tsx

@@ -1,17 +1,28 @@
+import { pieceCache, User } from "@/cache";
 import { client } from "@/client";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { useLoading } from "@/hooks/useLoading";
+import { useLoading, useLoadingEffect } from "@/hooks/useLoading";
+import { PieceId } from "common";
+import { Cause, Effect, Option } from "effect";
 import { Loader2, Plus } from "lucide-react";
 import { FormEventHandler, ReactNode, useId, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 export function Home() {
 
-	const { isLoading, error, data } = useLoading(() => client.piece.get({ query: {} }));
+	const [name, setName] = useState("");
+	const [author, setAuthor] = useState("");
+
+	const { isLoading, error, data: pieceIds } = useLoading(() => client.piece.get({
+		query: {
+			...(name !== "" ? { name } : undefined),
+			...(author !== "" ? { author } : undefined),
+		},
+	}), [name, author]);
 
 	if (isLoading) {
 		return (
@@ -24,8 +35,9 @@ export function Home() {
 	return (
 		<div className="p-4 overflow-y-auto flex flex-col items-start gap-4">
 			{error !== null ? (
-				`Wystąpił błąd: ${error.value}`
+				Cause.isUnknownException(error) ? "Wystąpił nieznany błąd" : `Wystąpił błąd: ${error.value}`
 			) : (<>
+				<div className="flex flex-row gap-4">
 					<Dialog>
 						<DialogTrigger asChild>
 							<Button variant="outline">
@@ -34,6 +46,21 @@ export function Home() {
 						</DialogTrigger>
 						<AddPieceDialogContent />
 					</Dialog>
+					<Input
+						className="w-[32ch]"
+						type="text"
+						placeholder="Tytuł"
+						value={name}
+						onChange={(e) => setName(e.target.value)}
+					/>
+					<Input
+						className="w-[32ch]"
+						type="text"
+						placeholder="Autor"
+						value={author}
+						onChange={(e) => setAuthor(e.target.value)}
+					/>
+				</div>
 				<Table>
 					<TableHeader>
 						<TableRow>
@@ -44,29 +71,7 @@ export function Home() {
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-						{data.map((piece) => {
-							const composerParts: ReactNode[] = [];
-							if (piece.composer !== null) composerParts.push(piece.composer);
-							if (piece.arranger !== null) composerParts.push(`opracowanie: ${piece.arranger}`);
-							if (piece.lyricist !== null) composerParts.push(`słowa: ${piece.lyricist}`);
-							if (composerParts.length === 0) composerParts.push(<em>Nieznani</em>);
-							return (
-								<TableRow key={piece.pieceId}>
-									<TableCell><Link className="underline" to={`piece/${piece.pieceId}`}>{piece.name}</Link></TableCell>
-									<TableCell>{...composerParts.flatMap((x, i, a) => i < a.length - 1 ? [x, <br />] : [x])}</TableCell>
-									<TableCell className="text-center font-mono text-xs">
-										{piece.createdAt}
-										{piece.createdBy !== null && <><br />przez {piece.createdBy}</>}
-									</TableCell>
-									<TableCell className="text-center font-mono text-xs">
-										{piece.modifiedAt === null && piece.modifiedBy === null ? "\u2014"
-											: piece.modifiedAt !== null && piece.modifiedBy === null ? piece.modifiedAt
-												: piece.modifiedAt === null ? `przez ${piece.createdBy}`
-													: <>{piece.createdAt}<br />przez {piece.createdBy}</>}
-									</TableCell>
-								</TableRow>
-							);
-						})}
+						{pieceIds.map((pieceId) => <PieceRow key={pieceId} pieceId={pieceId} />)}
 					</TableBody>
 				</Table>
 			</>)}
@@ -74,6 +79,61 @@ export function Home() {
 	);
 }
 
+namespace PieceRow {
+	export interface Props {
+		readonly pieceId: PieceId;
+	}
+}
+
+function PieceRow(props: PieceRow.Props) {
+
+	const { isLoading, error, data: piece } = useLoadingEffect(Effect.uninterruptible(pieceCache.get(props.pieceId)));
+
+	if (isLoading) {
+		return (
+			<TableRow>
+				<TableCell colSpan={4}>Ładowanie…</TableCell>
+			</TableRow>
+		);
+	}
+
+	if (error !== null) {
+		return (
+			<TableRow>
+				<TableCell colSpan={4}>Wystąpił błąd: {error.value}</TableCell>
+			</TableRow>
+		);
+	}
+
+	const composerParts: ReactNode[] = [];
+
+	if (Option.isSome(piece.composer)) composerParts.push(piece.composer.value);
+	if (Option.isSome(piece.arranger)) composerParts.push(`opracowanie: ${piece.arranger.value}`);
+	if (Option.isSome(piece.lyricist)) composerParts.push(`słowa: ${piece.lyricist.value}`);
+	if (composerParts.length === 0) composerParts.push(<em>Nieznani</em>);
+
+	return (
+		<TableRow>
+			<TableCell>
+				<Link className="underline" to={`piece/${piece.pieceId}`}>{piece.name}</Link>
+			</TableCell>
+			<TableCell>
+				{...composerParts.flatMap((x, i, a) => i < a.length - 1 ? [x, <br />] : [x])}
+			</TableCell>
+			<TableCell className="text-center text-xs">
+				{piece.createdAt}
+				{Option.isSome(piece.createdBy) && <><br />przez {piece.createdBy.value.username}</>}
+			</TableCell>
+			<TableCell className="text-center text-xs">
+				{Option.isNone(piece.modifiedAt) && Option.isNone(piece.modifiedBy) ? "\u2014"
+					: Option.isSome(piece.modifiedAt) && Option.isNone(piece.modifiedBy) ? piece.modifiedAt.value
+						: Option.isNone(piece.modifiedAt) ? `przez ${(piece.modifiedBy as Option.Some<User>).value.username}`
+							: <>{piece.modifiedAt.value}<br />przez {(piece.modifiedBy as Option.Some<User>).value.username}</>}
+			</TableCell>
+		</TableRow>
+	);
+}
+
 function AddPieceDialogContent() {
 
 	const navigate = useNavigate();

packages/frontend/src/routes/Login.tsx

@@ -36,7 +36,7 @@ export function Login() {
 				password: loginPassword,
 			});
 
-			if (error) {
+			if (error !== null) {
 				console.error(error.value);
 				return;
 			}

packages/frontend/src/routes/Piece.tsx

@@ -1,16 +1,17 @@
+import { Attachment, denormalizeSystemInformation, type Piece, pieceCache, User } from "@/cache";
 import { client } from "@/client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { useLoading } from "@/hooks/useLoading";
-import { Updater } from "@/hooks/useStore";
+import { useLoadingEffect } from "@/hooks/useLoading";
+import { mapProp, Update, Updater } from "@/hooks/useStore";
 import { timeout } from "@/lib/utils";
 import { Label } from "@radix-ui/react-label";
-import type { Attachment, Piece } from "backend/database";
 import clsx from "clsx";
 import { PieceId } from "common";
 import { getMediaTypeForFilename } from "common/MediaType";
-import { ELYSIA_FORM_DATA } from "elysia";
+import { Cause, Effect, Option } from "effect";
+import { constant } from "effect/Function";
 import { Download, Loader2, Trash, UploadCloud } from "lucide-react";
 import { DragEventHandler, FormEventHandler, MouseEvent, useCallback, useId, useState } from "react";
 import { Link, useParams } from "react-router-dom";
@@ -19,10 +20,14 @@ export function Piece() {
 
 	const id = PieceId(useParams().pieceId!);
 
-	const piece = useLoading(() => client.piece.get({ query: { id } }));
-	const attachments = useLoading(() => client.piece({ pieceId: id }).attachment.get());
+	const { isLoading, error, data, setData } = useLoadingEffect(Effect.uninterruptible(pieceCache.get(id)));
 
-	if (piece.isLoading || attachments.isLoading) {
+	const setAttachments = useCallback((action: Update<readonly Attachment[]>) => {
+		setData!(mapProp("attachments", action));
+		Effect.runFork(pieceCache.invalidate(id));
+	}, [setData]);
+
+	if (isLoading) {
 		return (
 			<div className="w-full h-full overflow-hidden flex items-center justify-center">
 				<div>Ładowanie…</div>
@@ -32,18 +37,16 @@ export function Piece() {
 
 	return (
 		<div className="p-4 overflow-y-auto flex flex-wrap items-start gap-4">
-			{piece.error !== null || attachments.error !== null ? (
-				`Wystąpił błąd: ${[piece.error?.value, attachments.error?.value].filter(Boolean).join(", ")}`
-			) : piece.data[0] === undefined ? (
-				"Utwór nie istnieje"
+			{error !== null ? (
+				Cause.isUnknownException(error) ? "Wystąpił nieznany błąd" : `Wystąpił błąd: ${error.value}`
 			) : (<>
 				<div className="flex flex-col gap-4 p-4 border rounded">
 					<h3 className="font-bold text-lg">Utwór</h3>
-					<PieceForm piece={piece.data[0]} />
+					<PieceForm piece={data} />
 					<h3 className="font-bold text-lg">Załączniki</h3>
-					<AttachmentForm pieceId={piece.data[0].pieceId} setAttachments={attachments.setData} />
+					<AttachmentForm pieceId={id} setAttachments={setAttachments} />
 				</div>
-				<Attachments pieceId={piece.data[0].pieceId} attachments={attachments.data} setAttachments={attachments.setData} />
+				<Attachments pieceId={id} attachments={data.attachments} setAttachments={setAttachments} />
 			</>)}
 		</div>
 	);
@@ -58,9 +61,9 @@ namespace PieceForm {
 function PieceForm(props: PieceForm.Props) {
 
 	const [name, setName] = useState(props.piece.name);
-	const [composer, setComposer] = useState(props.piece.composer ?? "");
-	const [lyricist, setLyricist] = useState(props.piece.lyricist ?? "");
-	const [arranger, setArranger] = useState(props.piece.arranger ?? "");
+	const [composer, setComposer] = useState(() => Option.getOrElse(props.piece.composer, constant("")));
+	const [lyricist, setLyricist] = useState(() => Option.getOrElse(props.piece.lyricist, constant("")));
+	const [arranger, setArranger] = useState(() => Option.getOrElse(props.piece.arranger, constant("")));
 
 	const nameId = useId();
 	const composerId = useId();
@@ -83,7 +86,7 @@ function PieceForm(props: PieceForm.Props) {
 				arranger: arranger.length > 0 ? arranger : null,
 			});
 
-			if (error) {
+			if (error !== null) {
 				console.error(error.value);
 				return;
 			}
@@ -144,7 +147,7 @@ namespace Attachments {
 	export interface Props {
 		readonly pieceId: PieceId;
 		readonly attachments: readonly Attachment[];
-		readonly setAttachments: Updater<Attachment[]>;
+		readonly setAttachments: Updater<readonly Attachment[]>;
 	}
 }
 
@@ -178,28 +181,27 @@ function Attachments(props: Attachments.Props) {
 namespace AttachmentRow {
 	export interface Props {
 		readonly attachment: Attachment;
-		readonly setAttachments: Updater<Attachment[]>;
+		readonly setAttachments: Updater<readonly Attachment[]>;
 	}
 }
 
 function AttachmentRow(props: AttachmentRow.Props) {
 
 	const download = useCallback(async () => {
-		const { error, data: _data } = await client
+		const { error, data } = await client
 			.piece({ pieceId: props.attachment.pieceId })
 			.attachment({ attachmentId: props.attachment.attachmentId })
-			.get();
+			.get()
 
 		if (error !== null) {
 			console.error(error.value);
 			return;
 		}
 
-		const data = _data as unknown as typeof _data[ELYSIA_FORM_DATA];
-		const url = URL.createObjectURL(data.data);
+		const url = URL.createObjectURL(data);
 		const a = document.createElement("a");
 		a.href = url;
-		a.download = data.filename;
+		a.download = data.name;
 		a.click();
 		URL.revokeObjectURL(url);
 	}, [props.attachment.attachmentId, props.attachment.pieceId]);
@@ -211,7 +213,7 @@ function AttachmentRow(props: AttachmentRow.Props) {
 
 		event.preventDefault();
 
-		const { error, data: _data } = await client
+		const { error, data } = await client
 			.piece({ pieceId: props.attachment.pieceId })
 			.attachment({ attachmentId: props.attachment.attachmentId })
 			.get();
@@ -221,8 +223,7 @@ function AttachmentRow(props: AttachmentRow.Props) {
 			return;
 		}
 
-		const data = _data as unknown as typeof _data[ELYSIA_FORM_DATA];
-		const url = URL.createObjectURL(data.data);
+		const url = URL.createObjectURL(data);
 		window.open(url, "_target");
 		URL.revokeObjectURL(url);
 	}, [props.attachment.mediaType, props.attachment.attachmentId, props.attachment.pieceId]);
@@ -256,16 +257,18 @@ function AttachmentRow(props: AttachmentRow.Props) {
 					props.attachment.filename
 				)}
 			</TableCell>
-			<TableCell>{props.attachment.mediaType}</TableCell>
-			<TableCell className="text-center font-mono text-xs">
-				{props.attachment.createdAt}
-				{props.attachment.createdBy !== null && <><br />przez {props.attachment.createdBy}</>}
+			<TableCell>
+				{props.attachment.mediaType}
 			</TableCell>
-			<TableCell className="text-center font-mono text-xs">
-				{props.attachment.modifiedAt === null && props.attachment.modifiedBy === null ? "\u2014"
-					: props.attachment.modifiedAt !== null && props.attachment.modifiedBy === null ? props.attachment.modifiedAt
-						: props.attachment.modifiedAt === null ? `przez ${props.attachment.createdBy}`
-							: <>{props.attachment.createdAt}<br />przez {props.attachment.createdBy}</>}
+			<TableCell className="text-center text-xs">
+				{props.attachment.createdAt}
+				{Option.isSome(props.attachment.createdBy) && <><br />przez {props.attachment.createdBy.value.username}</>}
+			</TableCell>
+			<TableCell className="text-center text-xs">
+				{Option.isNone(props.attachment.modifiedAt) && Option.isNone(props.attachment.modifiedBy) ? "\u2014"
+					: Option.isSome(props.attachment.modifiedAt) && Option.isNone(props.attachment.modifiedBy) ? props.attachment.modifiedAt.value
+						: Option.isNone(props.attachment.modifiedAt) ? `przez ${(props.attachment.modifiedBy as Option.Some<User>).value.username}`
+							: <>{props.attachment.modifiedAt.value}<br />przez {(props.attachment.modifiedBy as Option.Some<User>).value.username}</>}
 			</TableCell>
 			<TableCell className="text-center flex justify-center gap-4">
 				<Button type="button" variant="ghost" size="icon" title="Pobierz" onClick={download}>
@@ -282,7 +285,7 @@ function AttachmentRow(props: AttachmentRow.Props) {
 namespace AttachmentForm {
 	export interface Props {
 		readonly pieceId: PieceId;
-		readonly setAttachments: Updater<Attachment[]>;
+		readonly setAttachments: Updater<readonly Attachment[]>;
 	}
 }
 
@@ -323,8 +326,10 @@ function AttachmentForm(props: AttachmentForm.Props) {
 					continue;
 				}
 
+				const attachment = await Effect.runPromise(denormalizeSystemInformation(data));
+
 				props.setAttachments((prev) => {
-					const next = [...prev, data];
+					const next = [...prev, attachment];
 					next.sort((a, b) => a.filename.localeCompare(b.filename));
 					return next;
 				});

pnpm-lock.yaml

@@ -48,6 +48,9 @@ catalogs:
     clsx:
       specifier: ^2.1.1
       version: 2.1.1
+    effect:
+      specifier: ^3.11.4
+      version: 3.11.4
     elysia:
       specifier: ^1.1.25
       version: 1.1.25
@@ -156,6 +159,9 @@ importers:
       common:
         specifier: workspace:^
         version: link:../common
+      effect:
+        specifier: 'catalog:'
+        version: 3.11.4
       lucide-react:
         specifier: 'catalog:'
         version: 0.462.0(react@18.3.1)
@@ -1185,6 +1191,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  effect@3.11.4:
+    resolution: {integrity: sha512-0tooO72Ii109A1SUY2A73hnO3y4AoglWupbBwaUHitV/B13/EVWRhWfuEDpKjJaEDNj96fhkeU8UCWvFrh6aSg==}
+
   electron-to-chromium@1.5.4:
     resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}
 
@@ -1242,6 +1251,10 @@ packages:
   exponential-backoff@3.1.1:
     resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==}
 
+  fast-check@3.23.1:
+    resolution: {integrity: sha512-u/MudsoQEgBUZgR5N1v87vEgybeVYus9VnDVaIkxkkGP2jt54naghQ3PCQHJiogS8U/GavZCUPFfx3Xkp+NaHw==}
+    engines: {node: '>=8.0.0'}
+
   fast-decode-uri-component@1.0.1:
     resolution: {integrity: sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==}
 
@@ -1758,6 +1771,9 @@ packages:
   pump@3.0.2:
     resolution: {integrity: sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==}
 
+  pure-rand@6.1.0:
+    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -3061,6 +3077,10 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  effect@3.11.4:
+    dependencies:
+      fast-check: 3.23.1
+
   electron-to-chromium@1.5.4: {}
 
   electron-to-chromium@1.5.62: {}
@@ -3130,6 +3150,10 @@ snapshots:
   exponential-backoff@3.1.1:
     optional: true
 
+  fast-check@3.23.1:
+    dependencies:
+      pure-rand: 6.1.0
+
   fast-decode-uri-component@1.0.1: {}
 
   fast-glob@3.3.2:
@@ -3704,6 +3728,8 @@ snapshots:
       once: 1.4.0
     optional: true
 
+  pure-rand@6.1.0: {}
+
   queue-microtask@1.2.3: {}
 
   rc@1.2.8:

pnpm-workspace.yaml

@@ -16,6 +16,7 @@ catalog:
   autoprefixer: '^10.4.20'
   class-variance-authority: '^0.7.1'
   clsx: '^2.1.1'
+  effect: '^3.11.4'
   elysia: '^1.1.25'
   kysely: '^0.27.4'
   kysely-bun-sqlite: '^0.3.2'