Files
Epicure/apps/web/components/collections/delete-collection-dialog.tsx
T
Arnaud 4ae0bd580e feat: admin Ingredients CRUD UI; fix "page not found" after deleting shopping list/recipe/collection (v0.85.0)
Admin > Ingredients lets admins add/edit/delete canonical ingredients and their aliases (e.g. "sel"/"sel fin"/"table salt") without touching code — previously only settable by hand in packages/db/src/seed.ts. Deleting just unlinks referencing pantry items/recipe ingredients (onDelete: set null), nothing else changes.

Fixed: deleting a shopping list, recipe, or collection from its own detail page used router.push to navigate away, leaving the deleted resource's URL in browser history — one back-button press landed on a real "Page not found" screen. All three now use router.replace so the dead URL never sits in history.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-24 18:42:42 +02:00

90 lines
3.1 KiB
TypeScript

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
export function DeleteCollectionDialog({ collectionId }: { collectionId: string }) {
const t = useTranslations("collections");
const tCommon = useTranslations("common");
const router = useRouter();
const [open, setOpen] = useState(false);
const [deleteRecipes, setDeleteRecipes] = useState(false);
const [deleting, setDeleting] = useState(false);
async function handleDelete() {
setDeleting(true);
try {
const res = await fetch(`/api/v1/collections/${collectionId}?deleteRecipes=${deleteRecipes}`, { method: "DELETE" });
if (!res.ok) throw new Error();
toast.success(t("deleteSuccess"));
// replace, not push — the deleted collection's URL should never sit
// in history, or the browser back button lands straight on a 404.
router.replace("/collections");
router.refresh();
} catch {
toast.error(t("deleteFailed"));
setDeleting(false);
}
}
return (
<>
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={
<Button variant="ghost" size="icon" className="text-destructive hover:text-destructive" onClick={() => setOpen(true)} aria-label={tCommon("delete")}>
<Trash2 className="h-4 w-4" />
</Button>
} />
<TooltipContent>{tCommon("delete")}</TooltipContent>
</Tooltip>
</TooltipProvider>
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t("deleteConfirmTitle")}</AlertDialogTitle>
<AlertDialogDescription>{t("deleteConfirmDescription")}</AlertDialogDescription>
</AlertDialogHeader>
<label className="flex items-start gap-2 text-sm cursor-pointer">
<input
type="checkbox"
checked={deleteRecipes}
onChange={(e) => setDeleteRecipes(e.target.checked)}
className="rounded mt-0.5"
/>
<span>{t("deleteRecipesToo")}</span>
</label>
<AlertDialogFooter>
<AlertDialogCancel disabled={deleting}>{tCommon("cancel")}</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => { e.preventDefault(); void handleDelete(); }}
disabled={deleting}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
{deleting ? t("deleting") : tCommon("delete")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
);
}