From c0e2bdc01366f4a8878ffb373527d786e163a19b Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 31 Mar 2024 16:23:25 +0100
Subject: refactor: Extract the action confirming dialog into its own component

---
 .../dashboard/lists/DeleteListButton.tsx           | 65 +++++++-------------
 .../components/dashboard/settings/DeleteApiKey.tsx | 70 ++++++++--------------
 .../web/components/ui/action-confirming-dialog.tsx | 48 +++++++++++++++
 3 files changed, 94 insertions(+), 89 deletions(-)
 create mode 100644 apps/web/components/ui/action-confirming-dialog.tsx

diff --git a/apps/web/components/dashboard/lists/DeleteListButton.tsx b/apps/web/components/dashboard/lists/DeleteListButton.tsx
index 345c81d2..ee2a9ec7 100644
--- a/apps/web/components/dashboard/lists/DeleteListButton.tsx
+++ b/apps/web/components/dashboard/lists/DeleteListButton.tsx
@@ -1,18 +1,9 @@
 "use client";
 
-import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
+import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 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 { Trash2 } from "lucide-react";
@@ -20,8 +11,6 @@ import { Trash2 } 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;
@@ -41,38 +30,24 @@ export default function DeleteListButton({ list }: { list: ZBookmarkList }) {
     },
   });
   return (
-    <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
-      <DialogTrigger asChild>
-        <Button className="mt-auto flex gap-2" variant="destructiveOutline">
-          <Trash2 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>
+    <ActionConfirmingDialog
+      title={`Delete ${list.icon} ${list.name}?`}
+      description={`Are you sure you want to delete ${list.icon} ${list.name}?`}
+      actionButton={() => (
+        <ActionButton
+          type="button"
+          variant="destructive"
+          loading={isPending}
+          onClick={() => deleteList({ listId: list.id })}
+        >
+          Delete
+        </ActionButton>
+      )}
+    >
+      <Button className="mt-auto flex gap-2" variant="destructiveOutline">
+        <Trash2 className="size-5" />
+        <span className="hidden md:block">Delete List</span>
+      </Button>
+    </ActionConfirmingDialog>
   );
 }
diff --git a/apps/web/components/dashboard/settings/DeleteApiKey.tsx b/apps/web/components/dashboard/settings/DeleteApiKey.tsx
index 091f352c..cbbe8320 100644
--- a/apps/web/components/dashboard/settings/DeleteApiKey.tsx
+++ b/apps/web/components/dashboard/settings/DeleteApiKey.tsx
@@ -1,19 +1,9 @@
 "use client";
 
-import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
+import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  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";
@@ -25,49 +15,41 @@ export default function DeleteApiKey({
   name: string;
   id: string;
 }) {
-  const [isDialogOpen, setDialogOpen] = useState(false);
   const router = useRouter();
   const mutator = api.apiKeys.revoke.useMutation({
     onSuccess: () => {
       toast({
         description: "Key was successfully deleted",
       });
-      setDialogOpen(false);
       router.refresh();
     },
   });
 
   return (
-    <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
-      <DialogTrigger asChild>
-        <Button variant="destructive">
-          <Trash className="size-5" />
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete API Key</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete the API key &quot;{name}&quot;? Any
-            service using this API key will lose access.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter className="sm:justify-end">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-          <ActionButton
-            type="button"
-            variant="destructive"
-            loading={mutator.isPending}
-            onClick={() => mutator.mutate({ id })}
-          >
-            Delete
-          </ActionButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <ActionConfirmingDialog
+      title={"Delete API Key"}
+      description={
+        <p>
+          Are you sure you want to delete the API key &quot;{name}&quot;? Any
+          service using this API key will lose access.
+        </p>
+      }
+      actionButton={(setDialogOpen) => (
+        <ActionButton
+          type="button"
+          variant="destructive"
+          loading={mutator.isPending}
+          onClick={() =>
+            mutator.mutate({ id }, { onSuccess: () => setDialogOpen(false) })
+          }
+        >
+          Delete
+        </ActionButton>
+      )}
+    >
+      <Button variant="destructive">
+        <Trash className="size-5" />
+      </Button>
+    </ActionConfirmingDialog>
   );
 }
diff --git a/apps/web/components/ui/action-confirming-dialog.tsx b/apps/web/components/ui/action-confirming-dialog.tsx
new file mode 100644
index 00000000..980bdd60
--- /dev/null
+++ b/apps/web/components/ui/action-confirming-dialog.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { Button } from "./button";
+
+export default function ActionConfirmingDialog({
+  title,
+  description,
+  actionButton,
+  children,
+}: {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  actionButton: (setDialogOpen: (open: boolean) => void) => React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const [isDialogOpen, setDialogOpen] = useState(false);
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {description}
+        <DialogFooter className="sm:justify-end">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+          {actionButton(setDialogOpen)}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
-- 
cgit v1.2.3-70-g09d2