Add delete piece button

packages/frontend/src/routes/Piece.tsx

@@ -14,7 +14,7 @@ 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";
+import { Link, useNavigate, useParams } from "react-router-dom";
 
 export function Piece() {
 
@@ -60,6 +60,8 @@ namespace PieceForm {
 
 function PieceForm(props: PieceForm.Props) {
 
+	const navigate = useNavigate();
+
 	const [name, setName] = useState(props.piece.name);
 	const [composer, setComposer] = useState(() => Option.getOrElse(props.piece.composer, constant("")));
 	const [lyricist, setLyricist] = useState(() => Option.getOrElse(props.piece.lyricist, constant("")));
@@ -70,14 +72,15 @@ function PieceForm(props: PieceForm.Props) {
 	const lyricistId = useId();
 	const arrangerId = useId();
 
-	const [isLoading, setIsLoading] = useState(false);
+	const [isSaving, setIsSaving] = useState(false);
+	const [isDeleting, setIsDeleting] = useState(false);
 
 	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
 		e.preventDefault();
 
 		const delay = timeout(250);
 		try {
-			setIsLoading(true);
+			setIsSaving(true);
 
 			const { error } = await client.piece({ pieceId: props.piece.pieceId }).put({
 				name,
@@ -92,9 +95,29 @@ function PieceForm(props: PieceForm.Props) {
 			}
 		} finally {
 			await delay;
-			setIsLoading(false);
+			setIsSaving(false);
 		}
-	}
+	};
+
+	const doDelete = useCallback(async () => {
+		try {
+			setIsDeleting(true);
+
+			const { error } = await client
+				.piece({ pieceId: props.piece.pieceId })
+				.delete();
+
+			if (error !== null) {
+				console.error(error.value);
+				return;
+			}
+
+			Effect.runFork(pieceCache.invalidate(props.piece.pieceId));
+			navigate("..");
+		} finally {
+			setIsDeleting(false);
+		}
+	}, [props.piece.pieceId, navigate]);
 
 	return (
 		<form className="flex flex-col gap-4" onSubmit={onSubmit}>
@@ -133,9 +156,13 @@ function PieceForm(props: PieceForm.Props) {
 					onChange={(e) => setArranger(e.target.value)}
 				/>
 			</div>
-			<div className="flex flex-col-reverse items-end">
+			<div className="flex justify-between">
-				<Button type="submit" disabled={isLoading}>
+				<Button type="button" variant="destructive" disabled={isDeleting} onClick={doDelete}>
-					{isLoading && <Loader2 className="animate-spin" />}
+					{isDeleting && <Loader2 className="animate-spin" />}
+					Usuń
+				</Button>
+				<Button type="submit" disabled={isSaving}>
+					{isSaving && <Loader2 className="animate-spin" />}
 					Zapisz
 				</Button>
 			</div>