import { useMutation } from "@tanstack/react-query"; import { Button, Modal } from "react-bootstrap"; import { ImBin } from "react-icons/im"; import { ModalHeader } from "./ModalHeader"; import { DeleteBookModalProps } from "./types"; export const DeleteBookModal = ({ uuid, title, open, onClose, }: Omit<DeleteBookModalProps, "type">): React.JSX.Element => { const { mutate: rm } = useMutation({ mutationFn: async () => { await fetch(`/api/books/delete`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ uuid }), }); onClose(); }, }); return ( <Modal show={open} onHide={onClose} centered> <ModalHeader onClose={onClose} title={`Delete Book "${title}"`} icon={<ImBin size={50} className='ml-0 mr-auto' />} /> <Modal.Body style={{ borderTop: "none", }} > Do you really want to delete this book? <div className='d-flex mx-auto mb-auto mt-2 w-100'> <Button style={{ borderRadius: "5px", marginLeft: "auto", marginRight: "10px", }} onClick={() => onClose()} > Cancel </Button> <Button style={{ borderRadius: "5px", marginLeft: "auto", marginRight: "10px", }} onClick={() => rm()} > Delete </Button> </div> </Modal.Body> </Modal> ); };