import { Badge, Dropdown } from "react-bootstrap"; import { Book } from "../../../types/Book"; import { ImBin, ImBook, ImBoxAdd, ImBoxRemove, ImMenu } from "react-icons/im"; import { useMutation } from "@tanstack/react-query"; import * as colors from "../../../colors"; import * as dark from "../../../darkmodeColors"; import { ModalContextType } from "../../../App"; import { modalTypes } from "../../../shared/components/modals/types"; import { useCallback } from "react"; const { book: bookModal, checkout, del } = modalTypes; export const Actions = ({ refetch, book, authenticated, setActiveModal, }: { refetch: () => void; book: Book; authenticated: boolean; } & Pick<ModalContextType, "setActiveModal">): React.JSX.Element => { const { mutate: re } = useMutation({ mutationFn: async () => { await fetch(`/api/books/return`, { method: "POST", body: JSON.stringify({ checkoutBy: "admin", contact: "admin", uuid: book.uuid, }), headers: { "Content-Type": "application/json", }, }); refetch(); }, }); const onClose = useCallback(() => { refetch(); setActiveModal(); }, [refetch, setActiveModal]); return ( <> <Dropdown> <Dropdown.Toggle variant='success' id='dropdown-basic'> <ImMenu size={25} color='black' /> </Dropdown.Toggle> <Dropdown.Menu> {authenticated && ( <Dropdown.Item id='moveToShelf' className='d-flex' onClick={() => setActiveModal({ type: bookModal, book, onClose })} > <Badge pill className='ml-2 d-flex mr-2'> <ImBook size={25} color='black' className='m-auto' /> </Badge> <p className='m-auto' style={{ paddingLeft: "10px" }}> Edit Book </p> </Dropdown.Item> )} {!book.checkoutBy || book.checkoutBy === "null" ? ( <Dropdown.Item id='checkout' className='d-flex' onClick={() => setActiveModal({ type: checkout, title: book.title, uuid: book.uuid, onClose, }) } > <Badge pill className='ml-2 d-flex mr-2'> <ImBoxRemove size={25} color='black' className='m-auto' /> </Badge>{" "} <p className='m-auto' style={{ paddingLeft: "10px" }}> Checkout </p> </Dropdown.Item> ) : ( <Dropdown.Item id='return' className='d-flex' onClick={() => authenticated ? re() : setActiveModal({ type: checkout, ...book, onClose }) } > <Badge pill className='ml-2 d-flex mr-2' style={{ border: "2px solid black" }} > <ImBoxAdd size={25} color='black' className='m-auto' /> </Badge>{" "} <p className='m-auto' style={{ paddingLeft: "10px" }}> Return </p> </Dropdown.Item> )} {authenticated && ( <Dropdown.Item id='delete' className='d-flex' onClick={() => setActiveModal({ type: del, uuid: book.uuid, onClose }) } > <Badge pill className='ml-2 d-flex danger mr-2'> <ImBin size={25} color='black' className='m-auto' /> </Badge>{" "} <p className='m-auto' style={{ paddingLeft: "10px" }}> Delete </p> </Dropdown.Item> )} </Dropdown.Menu> </Dropdown> </> ); };