64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
};
|