nextjs-cleo-minimarket/app/(dashboard)/master/_components/hapus-master-button.tsx

"use client";

import { useActionState, useState } from "react";
import { Loader2Icon, Trash2Icon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import type { DeleteState } from "@/lib/server-action";

type HapusMasterButtonProps = {
  id: number | string;
  idName: string;
  nama: string;
  entityLabel: string;
  action: (prevState: DeleteState, formData: FormData) => Promise<DeleteState>;
};

export function HapusMasterButton({
  id,
  idName,
  nama,
  entityLabel,
  action,
}: HapusMasterButtonProps) {
  const [open, setOpen] = useState(false);
  const [state, formAction, pending] = useActionState(
    async (prevState: DeleteState, formData: FormData) => {
      const result = await action(prevState, formData);
      if (result.ok) setOpen(false);
      return result;
    },
    { ok: false },
  );

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger
        render={
          <Button
            variant="ghost"
            size="icon-sm"
            className="text-destructive hover:bg-destructive/10"
            title={`Hapus ${entityLabel}`}
          />
        }
      >
        <Trash2Icon />
        <span className="sr-only">Hapus</span>
      </AlertDialogTrigger>

      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>
            Hapus {nama || `${entityLabel} ${id}`}?
          </AlertDialogTitle>
          <AlertDialogDescription>
            Data {entityLabel} {id} akan dihapus permanen.
          </AlertDialogDescription>
        </AlertDialogHeader>

        <form action={formAction}>
          <input type="hidden" name={idName} value={id} />
          {state.error && (
            <p className="mb-4 text-sm text-destructive">{state.error}</p>
          )}
          <AlertDialogFooter>
            <AlertDialogCancel disabled={pending}>Batal</AlertDialogCancel>
            <Button type="submit" variant="destructive" disabled={pending}>
              {pending && <Loader2Icon className="size-4 animate-spin" />}
              Hapus
            </Button>
          </AlertDialogFooter>
        </form>
      </AlertDialogContent>
    </AlertDialog>
  );
}