Merge pull request #417 from VK-RED/refactor/ApiKeyAlertDialog

refactor: added a reusable ConfirmDialog component and dropped ApiKeyAlertDialog

src/app/(authenticated)/(dashboard)/[publicId]/settings/api/components/table.tsx

@@ -3,9 +3,12 @@
 import { dayjsExt } from "@/common/dayjs";
 import Tldr from "@/components/common/tldr";
 import { Card } from "@/components/ui/card";
+import { api } from "@/trpc/react";
 import { RiMore2Fill } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
 
-import { ApiKeyAlertDialog } from "@/components/apiKey/apiKey-alert-dialog";
+import { ConfirmDialog } from "@/components/common/confirmDialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -30,6 +33,28 @@ interface ApiKey {
 }
 
 const ApiKeysTable = ({ keys }: { keys: ApiKey[] }) => {
+  const router = useRouter();
+
+  const deleteMutation = api.apiKey.delete.useMutation({
+    onSuccess: ({ message }) => {
+      toast.success(message);
+    },
+
+    onError: (error) => {
+      console.error(error);
+      toast.error("An error occurred while creating the API key.");
+    },
+
+    onSettled: () => {
+      router.refresh();
+    },
+  });
+
+  const dialogTitle = "Are you sure?";
+  const dialogBody =
+    "Are you sure you want to delete this key? This action cannot be undone and you will loose the access if this API key is currently being used.";
+  const dialogTrigger = <div className="text-rose-600">Delete key</div>;
+
   return (
     <Card className="mx-auto mt-3 w-[28rem] sm:w-[38rem] md:w-full">
       <div className="mx-3">
@@ -78,7 +103,15 @@ const ApiKeysTable = ({ keys }: { keys: ApiKey[] }) => {
                         Rotate key
                       </DropdownMenuItem>
 
-                      <ApiKeyAlertDialog keyId={key.keyId} key={key.keyId} />
+                      <ConfirmDialog
+                        key={key.keyId}
+                        title={dialogTitle}
+                        body={dialogBody}
+                        trigger={dialogTrigger}
+                        onConfirm={() => {
+                          deleteMutation.mutate({ keyId: key.keyId });
+                        }}
+                      />
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </div>

src/components/common/confirmDialog.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+import type React from "react";
+
+interface ConfirmDialogProps {
+  title: string;
+  body: string;
+  trigger: React.ReactNode;
+  onConfirm: () => void;
+  onCancel?: () => void;
+}
+
+export function ConfirmDialog({
+  title,
+  body,
+  trigger,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-zinc-100"
+        asChild={true}
+      >
+        {trigger}
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{body}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}