129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
};
|