update: sensible action button confirm

2026-07-14 11:16:13 +02:00 · 2026-03-02 11:21:20 +01:00
parent f1edffed17
commit e644cde514
5 changed files with 500 additions and 418 deletions
@@ -1,49 +1,71 @@
 "use client";

-import {useMutation, useQueryClient} from "@tanstack/react-query";
-import {useRouter} from "next/navigation";
-import {toast} from "sonner";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";

-import {backupButtonAction} from "@/components/wrappers/dashboard/backup/backup-button/backup-button.action";
-import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
-import {Database, DatabaseZap} from "lucide-react";
-import {useIsMobile} from "@/hooks/use-mobile";
+import { backupButtonAction } from "@/components/wrappers/dashboard/backup/backup-button/backup-button.action";
+import { Check, DatabaseZap, X } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";

 export type BackupButtonProps = {
-    databaseId: string;
-    disable: boolean;
+  databaseId: string;
+  disable: boolean;
 };

 export const BackupButton = (props: BackupButtonProps) => {
-    const queryClient = useQueryClient();
-    const router = useRouter();
-    const isMobile = useIsMobile()
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const isMobile = useIsMobile();

-    const mutation = useMutation({
-        mutationFn: async (databaseId: string) => {
-            const backup = await backupButtonAction(databaseId);
-            if (backup?.data?.success) {
-                toast.success(backup.data.actionSuccess?.message || "Backup created successfully!");
-                queryClient.invalidateQueries({queryKey: ["database-data", props.databaseId]});
-                router.refresh();
-            } else {
-                toast.error(backup?.serverError || "Failed to create backup.");
-            }
+  const mutation = useMutation({
+    mutationFn: async (databaseId: string) => {
+      const backup = await backupButtonAction(databaseId);
+      if (backup?.data?.success) {
+        toast.success(
+          backup.data.actionSuccess?.message || "Backup created successfully!",
+        );
+        queryClient.invalidateQueries({
+          queryKey: ["database-data", props.databaseId],
+        });
+        router.refresh();
+      } else {
+        toast.error(backup?.serverError || "Failed to create backup.");
+      }
+    },
+  });
+  const HandleAction = async () => {
+    await mutation.mutateAsync(props.databaseId);
+  };
+
+  return (
+    <ButtonWithConfirm
+      title="Create Backup"
+      description={"Are you sure you want to create a backup?"}
+      button={{
+        main: {
+          text: isMobile ? "" : "Backup",
+          variant: "default",
+          icon: <DatabaseZap />,
        },
-    });
-    const HandleAction = async () => {
-        await mutation.mutateAsync(props.databaseId);
-    };
-
-    return (
-        <ButtonWithLoading
-            icon={<DatabaseZap/>}
-            disabled={props.disable}
-            isPending={mutation.isPending}
-            size={"default"}
-            onClick={async () => {
-                await HandleAction();
-            }}
-        >{isMobile ? "" : "Backup"}</ButtonWithLoading>
-    );
+        confirm: {
+          className: "w-full",
+          text: "Yes, create backup",
+          icon: <Check />,
+          variant: "default",
+          onClick: async () => {
+            await HandleAction();
+          },
+        },
+        cancel: {
+          className: "w-full",
+          text: "No, cancel",
+          icon: <X />,
+          variant: "outline",
+        },
+      }}
+      isPending={mutation.isPending}
+    />
+  );
 };