Compare commits

..

No commits in common. "main" and "checkout-modal-can-be-submitted-if-its-invalid" have entirely different histories.

25 changed files with 646 additions and 2497 deletions

1
.gitignore vendored
View file

@ -1,4 +1,3 @@
.env
n39env
.n39env
.vscode

File diff suppressed because it is too large Load diff

View file

@ -16,7 +16,6 @@
"@types/react-dom": "^18.3.0",
"bootstrap": "^5.3.3",
"date-fns": "^3.6.0",
"fast-xml-parser": "^4.5.0",
"history": "^5.3.0",
"react": "^18.3.1",
"react-bootstrap": "^2.10.4",

View file

@ -6,6 +6,7 @@ import "./App.css";
import { Main } from "./pages";
import { Library } from "./pages/Library";
import { Book } from "./pages/Book";
import { primary } from "./colors";
import { ActiveModalProps } from "./shared/components/modals/types";
export const AuthContext = createContext<{
@ -49,6 +50,7 @@ function App() {
style={{
height: "100vh",
width: "100vw",
backgroundColor: primary,
fontFamily: "New Amsterdam",
overflow: "scroll",
}}

View file

@ -1,5 +0,0 @@
export const primary = "#5e6268";
export const primaryRGBA = "rgba(83,86,91, 0.8)";
export const secondary = "#5f5e68";
export const tertiary = "#5e6768";
export const danger = "#685e62";

View file

@ -12,219 +12,49 @@ body {
}
}
#bootstrap-overrides {
background-color: #f2f3f4;
color: #5e6268;
.btn-primary {
background-color: #5e6268;
color: #f2f3f4;
border: 2px solid #5e6268;
}
form-control {
background-color: #f2f2e8 !important;
border-color: #5e6268 !important;
}
.form-select .form-control {
#bootstrap-overrides .form-select .form-control {
background-color: #f2f2e8 !important;
border-color: #f2f2e8 !important;
}
.dropdown-toggle::after {
display: none;
}
.form-label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: normal;
}
tbody > tr > td {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif !important;
}
.table > :not(caption) > * > * {
background-color: #f2f2e8 !important;
color: #5e6268 !important;
}
table > thead {
letter-spacing: 0.25em;
}
.bg-primary {
background-color: #f2f3f4 !important;
}
.modal-content {
background-color: #f2f3f4 !important;
border-radius: 10px;
}
.modal-body {
background-color: #f2f3f4 !important;
border-radius: 0px 0px 10px 10px;
}
.modal-header {
background-color: #f2f3f4 !important;
border-radius: 10px 10px 0px 0px;
border-bottom: none;
}
.dropdown button {
background-color: #f2f2e8 !important;
color: #5e6268 !important;
border: 2px solid #5e6268;
}
.dropdown-menu {
background-color: #f2f2e8 !important;
color: #5e6268 !important;
border: 2px solid #f2f2e8;
}
.danger {
background-color: #f9a9ab !important;
}
.page-link {
color: #5e6268 !important;
border: 2px solid #5e6268 !important;
background-color: transparent !important;
}
.active > .page-link {
background-color: #5e6268 !important;
color: #f2f3f4 !important;
}
.pagination {
margin-top: 10px !important;
li {
min-width: 40px;
}
}
}
@media (prefers-color-scheme: dark) {
#bootstrap-overrides {
background-color: #5e6268;
color: #f2f3f4;
.btn-primary {
background-color: #f2f3f4;
color: #5e6268;
border: 2px solid #5e6268;
}
.form-control {
background-color: #f2f2e8 !important;
border-color: #5e6268 !important;
border-right: none;
}
.form-select .form-control {
background-color: #f2f2e8 !important;
border-color: #f2f2e8 !important;
}
.dropdown-toggle::after {
#bootstrap-overrides .dropdown-toggle::after {
display: none;
}
}
.form-label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif !important;
#bootstrap-overrides .form-label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: normal;
}
}
tbody > tr > td {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif !important;
}
.table > :not(caption) > * > * {
background-color: #5e6268 !important;
color: #f2f2e8 !important;
}
table > thead {
#bootstrap-overrides table {
letter-spacing: 0.25em;
}
}
.bg-primary {
background-color: #5e6268 !important;
}
.dropdown button {
background-color: #f2f2e8 !important;
color: #5e6268 !important;
}
.dropdown-menu {
background-color: #5e6268 !important;
border: 2px solid #5e6268;
}
.dropdown-item {
color: #f2f2e8 !important;
svg {
color: #f2f2e8 !important;
}
}
.dropdown-item:hover {
color: #5e6268 !important;
background-color: #f2f2e8 !important;
}
.modal-content {
background-color: #5e6268 !important;
border-radius: 10px;
}
.modal-body {
background-color: #5e6268 !important;
border-radius: 0px 0px 10px 10px;
}
.modal-header {
background-color: #5e6268 !important;
border-radius: 10px 10px 0px 0px;
border-bottom: none;
}
.danger {
background-color: #c94414 !important;
}
.page-link {
color: #f2f3f4 !important;
border: 2px solid #f2f3f4 !important;
background-color: transparent !important;
}
.active > .page-link {
#bootstrap-overrides .bg-primary {
background-color: #f2f3f4 !important;
color: #5e6268 !important;
}
}
.pagination {
margin-top: 10px !important;
}
}
#bootstrap-overrides .modal-body {
background-color: #f2f3f4 !important;
}
#bootstrap-overrides .danger {
background-color: #f9a9ab !important;
}
#bootstrap-overrides .page-link {
color: black !important;
border: 2px solid black !important;
background-color: transparent !important;
}
#bootstrap-overrides .active > .page-link {
background-color: black !important;
color: #f2f3f4 !important;
}
code {

View file

@ -1,7 +1,7 @@
import React, { useCallback, useContext, useMemo, useState } from "react";
import React, { useCallback, useContext, useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
import { Book } from "../../types/Book";
import { Button, Form, Table } from "react-bootstrap";
import { Pagination, Table } from "react-bootstrap";
import {
createColumnHelper,
flexRender,
@ -15,13 +15,12 @@ import {
} from "@tanstack/react-table";
import { Actions } from "./components/Actions";
import { ImArrowDown, ImArrowUp } from "react-icons/im";
import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
import { useLocation } from "react-router-dom";
import { format } from "date-fns";
import { useAuth } from "../../shared/utils/useAuthentication";
import { ModalSelector } from "../../shared/components/modals/Modals";
import { ModalContext } from "../../App";
import { Pagination } from "./components/Pagination";
import { modalTypes } from "../../shared/components/modals/types";
export const Library = (): React.JSX.Element => {
const location = useLocation();
@ -32,21 +31,9 @@ export const Library = (): React.JSX.Element => {
[location]
);
const { authenticated } = useAuth();
const auth = useAuth();
const modalContext = useContext(ModalContext);
const [selectedBooks, setSelectedBooks] = useState<Book["uuid"][]>([]);
const toggleBookSelection = useCallback(
(uuid: Book["uuid"]) =>
setSelectedBooks((prev) =>
prev.includes(uuid)
? prev.filter((current) => current !== uuid)
: [...prev, uuid]
),
[]
);
const { data: books, refetch } = useQuery<Book[]>({
queryFn: async () => {
if (
@ -63,48 +50,10 @@ export const Library = (): React.JSX.Element => {
queryKey: ["books"],
});
const shelf = params.get("shelf");
const year = params.get("year");
const data = useMemo(
() =>
books?.filter(
(b) =>
(!shelf || b.shelf?.toLowerCase() === shelf?.toLowerCase()) &&
(!year || b.published.toString() === year)
) ?? [],
[books, year, shelf]
);
const columnHelper = createColumnHelper<Book>();
const columns: ColumnDef<Book, any>[] = useMemo(
() =>
[
authenticated
? columnHelper.display({
id: "selection",
header: () => (
<Form.Check
type='checkbox'
checked={selectedBooks.length === data?.length}
id={`select-all-books`}
onChange={() =>
setSelectedBooks((prev) =>
prev.length || !data ? [] : data.map((b) => b.uuid)
)
}
/>
),
cell: (props) => (
<Form.Check
type='checkbox'
checked={selectedBooks.includes(props.row.original.uuid)}
id={`select-book-${props.row.original.uuid}`}
onChange={() => toggleBookSelection(props.row.original.uuid)}
/>
),
})
: undefined,
columnHelper.accessor((book) => book.isbn, {
id: "isbn",
header: "ISBN",
@ -159,7 +108,7 @@ export const Library = (): React.JSX.Element => {
</div>
),
}),
authenticated
auth.authenticated
? columnHelper.accessor(
(book) => (!book.contact ? "" : book.contact),
{
@ -184,21 +133,26 @@ export const Library = (): React.JSX.Element => {
<Actions
book={props.row.original}
refetch={refetch}
authenticated={authenticated}
authenticated={auth.authenticated}
setActiveModal={modalContext.setActiveModal}
/>
),
}),
].filter((c) => typeof c !== "undefined") as ColumnDef<Book, any>[],
[
authenticated,
columnHelper,
selectedBooks,
data,
toggleBookSelection,
refetch,
modalContext.setActiveModal,
]
[auth.authenticated, columnHelper, modalContext.setActiveModal, refetch]
);
const shelf = params.get("shelf");
const year = params.get("year");
const data = useMemo(
() =>
books?.filter(
(b) =>
(!shelf || b.shelf?.toLowerCase() === shelf?.toLowerCase()) &&
(!year || b.published.toString() === year)
) ?? [],
[books, year, shelf]
);
const [pagination, setPagination] = React.useState<PaginationState>({
@ -225,6 +179,19 @@ export const Library = (): React.JSX.Element => {
[table.getState().pagination.pageIndex]
);
const getPage = useCallback(
(n: number) => (
<Pagination.Item
key={`${n}th-page`}
active={n === currentPage}
onClick={() => table.setPageIndex(n)}
>
{n + 1}
</Pagination.Item>
),
[table, currentPage]
);
return (
<div className='m-auto p-2' style={{ width: "100%", maxHeight: "100vh" }}>
<ModalSelector {...modalContext} />
@ -282,32 +249,32 @@ export const Library = (): React.JSX.Element => {
</div>
{table.getPageCount() ? (
<div className='d-flex w-100'>
<Pagination
currentPage={currentPage}
setPageIndex={table.setPageIndex}
getPageCount={table.getPageCount}
/>
{authenticated && (
<Button
style={{
marginLeft: "0px",
marginRight: "auto",
}}
className='my-auto'
onClick={() =>
modalContext.setActiveModal({
type: modalTypes.moveShelf,
books: selectedBooks,
onClose: () => {
refetch();
modalContext.setActiveModal();
},
})
}
<Pagination className='d-flex m-auto'>
<Pagination.Item
key='prev'
disabled={currentPage === 0}
onClick={() => table.setPageIndex(currentPage - 1)}
>
Move selection
</Button>
)}
<AiOutlineLeft />
</Pagination.Item>
{getPage(0)}
{currentPage > 3 && <Pagination.Ellipsis />}
{currentPage === 3 && getPage(currentPage - 2)}
{currentPage > 1 && getPage(currentPage - 1)}
{currentPage > 0 && getPage(currentPage)}
{currentPage < table.getPageCount() - 2 && getPage(currentPage + 1)}
{currentPage < table.getPageCount() - 3 &&
table.getPageCount() > 4 && <Pagination.Ellipsis />}
{currentPage < table.getPageCount() - 1 &&
getPage(table.getPageCount() - 1)}
<Pagination.Item
key='next'
onClick={() => table.setPageIndex(currentPage + 1)}
disabled={currentPage >= table.getPageCount() - 1}
>
<AiOutlineRight />
</Pagination.Item>
</Pagination>
</div>
) : null}
</div>

View file

@ -1,10 +1,11 @@
import { useMutation } from "@tanstack/react-query";
import { useCallback } from "react";
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 { secondary } from "../../../colors";
import { ModalContextType } from "../../../App";
import { modalTypes } from "../../../shared/components/modals/types";
import { Book } from "../../../types/Book";
import { useCallback } from "react";
const { book: bookModal, checkout, del } = modalTypes;
@ -43,7 +44,11 @@ export const Actions = ({
return (
<>
<Dropdown>
<Dropdown.Toggle variant='success' id='dropdown-basic'>
<Dropdown.Toggle
variant='success'
id='dropdown-basic'
style={{ backgroundColor: secondary, border: "2px solid black" }}
>
<ImMenu size={25} color='black' />
</Dropdown.Toggle>
@ -54,7 +59,14 @@ export const Actions = ({
className='d-flex'
onClick={() => setActiveModal({ type: bookModal, book, onClose })}
>
<Badge pill className='ml-2 d-flex mr-2'>
<Badge
pill
className='ml-2 d-flex mr-2'
style={{
border: "2px solid black",
backgroundColor: "transparent",
}}
>
<ImBook size={25} color='black' className='m-auto' />
</Badge>
<p className='m-auto' style={{ paddingLeft: "10px" }}>
@ -75,7 +87,13 @@ export const Actions = ({
})
}
>
<Badge pill className='ml-2 d-flex mr-2'>
<Badge
pill
className='ml-2 d-flex mr-2'
style={{
border: "2px solid black",
}}
>
<ImBoxRemove size={25} color='black' className='m-auto' />
</Badge>{" "}
<p className='m-auto' style={{ paddingLeft: "10px" }}>
@ -108,9 +126,17 @@ export const Actions = ({
<Dropdown.Item
id='delete'
className='d-flex'
onClick={() => setActiveModal({ type: del, onClose, ...book })}
onClick={() =>
setActiveModal({ type: del, uuid: book.uuid, onClose })
}
>
<Badge
pill
className='ml-2 d-flex danger mr-2'
style={{
border: "2px solid black",
}}
>
<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" }}>

View file

@ -1,64 +0,0 @@
import React, { useCallback } from "react";
import { Pagination as BP } from "react-bootstrap";
import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
import { useAuth } from "../../../shared/utils/useAuthentication";
export const Pagination = ({
currentPage,
getPageCount,
setPageIndex,
}: {
currentPage: number;
getPageCount: () => number;
setPageIndex: (index: number) => void;
}): React.JSX.Element => {
const { authenticated } = useAuth();
const getPage = useCallback(
(n: number) => (
<BP.Item
key={`${n}th-page`}
active={n === currentPage}
onClick={() => setPageIndex(n)}
>
{n + 1}
</BP.Item>
),
[setPageIndex, currentPage]
);
return (
<BP
className='d-flex'
style={{
marginLeft: "auto",
marginRight: authenticated ? "10px" : "auto",
}}
>
<BP.Item
key='prev'
disabled={currentPage === 0}
onClick={() => setPageIndex(currentPage - 1)}
>
<AiOutlineLeft />
</BP.Item>
{getPage(0)}
{currentPage > 3 && <BP.Ellipsis />}
{currentPage === 3 && getPage(currentPage - 2)}
{currentPage > 1 && getPage(currentPage - 1)}
{currentPage > 0 && getPage(currentPage)}
{currentPage < getPageCount() - 2 && getPage(currentPage + 1)}
{currentPage < getPageCount() - 3 && getPageCount() > 4 && (
<BP.Ellipsis />
)}
{currentPage < getPageCount() - 1 && getPage(getPageCount() - 1)}
<BP.Item
key='next'
onClick={() => setPageIndex(currentPage + 1)}
disabled={currentPage >= getPageCount() - 1}
>
<AiOutlineRight />
</BP.Item>
</BP>
);
};

View file

@ -13,6 +13,7 @@ import { TfiKey } from "react-icons/tfi";
import { Link, useNavigate } from "react-router-dom";
import { Book } from "../../types/Book";
import { secondary } from "../../colors";
import { useAuth } from "../../shared/utils/useAuthentication";
import { ModalContext } from "../../App";
import { modalTypes } from "../../shared/components/modals/types";
@ -94,12 +95,16 @@ export const Main = (): React.JSX.Element => {
onChange={(ev) => setTitle(ev.target.value)}
style={{
borderRadius: "20px 0px 0px 20px",
border: "2px solid black",
borderRight: "none",
}}
/>
<Button
style={{
borderRadius: "0px 5px 5px 0px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
}}
className='mr-2'
disabled={activeModal?.type === scanner || isFetching}
@ -130,6 +135,9 @@ export const Main = (): React.JSX.Element => {
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
marginLeft: "auto",
marginRight: "10px",
}}
@ -143,6 +151,9 @@ export const Main = (): React.JSX.Element => {
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
marginLeft: "auto",
marginRight: "10px",
}}
@ -163,6 +174,9 @@ export const Main = (): React.JSX.Element => {
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
}}
>
<ImBooks /> Browse library{" "}
@ -172,6 +186,9 @@ export const Main = (): React.JSX.Element => {
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
marginRight: "auto",
marginLeft: "10px",
}}

View file

@ -1,29 +0,0 @@
import { XMLParser } from "fast-xml-parser";
import { Book } from "../../../types/Book";
export const tryDeutscheNationalBibliothekApi = async (
isbn: string
): Promise<Pick<Book, "published" | "title"> | undefined> => {
const parser = new XMLParser();
const foundBooks = parser.parse(
await (
await fetch(
"https://services.dnb.de/sru/dnb?version=1.1&operation=searchRetrieve&query=" +
isbn
)
).text()
);
const foundBook =
foundBooks.searchRetrieveResponse?.records?.record?.recordData?.[
"rdf:RDF"
]?.["rdf:Description"];
if (!!foundBook) {
return {
published: foundBook["dcterms:issued"],
title: foundBook["dc:title"],
};
}
return undefined;
};

View file

@ -1,16 +0,0 @@
import { Book } from "../../../types/Book";
export const tryGoogleBooksApi = async (
isbn: string
): Promise<Pick<Book, "published" | "title"> | undefined> => {
const googleBooks = await (
await fetch("https://www.googleapis.com/books/v1/volumes?q=isbn:" + isbn)
).json();
if ("items" in googleBooks) {
return {
published: googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4),
title: googleBooks.items[0].volumeInfo.title,
};
}
return undefined;
};

View file

@ -2,6 +2,7 @@ import { useCallback, useContext } from "react";
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
import { useForm, useWatch } from "react-hook-form";
import { TfiKey } from "react-icons/tfi";
import { primaryRGBA, primary, secondary } from "../../../colors";
import { ModalHeader } from "./ModalHeader";
import { AuthContext } from "../../../App";
import { AuthModalProps } from "./types";
@ -70,7 +71,12 @@ export const AuthenticationModal = ({
);
return (
<Modal show={open} onHide={onClose} centered>
<Modal
show={open}
onHide={onClose}
style={{ backgroundColor: primaryRGBA }}
centered
>
<ModalHeader
onClose={onClose}
title={isUpdate ? "Set new Admin key" : "Admin Login"}
@ -78,7 +84,9 @@ export const AuthenticationModal = ({
/>
<Modal.Body
style={{
border: "2px solid black",
borderTop: "none",
backgroundColor: primary,
}}
>
<Form
@ -133,6 +141,9 @@ export const AuthenticationModal = ({
{!isUpdate && (
<Form.Group as={Row} className='mb-2'>
<Col sm='4'>
<Form.Label>Password</Form.Label>
</Col>
<Col>
<Form.Control
{...register("password", {
@ -155,6 +166,9 @@ export const AuthenticationModal = ({
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
marginLeft: "auto",
marginRight: "10px",
}}

View file

@ -5,9 +5,8 @@ import { ModalHeader } from "./ModalHeader";
import { useForm, useWatch } from "react-hook-form";
import { Book, bookShelfs } from "../../../types/Book";
import { useScanner } from "../../utils/useScanner";
import { primary, primaryRGBA, secondary } from "../../../colors";
import { BookModalProps } from "./types";
import { tryGoogleBooksApi } from "../../../pages/Main/utils/tryGoogleBooksApi";
import { tryDeutscheNationalBibliothekApi } from "../../../pages/Main/utils/tryDeutscheNationalBibliothekApi";
type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
@ -29,33 +28,24 @@ export const BookModal = ({
reset(book);
}, [book, reset]);
const [processingDetection, setProcessingDetection] = useState(false);
const onDetected = useCallback(
async (result: string) => {
if (!processingDetection) {
setProcessingDetection(true);
const apiResponses = (
await Promise.all([
tryDeutscheNationalBibliothekApi(result),
tryGoogleBooksApi(result),
])
).filter((b) => !!b) as Pick<Book, "published" | "title">[];
if (apiResponses.length) {
Object.entries(apiResponses[0]).forEach(([key, value]) => {
setValue(key as keyof BookForm, value);
});
const { scannerError, setScannerRef } = useScanner({
onDetected: async (result) => {
const googleBooks = await (
await fetch(
"https://www.googleapis.com/books/v1/volumes?q=isbn:" + result
)
).json();
if ("items" in googleBooks) {
console.log(googleBooks);
setValue(
"published",
googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4)
);
setValue("title", googleBooks.items[0].volumeInfo.title);
}
setValue("isbn", result);
setShowScanner(false);
setProcessingDetection(false);
}
},
[processingDetection, setValue]
);
const { scannerError, setScannerRef } = useScanner({
onDetected,
});
const values = useWatch({ control });
@ -104,7 +94,12 @@ export const BookModal = ({
);
return (
<Modal show={open} onHide={onClose} centered>
<Modal
show={open}
onHide={onClose}
style={{ backgroundColor: primaryRGBA }}
centered
>
<ModalHeader
onClose={onClose}
title={`${!!book ? "Edit" : "Add new"} Book`}
@ -112,7 +107,9 @@ export const BookModal = ({
/>
<Modal.Body
style={{
border: "2px solid black",
borderTop: "none",
backgroundColor: primary,
}}
>
{!showScanner && (
@ -139,6 +136,9 @@ export const BookModal = ({
<Button
style={{
borderRadius: "0px 5px 5px 0px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
}}
className='mr-2 pt-0'
disabled={showScanner}
@ -237,6 +237,9 @@ export const BookModal = ({
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
marginLeft: "auto",
marginRight: "10px",
}}
@ -257,6 +260,7 @@ export const BookModal = ({
className='drawingBuffer w-100 position-absolute'
style={{
height: "100%",
border: "2px solid black",
}}
/>
</div>

View file

@ -1,11 +1,12 @@
import React, { useCallback, useState } from "react";
import { Alert, Button, Col, Form, Modal, Row } from "react-bootstrap";
import { useForm, useWatch } from "react-hook-form";
import { AiOutlineExclamationCircle } from "react-icons/ai";
import { ImBoxAdd, ImBoxRemove } from "react-icons/im";
import { useForm, useWatch } from "react-hook-form";
import { Book } from "../../../types/Book";
import { primary, primaryRGBA, secondary } from "../../../colors";
import { ModalHeader } from "./ModalHeader";
import { CheckoutBookModalProps } from "./types";
import { AiOutlineExclamationCircle } from "react-icons/ai";
type BookCheckoutForm = Pick<Book, "checkoutBy" | "contact">;
@ -67,7 +68,12 @@ export const CheckoutBookModal = ({
);
return (
<Modal show={open} onHide={onClose} centered>
<Modal
show={open}
onHide={onClose}
style={{ backgroundColor: primaryRGBA }}
centered
>
<ModalHeader
onClose={onClose}
title={`${isChechout ? "Checkout" : "Return"} book '${title}'`}
@ -81,7 +87,9 @@ export const CheckoutBookModal = ({
/>
<Modal.Body
style={{
border: "2px solid black",
borderTop: "none",
backgroundColor: primary,
}}
>
<Alert className='w-80 m-auto my-4' variant='warning'>
@ -179,6 +187,9 @@ export const CheckoutBookModal = ({
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
marginLeft: "auto",
marginRight: "10px",
}}

View file

@ -1,12 +1,12 @@
import { useMutation } from "@tanstack/react-query";
import { Button, Modal } from "react-bootstrap";
import { ImBin } from "react-icons/im";
import { primary, primaryRGBA, secondary } from "../../../colors";
import { ModalHeader } from "./ModalHeader";
import { ImBin } from "react-icons/im";
import { useMutation } from "@tanstack/react-query";
import { DeleteBookModalProps } from "./types";
export const DeleteBookModal = ({
uuid,
title,
open,
onClose,
}: Omit<DeleteBookModalProps, "type">): React.JSX.Element => {
@ -24,22 +24,31 @@ export const DeleteBookModal = ({
});
return (
<Modal show={open} onHide={onClose} centered>
<Modal
show={open}
onHide={onClose}
style={{ backgroundColor: primaryRGBA }}
centered
>
<ModalHeader
onClose={onClose}
title={`Delete Book "${title}"`}
title={"Move to Shelf"}
icon={<ImBin size={50} className='ml-0 mr-auto' />}
/>
<Modal.Body
style={{
border: "2px solid black",
borderTop: "none",
backgroundColor: primary,
}}
>
Do you really want to delete this book?
<div className='d-flex mx-auto mb-auto mt-2 w-100'>
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
marginLeft: "auto",
marginRight: "10px",
}}
@ -50,6 +59,9 @@ export const DeleteBookModal = ({
<Button
style={{
borderRadius: "5px",
backgroundColor: secondary,
color: "black",
border: "2px solid black",
marginLeft: "auto",
marginRight: "10px",
}}

View file

@ -1,6 +1,7 @@
import React from "react";
import { Button, Modal } from "react-bootstrap";
import { AiOutlineClose } from "react-icons/ai";
import { primary, secondary } from "../../../colors";
export const ModalHeader = ({
title,
@ -12,7 +13,13 @@ export const ModalHeader = ({
icon?: JSX.Element;
}): React.JSX.Element => {
return (
<Modal.Header>
<Modal.Header
style={{
border: "2px solid black",
borderBottom: "none",
backgroundColor: primary,
}}
>
<Modal.Title className='w-100 d-flex' style={{ height: "fit-content" }}>
{typeof title === "string" ? (
<>
@ -27,6 +34,9 @@ export const ModalHeader = ({
<Button
className='ml-auto mr-0'
style={{
backgroundColor: secondary,
color: "black",
border: "2px solid black",
width: "fit-content",
height: "fit-content",
}}

View file

@ -6,9 +6,8 @@ import { CheckoutBookModal } from "./CheckoutModal";
import { ScannerModal } from "./ScannerModal";
import { DeleteBookModal } from "./DeleteBookModal";
import { ModalContextType } from "../../../App";
import { MoveShelfModal } from "./MoveShelfModal";
const { auth, book, checkout, scanner, del, moveShelf } = modalTypes;
const { auth, book, checkout, scanner, del } = modalTypes;
export const ModalSelector = ({
activeModal,
@ -49,15 +48,7 @@ export const ModalSelector = ({
<DeleteBookModal
open={activeModal?.type === del}
onClose={activeModal?.type === del ? activeModal.onClose : setActiveModal}
uuid={activeModal?.type === del ? activeModal.uuid : ""}
title={activeModal?.type === del ? activeModal.title : ""}
/>
<MoveShelfModal
books={activeModal?.type === moveShelf ? activeModal.books : []}
open={activeModal?.type === moveShelf}
onClose={
activeModal?.type === moveShelf ? activeModal.onClose : setActiveModal
}
uuid={activeModal?.type === checkout ? activeModal.uuid : ""}
/>
</>
);

View file

@ -1,100 +0,0 @@
import { useMutation } from "@tanstack/react-query";
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
import { ImBook } from "react-icons/im";
import { ModalHeader } from "./ModalHeader";
import { MoveShelfAction, MoveShelfModalProps } from "./types";
import { useForm, useWatch } from "react-hook-form";
import { bookShelfs } from "../../../types/Book";
export const MoveShelfModal = ({
books,
open,
onClose,
}: Omit<MoveShelfModalProps, "type">): React.JSX.Element => {
const { control, register, formState, setError } = useForm<MoveShelfAction>({
mode: "onChange",
});
const values = useWatch({ control });
const { mutate: mv } = useMutation({
mutationFn: async () => {
if (!values.target) {
setError("target", { message: "Taget shelf is required" });
return;
}
await fetch(`/api/shelf/move`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ ...values, books }),
});
onClose();
},
});
return (
<Modal show={open} onHide={onClose} centered>
<ModalHeader
onClose={onClose}
title={"Move to Shelf"}
icon={<ImBook size={50} className='ml-0 mr-auto' />}
/>
<Modal.Body
style={{
borderTop: "none",
}}
>
<Form.Group as={Row} className='mb-2'>
<Col sm='2'>
<Form.Label>Shelf</Form.Label>
</Col>
<Col>
<Form.Select
{...register("target", { required: true })}
isInvalid={!!formState.errors.target}
>
{Object.keys(bookShelfs).map((key) => (
<option
key='key'
value={bookShelfs[key as keyof typeof bookShelfs]}
>
{key}
</option>
))}
</Form.Select>
<Form.Control.Feedback type='invalid'>
{!values.target
? "Target shelf is required"
: formState.errors.target?.message}
</Form.Control.Feedback>
</Col>
</Form.Group>
<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: "0px",
marginRight: "10px",
}}
onClick={() => mv()}
>
Move
</Button>
</div>
</Modal.Body>
</Modal>
);
};

View file

@ -1,6 +1,7 @@
import React from "react";
import { Modal } from "react-bootstrap";
import { ImCamera } from "react-icons/im";
import { primaryRGBA } from "../../../colors";
import { useScanner } from "../../utils/useScanner";
import { ModalHeader } from "./ModalHeader";
@ -16,13 +17,18 @@ export const ScannerModal = ({
const { scannerError, setScannerRef } = useScanner({ onDetected });
return (
<Modal show={open} onHide={onClose} centered>
<Modal
show={open}
onHide={onClose}
style={{ backgroundColor: primaryRGBA }}
centered
>
<ModalHeader
onClose={onClose}
title={"Scan barcode"}
icon={<ImCamera size={50} className='ml-0 mr-auto' />}
/>
<Modal.Body>
<Modal.Body style={{ border: "2px solid black", borderTop: "none" }}>
<div
className='w-100 overflow-hidden'
ref={(ref) => setScannerRef(ref)}
@ -35,7 +41,7 @@ export const ScannerModal = ({
className='drawingBuffer w-100 position-absolute'
style={{
height: "100%",
border: `2px solid black`,
border: "2px solid black",
}}
/>
</div>

View file

@ -11,7 +11,6 @@ export const modalTypes = {
checkout: "checkout",
scanner: "scanner",
del: "del",
moveShelf: "moveShelf",
} as const;
export type ModalTypes = keyof typeof modalTypes;
@ -38,21 +37,11 @@ export type ScannnerModal = {
} & BaseModalProps;
export type DeleteBookModalProps = { type: "del" } & BaseModalProps &
Pick<Book, "uuid" | "title">;
export type MoveShelfModalProps = { type: "moveShelf" } & BaseModalProps & {
books: Book["uuid"][];
};
export interface MoveShelfAction {
target: Book["shelf"];
books: Book["uuid"][];
}
Pick<Book, "uuid">;
export type ActiveModalProps =
| Omit<AuthModalProps, "open" | "onClose">
| Omit<BookModalProps, "open">
| Omit<CheckoutBookModalProps, "open">
| Omit<ScannnerModal, "open" | "onClose">
| Omit<DeleteBookModalProps, "open">
| Omit<MoveShelfModalProps, "open">;
| Omit<DeleteBookModalProps, "open">;

View file

@ -103,25 +103,15 @@ export const useScanner = ({
};
const getCameraId = useCallback(async () => {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" },
await navigator.mediaDevices.getUserMedia({
video: true,
});
if (
stream &&
stream.getVideoTracks().length &&
stream.getVideoTracks()[0].getSettings().deviceId
) {
return stream.getVideoTracks()[0].getSettings().deviceId;
}
const devices = await navigator.mediaDevices
.enumerateDevices()
.then((ds) => ds.filter((d) => d.kind === "videoinput"));
const back = devices.filter((d) =>
d.label.toLowerCase().includes("back")
)[0];
const back = devices.filter((d) => d.label === "Back Camera")[0];
return !back ? devices[0].deviceId : back.deviceId;
}, []);

View file

@ -2,7 +2,7 @@ import express, { Request, Response, Application } from "express";
import dotenv from "dotenv";
import { createPool } from "mariadb";
import { Book, MoveShelfAction } from "./types/Book";
import { Book } from "./types/Book";
import {
checkoutBook,
findBook,
@ -19,7 +19,6 @@ import session from "express-session";
import { censorBookData } from "./utils/censorBookData";
import * as fs from "fs";
import { checkForThreads } from "./utils/passesSQLInjectionCheck";
import { moveShelf } from "./queries/moveShelf";
dotenv.config();
@ -200,31 +199,6 @@ app.post(
}
);
app.post(
"/api/shelf/move",
async (
req: Request<undefined, undefined, MoveShelfAction>,
res: Response
) => {
await isAuthenticated(req, res, async () => {
const { target } = req.body;
try {
const containsThread = checkForThreads([target], res);
if (containsThread) {
return;
}
const conn = await pool.getConnection();
await conn.query(moveShelf(req.body));
await conn.end();
res.status(200).send(`Books moved to shelf ${target}.`);
} catch (error) {
res.status(500).send("Internal Server Error: " + error);
}
});
}
);
app.post(
"/api/books/edit",
async (
@ -256,7 +230,7 @@ app.post(
} else {
await conn.query(editBook(req.body));
await conn.end();
res.status(200).send("Book edited.");
res.status(200).send("Book moved to shelf");
}
} catch (error) {
res.status(500).send("Internal Server Error: " + error);

View file

@ -1,6 +0,0 @@
import { MoveShelfAction } from "../types/Book";
export const moveShelf = ({ target, books }: MoveShelfAction) =>
`UPDATE bookData SET shelf='${target}' WHERE uuid IN ('${books.join(
"', '"
)}');`;

View file

@ -9,8 +9,3 @@ export type Book = {
contact: string | null;
shelf: "AVAILABLE" | "FNORD1" | "FNORD2" | "SHARING" | null;
};
export interface MoveShelfAction {
target: Book["shelf"];
books: Book["uuid"][];
}