nextjs-cleo-minimarket/app/(dashboard)/master/satuan-barang/_components/hapus-satuan-barang-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 { hapusSatuanBarang, type HapusSatuanBarangState } from "../actions";

type HapusSatuanBarangButtonProps = {
  idSatuanBarang: number;
  nama: string;
};

const initial: HapusSatuanBarangState = { ok: false };

export function HapusSatuanBarangButton({
  idSatuanBarang,
  nama,
}: HapusSatuanBarangButtonProps) {
  const [open, setOpen] = useState(false);
  const [state, formAction, pending] = useActionState(
    async (prevState: HapusSatuanBarangState, formData: FormData) => {
      const result = await hapusSatuanBarang(prevState, formData);
      if (result.ok) setOpen(false);
      return result;
    },
    initial,
  );

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

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

        <form action={formAction}>
          <input type="hidden" name="idSatuanBarang" value={idSatuanBarang} />
          {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>
  );
}