Koito/client/app/components/modals/DeleteModal.tsx

import { deleteItem } from "api/api"
import { AsyncButton } from "../AsyncButton"
import { Modal } from "./Modal"
import { useNavigate } from "react-router"
import { useState } from "react"

interface Props {
    open: boolean
    setOpen: Function
    title: string,
    id: number,
    type: string
}

export default function DeleteModal({ open, setOpen, title, id, type }: Props) {
    const [loading, setLoading] = useState(false)
    const navigate = useNavigate()

    const doDelete = () => {
        setLoading(true)
        deleteItem(type.toLowerCase(), id)
        .then(r => {
            if (r.ok) {
                navigate('/')
            } else {
                console.log(r)
            }
        })
    }

    return (
        <Modal isOpen={open} onClose={() => setOpen(false)}>
            <h2>Delete "{title}"?</h2>
            <p>This action is irreversible!</p>
            <div className="flex flex-col mt-3 items-center">
                <AsyncButton loading={loading} onClick={doDelete}>Yes, Delete It</AsyncButton>
            </div>
        </Modal>
    )
}