76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { useActionState, useState } from "react"
|
|
import { useFormStatus } from "react-dom"
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import type { DeleteInvitationActionState } from "@/app/admin/guests/[id]/actions"
|
|
import { deleteInvitationAction } from "@/app/admin/guests/[id]/actions"
|
|
|
|
interface DeleteInvitationDialogProps {
|
|
invitationId: string
|
|
displayName: string
|
|
}
|
|
|
|
const initialState: DeleteInvitationActionState = { error: null }
|
|
|
|
function DeleteSubmitButton() {
|
|
const { pending } = useFormStatus()
|
|
|
|
return (
|
|
<Button type="submit" variant="destructive" disabled={pending}>
|
|
{pending ? "Deleting..." : "Delete permanently"}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
export function DeleteInvitationDialog({
|
|
invitationId,
|
|
displayName,
|
|
}: DeleteInvitationDialogProps) {
|
|
const [open, setOpen] = useState(false)
|
|
const [state, formAction] = useActionState(deleteInvitationAction, initialState)
|
|
|
|
return (
|
|
<AlertDialog open={open} onOpenChange={setOpen}>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="destructive">Delete group</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<form action={formAction} className="space-y-4">
|
|
<input type="hidden" name="invitationId" value={invitationId} />
|
|
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete {displayName}?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This permanently removes this invitation group, its members, RSVP information,
|
|
toast requests, and uploaded photo. This action cannot be undone.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
|
|
{state.error ? (
|
|
<p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
|
{state.error}
|
|
</p>
|
|
) : null}
|
|
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel type="button">Cancel</AlertDialogCancel>
|
|
<DeleteSubmitButton />
|
|
</AlertDialogFooter>
|
|
</form>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|