1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { ActionButton } from "@/components/ui/action-button";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { Trash } from "lucide-react";
import type { ZBookmarkList } from "@hoarder/trpc/types/lists";
export default function DeleteListButton({ list }: { list: ZBookmarkList }) {
const [isDialogOpen, setDialogOpen] = useState(false);
const router = useRouter();
const listsInvalidationFunction = api.useUtils().lists.list.invalidate;
const { mutate: deleteList, isPending } = api.lists.delete.useMutation({
onSuccess: () => {
listsInvalidationFunction();
toast({
description: `List "${list.icon} ${list.name}" is deleted!`,
});
router.push("/");
},
onError: () => {
toast({
variant: "destructive",
description: `Something went wrong`,
});
},
});
return (
<Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
<DialogTrigger asChild>
<Button className="mt-auto flex gap-2" variant="destructive">
<Trash className="size-5" />
<span className="hidden md:block">Delete List</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>
Delete {list.icon} {list.name}?
</DialogTitle>
</DialogHeader>
<span>
Are you sure you want to delete {list.icon} {list.name}?
</span>
<DialogFooter className="sm:justify-end">
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
</Button>
</DialogClose>
<ActionButton
type="button"
variant="destructive"
loading={isPending}
onClick={() => deleteList({ listId: list.id })}
>
Delete
</ActionButton>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|
