JUMBO refactor, still work in progress

packages/frontend/src/routes/Repertoires.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 { created, DEBOUNCE, modified } from "@/snippets";
 import { RepertoireId } from "common";
-import { Cause, Effect, Match } from "effect";
+import { Cause, Effect, Match, Option, Scope } from "effect";
 import { Loader2, Plus } from "lucide-react";
 import { FormEventHandler, ReactNode, useId, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -19,20 +19,14 @@ export function Repertoires() {
 
 	const debounce = useRef(Effect.void);
 
-	const { isLoading, error, data: repertoireIds } = useLoadingEffect(Effect.gen(function* () {
+	const { isLoading, error, data: repertoireIds } = useLoading(Effect.gen(function* () {
 		yield* debounce.current;
-		const { error, data } = yield* Effect.promise((signal) => client.repertoire.get({
-			query: {
-				...(name !== "" ? { name } : undefined),
-			},
-			fetch: { signal },
-		}));
-
-		if (error !== null) {
-			return yield* Effect.fail(error);
-		} else {
-			return data;
-		}
+		const data = yield* client.queryRepertoire({
+			name: name !== "" ? Option.some(name) : Option.none(),
+			offset: 0,
+			limit: 100,
+		});
+		return data;
 	}), [name]);
 
 	return (
@@ -79,7 +73,7 @@ export function Repertoires() {
 					) : 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>
 					) : (
@@ -99,7 +93,7 @@ namespace RepertoireRow {
 
 function RepertoireRow(props: RepertoireRow.Props) {
 
-	const { isLoading, error, data: repertoire } = useLoadingEffect(Effect.uninterruptible(repertoireCache.get(props.repertoireId)), [props.repertoireId]);
+	const { isLoading, error, data: repertoire } = useLoading(Effect.uninterruptible(repertoireCache.get(props.repertoireId)), [props.repertoireId]);
 
 	if (isLoading) {
 		return (
@@ -114,9 +108,10 @@ function RepertoireRow(props: RepertoireRow.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 }, () => "Repertuar nie istnieje"),
+						Match.tag("FetchError", () => "Nie można połączyć się z serwerem"),
+						Match.tag("NotFound", () => "Repertuar nie istnieje"),
+						Match.tag("Unauthenticated", () => "Zaloguj się, aby kontynuować"),
+						Match.tag("Unauthorized", () => "Nie posiadasz uprawnień"),
 						Match.exhaustive,
 					)}
 				</TableCell>
@@ -166,27 +161,23 @@ function AddRepertoireDialogContent() {
 
 	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.repertoire.post({
+			const { repertoireId } = yield* client.createRepertoire({
 				name,
 				entries: [],
 			});
 
-			if (error !== null) {
-				console.error(error.value);
-				return;
-			}
-
-			navigate(data.repertoireId);
-		} finally {
-			setIsLoading(false);
-		}
-	};
+			navigate(repertoireId);
+		}));
+	}).pipe(Effect.runPromise);
 
 	return (
 		<DialogContent>