Single repertoire view WIP

packages/frontend/src/routes/Repertoire.tsx

@@ -0,0 +1,41 @@
+import { Piece, repertoireCache } from "@/cache";
+import { useLoadingEffect } from "@/hooks/useLoading";
+import { mapProp, Update } from "@/hooks/useStore";
+import { RepertoireId } from "common";
+import { Cause, Effect } from "effect";
+import { useCallback } from "react";
+import { useParams } from "react-router-dom";
+
+export function Repertoire() {
+
+	const id = RepertoireId(useParams().repertoireId!);
+
+	const { isLoading, error, data, setData } = useLoadingEffect(Effect.uninterruptible(repertoireCache.get(id)), [id]);
+
+	const setEntries = useCallback((action: Update<readonly Piece[]>) => {
+		setData!(mapProp("entries", action));
+		Effect.runFork(repertoireCache.invalidate(id));
+	}, [setData]);
+
+	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 items-start gap-4">
+			{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">Repertuar</h3>
+					<RepertoireForm repertoire={data} />
+				</div>
+				<Entries repertoireId={id} entries={data.entries} setData={setData} />
+			</>)}
+		</div>
+	);
+}