JUMBO refactor, still work in progress

packages/frontend/src/routes/Pieces.tsx

@@ -5,10 +5,10 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogT
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { useLoadingEffect } from "@/hooks/useLoading";
+import { useLoading } from "@/hooks/useLoading";
 import { authors, created, DEBOUNCE, modified } from "@/snippets";
 import { PieceId } from "common";
-import { Cause, Effect, Match } from "effect";
+import { Cause, Effect, Match, Option, Scope } from "effect";
 import { Loader2, Plus } from "lucide-react";
 import { FormEventHandler, useId, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -20,21 +20,15 @@ export function Pieces() {
 
 	const debounce = useRef(Effect.void);
 
-	const { isLoading, error, data: pieceIds } = useLoadingEffect(Effect.gen(function* () {
+	const { isLoading, error, data: pieceIds } = useLoading(Effect.gen(function* () {
 		yield* debounce.current;
-		const { error, data } = yield* Effect.promise((signal) => client.piece.get({
-			query: {
-				...(name !== "" ? { name } : undefined),
-				...(author !== "" ? { author } : undefined),
-			},
-			fetch: { signal },
-		}));
-
-		if (error !== null) {
-			return yield* Effect.fail(error);
-		} else {
-			return data;
-		}
+		const data = yield* client.queryPieces({
+			name: name !== "" ? Option.some(name) : Option.none(),
+			author: author !== "" ? Option.some(author) : Option.none(),
+			offset: 0,
+			limit: 100,
+		});
+		return data;
 	}), [name, author]);
 
 	return (
@@ -91,7 +85,7 @@ export function Pieces() {
 					) : error !== null ? (
 						<TableRow>
 							<TableCell colSpan={4} className="text-center">
-								{Cause.isUnknownException(error) ? "Wystąpił nieznany błąd" : `Wystąpił błąd: ${JSON.stringify(error.value)}`}
+								{Cause.isUnknownException(error) ? "Wystąpił nieznany błąd" : `Wystąpił błąd: ${JSON.stringify(error)}`}
 							</TableCell>
 						</TableRow>
 					) : (
@@ -111,7 +105,7 @@ namespace PieceRow {
 
 function PieceRow(props: PieceRow.Props) {
 
-	const { isLoading, error, data: piece } = useLoadingEffect(Effect.uninterruptible(pieceCache.get(props.pieceId)), [props.pieceId]);
+	const { isLoading, error, data: piece } = useLoading(Effect.uninterruptible(pieceCache.get(props.pieceId)), [props.pieceId]);
 
 	if (isLoading) {
 		return (
@@ -126,9 +120,10 @@ function PieceRow(props: PieceRow.Props) {
 			<TableRow>
 				<TableCell colSpan={4}>
 					Wystąpił błąd: {Match.value(error).pipe(
-						Match.when({ status: 401 }, () => "Zaloguj się ponownie"),
-						Match.when({ status: 422 }, ({ value }) => value.message),
-						Match.when({ status: 404 }, () => "Utwór nie istnieje"),
+						Match.tag("FetchError", () => "Nie można połączyć się z serwerem"),
+						Match.tag("NotFound", () => "Utwór nie istnieje"),
+						Match.tag("Unauthenticated", () => "Zaloguj się, aby kontynuować"),
+						Match.tag("Unauthorized", () => "Nie posiadasz uprawnień"),
 						Match.exhaustive,
 					)}
 				</TableCell>
@@ -170,29 +165,25 @@ function AddPieceDialogContent() {
 
 	const [isLoading, setIsLoading] = useState(false);
 
-	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+	const onSubmit: FormEventHandler<HTMLFormElement> = (e) => Effect.gen(function* () {
 		e.preventDefault();
 
-		try {
+		yield* Effect.scopedWith((scope) => Effect.gen(function* () {
+
+			yield* Scope.addFinalizer(scope, Effect.sync(() => setIsLoading(false)));
+
 			setIsLoading(true);
 
-			const { data, error } = await client.piece.post({
+			const { pieceId } = yield* client.createPiece({
 				name,
-				composer: composer.length > 0 ? composer : null,
-				lyricist: lyricist.length > 0 ? lyricist : null,
-				arranger: arranger.length > 0 ? arranger : null,
+				composer: composer.length > 0 ? Option.some(composer) : Option.none(),
+				lyricist: lyricist.length > 0 ? Option.some(lyricist) : Option.none(),
+				arranger: arranger.length > 0 ? Option.some(arranger) : Option.none(),
 			});
 
-			if (error !== null) {
-				console.error(error.value);
-				return;
-			}
-
-			navigate(data.pieceId);
-		} finally {
-			setIsLoading(false);
-		}
-	};
+			navigate(pieceId);
+		}));
+	}).pipe(Effect.runPromise);
 
 	return (
 		<DialogContent>