feat: Add delete bookmark confirmation dialog. Fixes #776 (#787)

1 files changed, 15 insertions, 22 deletions

diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index 38ad8fa2..86c86d5a 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -1,5 +1,6 @@
-import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
@@ -10,16 +11,16 @@ import { useTranslation } from "@/lib/i18n/client";
 import { Trash2 } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
-import {
-  useDeleteBookmark,
-  useUpdateBookmark,
-} from "@hoarder/shared-react/hooks/bookmarks";
+import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
 
+import DeleteBookmarkConfirmationDialog from "../bookmarks/DeleteBookmarkConfirmationDialog";
 import { ArchivedActionIcon, FavouritedActionIcon } from "../bookmarks/icons";
 
 export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   const { t } = useTranslation();
-  const router = useRouter();
+  const [deleteBookmarkDialogOpen, setDeleteBookmarkDialogOpen] =
+    useState(false);
+
   const onError = () => {
     toast({
       variant: "destructive",
@@ -44,16 +45,6 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
       },
       onError,
     });
-  const { mutate: deleteBookmark, isPending: pendingDeletion } =
-    useDeleteBookmark({
-      onSuccess: () => {
-        toast({
-          description: "The bookmark has been deleted!",
-        });
-        router.back();
-      },
-      onError,
-    });
 
   return (
     <div className="flex items-center justify-center gap-3">
@@ -100,17 +91,19 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
         </TooltipContent>
       </Tooltip>
       <Tooltip delayDuration={0}>
+        <DeleteBookmarkConfirmationDialog
+          bookmark={bookmark}
+          open={deleteBookmarkDialogOpen}
+          setOpen={setDeleteBookmarkDialogOpen}
+        />
         <TooltipTrigger asChild>
-          <ActionButton
-            loading={pendingDeletion}
+          <Button
             className="size-14 rounded-full bg-background"
             variant="none"
-            onClick={() => {
-              deleteBookmark({ bookmarkId: bookmark.id });
-            }}
+            onClick={() => setDeleteBookmarkDialogOpen(true)}
           >
             <Trash2 />
-          </ActionButton>
+          </Button>
         </TooltipTrigger>
         <TooltipContent side="bottom">{t("actions.delete")}</TooltipContent>
       </Tooltip>