Compare commits
No commits in common. "main" and "try-google-books-api-for-book-identification-by-isbn" have entirely different histories.
main
...
try-google
40 changed files with 756 additions and 3775 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,4 +1,3 @@
|
|||
.env
|
||||
n39env
|
||||
.n39env
|
||||
.vscode
|
||||
2279
frontend/package-lock.json
generated
2279
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -5,7 +5,7 @@
|
|||
"proxy": "http://localhost:3001",
|
||||
"dependencies": {
|
||||
"@ericblade/quagga2": "^1.8.4",
|
||||
"@tanstack/react-query": "^5.59.15",
|
||||
"@tanstack/react-query": "^5.52.1",
|
||||
"@tanstack/react-table": "^8.20.5",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
|
|
@ -16,9 +16,7 @@
|
|||
"@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",
|
||||
"jest-canvas-mock": "^2.5.2",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.4",
|
||||
"react-dom": "^18.3.1",
|
||||
|
|
@ -32,7 +30,7 @@
|
|||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --testPathPattern='(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$'",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
|
|
|||
9
frontend/src/App.test.tsx
Normal file
9
frontend/src/App.test.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -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,8 +50,9 @@ function App() {
|
|||
style={{
|
||||
height: "100vh",
|
||||
width: "100vw",
|
||||
backgroundColor: primary,
|
||||
fontFamily: "New Amsterdam",
|
||||
overflow: "hidden",
|
||||
overflow: "scroll",
|
||||
}}
|
||||
>
|
||||
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -12,239 +12,49 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#bootstrap-overrides {
|
||||
background-color: #f2f3f4;
|
||||
color: #5e6268;
|
||||
|
||||
.btn-primary {
|
||||
background-color: #5e6268;
|
||||
color: #f2f3f4;
|
||||
border: 1px solid #5e6268;
|
||||
}
|
||||
|
||||
form-control {
|
||||
background-color: #f2f2e8 !important;
|
||||
border-color: #5e6268 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
background-color: #f2f2e8 !important;
|
||||
color: #5e6268 !important;
|
||||
border: 2px solid #f2f2e8;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #5e6268 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
#bootstrap-overrides .form-select .form-control {
|
||||
background-color: #f2f2e8 !important;
|
||||
border-color: #f2f2e8 !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#bootstrap-overrides {
|
||||
background-color: #5e6268;
|
||||
color: #f2f3f4;
|
||||
#bootstrap-overrides .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #f2f3f4;
|
||||
color: #5e6268;
|
||||
border-left: 1px solid #5e6268;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: #f2f2e8 !important;
|
||||
border-color: #5e6268 !important;
|
||||
border-right: none;
|
||||
}
|
||||
#bootstrap-overrides table {
|
||||
letter-spacing: 0.25em;
|
||||
}
|
||||
|
||||
.form-select .form-control {
|
||||
background-color: #f2f2e8 !important;
|
||||
border-color: #f2f2e8 !important;
|
||||
}
|
||||
#bootstrap-overrides .bg-primary {
|
||||
background-color: #f2f3f4 !important;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
#bootstrap-overrides .modal-body {
|
||||
background-color: #f2f3f4 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
#bootstrap-overrides .danger {
|
||||
background-color: #f9a9ab !important;
|
||||
}
|
||||
|
||||
tbody > tr > td {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||
"Helvetica Neue", sans-serif !important;
|
||||
}
|
||||
#bootstrap-overrides .page-link {
|
||||
color: black !important;
|
||||
border: 2px solid black !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.table > :not(caption) > * > * {
|
||||
background-color: #5e6268 !important;
|
||||
color: #f2f2e8 !important;
|
||||
}
|
||||
|
||||
table > thead {
|
||||
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;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
background-color: #f2f2e8 !important;
|
||||
color: #5e6268 !important;
|
||||
border: 2px solid #f2f2e8;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #f2f2e8 !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: #f2f3f4 !important;
|
||||
color: #5e6268 !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
}
|
||||
#bootstrap-overrides .active > .page-link {
|
||||
background-color: black !important;
|
||||
color: #f2f3f4 !important;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
@ -232,7 +199,7 @@ export const Library = (): React.JSX.Element => {
|
|||
<div
|
||||
style={{
|
||||
maxWidth: "100%",
|
||||
maxHeight: "80vh",
|
||||
maxHeight: "70vh",
|
||||
overflow: "auto",
|
||||
marginBottom: "5px",
|
||||
}}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
<Badge
|
||||
pill
|
||||
className='ml-2 d-flex danger mr-2'
|
||||
style={{
|
||||
border: "2px solid black",
|
||||
}}
|
||||
>
|
||||
<ImBin size={25} color='black' className='m-auto' />
|
||||
</Badge>{" "}
|
||||
<p className='m-auto' style={{ paddingLeft: "10px" }}>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
import { cleanup } from "@testing-library/react";
|
||||
import { tryDeutscheNationalBibliothekApi } from "../tryDeutscheNationalBibliothekApi";
|
||||
|
||||
const dnbBookMock = {
|
||||
text: () =>
|
||||
`<?xml version="1.0" encoding="UTF-8"?>
|
||||
<searchRetrieveResponse xmlns="http://www.loc.gov/zing/srw/"><version>1.1</version><numberOfRecords>1</numberOfRecords><records><record><recordSchema>RDFxml</recordSchema><recordPacking>xml</recordPacking><recordData><rdf:RDF xmlns:schema="http://schema.org/" xmlns:gndo="https://d-nb.info/standards/elementset/gnd#" xmlns:lib="http://purl.org/library/" xmlns:owl="http://www.w3.org/2002/07/owl#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:editeur="https://ns.editeur.org/thema/" xmlns:geo="http://www.opengis.net/ont/geosparql#" xmlns:umbel="http://umbel.org/umbel#" xmlns:naf="https://id.loc.gov/authorities/names/" xmlns:rdau="http://rdaregistry.info/Elements/u/" xmlns:sf="http://www.opengis.net/ont/sf#" xmlns:bflc="http://id.loc.gov/ontologies/bflc/" xmlns:thesoz="http://lod.gesis.org/thesoz/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:isbd="http://iflastandards.info/ns/isbd/elements/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:mesh="http://id.nlm.nih.gov/mesh/vocab#" xmlns:ram="https://data.bnf.fr/ark:/12148/" xmlns:mo="http://purl.org/ontology/mo/" xmlns:marcRole="http://id.loc.gov/vocabulary/relators/" xmlns:agrelon="https://d-nb.info/standards/elementset/agrelon#" xmlns:dcmitype="http://purl.org/dc/dcmitype/" xmlns:nsogg="https://purl.org/bncf/tid/" xmlns:dnbt="https://d-nb.info/standards/elementset/dnb#" xmlns:dbp="http://dbpedia.org/property/" xmlns:embne="https://datos.bne.es/resource/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dnb_intern="http://dnb.de/" xmlns:madsrdf="http://www.loc.gov/mads/rdf/v1#" xmlns:cidoc="http://www.cidoc-crm.org/cidoc-crm/" xmlns:dcatde="http://dcat-ap.de/def/dcatde/" xmlns:v="http://www.w3.org/2006/vcard/ns#" xmlns:ebu="http://www.ebu.ch/metadata/ontologies/ebucore/ebucore#" xmlns:wdrs="http://www.w3.org/2007/05/powder-s#" xmlns:gbv="http://purl.org/ontology/gbv/" xmlns:bibo="http://purl.org/ontology/bibo/" xmlns:agrovoc="https://aims.fao.org/aos/agrovoc/" xmlns:lcsh="https://id.loc.gov/authorities/subjects/" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<rdf:Description rdf:about="https://d-nb.info/962361321">
|
||||
<rdf:type rdf:resource="http://purl.org/ontology/bibo/Document"/>
|
||||
<dcterms:medium rdf:resource="http://rdaregistry.info/termList/RDACarrierType/1044"/>
|
||||
<rdau:P60049 rdf:resource="http://rdaregistry.info/termList/RDAContentType/1020"/>
|
||||
<rdau:P60050 rdf:resource="http://rdaregistry.info/termList/RDAMediaType/1007"/>
|
||||
<rdau:P60048 rdf:resource="http://rdaregistry.info/termList/RDACarrierType/1049"/>
|
||||
<dc:identifier rdf:datatype="http://www.w3.org/2001/XMLSchema#string">(DE-101)962361321</dc:identifier>
|
||||
<bibo:isbn13 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">9783898641227</bibo:isbn13>
|
||||
<rdau:P60521 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">Pp. : DM 79.00, EUR 41.00 (ab 1.1.2002), sfr 70.00, S 577.00</rdau:P60521>
|
||||
<bibo:isbn10 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">3898641228</bibo:isbn10>
|
||||
<rdau:P60521 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">Pp. : DM 79.00, EUR 41.00 (ab 1.1.2002), sfr 70.00, S 577.00</rdau:P60521>
|
||||
<dc:identifier rdf:datatype="http://www.w3.org/2001/XMLSchema#string">(OCoLC)76300394</dc:identifier>
|
||||
<rdau:P60049 rdf:resource="https://d-nb.info/gnd/4123623-3"/>
|
||||
<rdau:P60327 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">Gunter Saake ; Kai-Uwe Sattler</rdau:P60327>
|
||||
|
||||
<dc:title rdf:datatype="http://www.w3.org/2001/XMLSchema#string">mockedbook</dc:title>
|
||||
|
||||
<dcterms:creator rdf:resource="https://d-nb.info/gnd/122164458"/>
|
||||
<marcRole:aut rdf:resource="https://d-nb.info/gnd/122164458"/>
|
||||
<marcRole:aut rdf:resource="https://d-nb.info/gnd/120420392"/>
|
||||
<bibo:edition rdf:datatype="http://www.w3.org/2001/XMLSchema#string">1. Aufl.</bibo:edition>
|
||||
<dc:publisher rdf:datatype="http://www.w3.org/2001/XMLSchema#string">dpunkt-Verl.</dc:publisher>
|
||||
<rdau:P60163 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">Heidelberg</rdau:P60163>
|
||||
<rdau:P60333 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">Heidelberg : dpunkt-Verl.</rdau:P60333>
|
||||
<rdau:P60539 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">25 cm</rdau:P60539>
|
||||
<rdau:P60470 xml:lang="de">Ill.</rdau:P60470>
|
||||
<rdau:P60470 xml:lang="de">Literaturverz. S. 483 - 486</rdau:P60470>
|
||||
<dcterms:subject rdf:resource="https://d-nb.info/gnd/4011146-5"/>
|
||||
<dcterms:subject rdf:resource="https://d-nb.info/gnd/4401313-9"/>
|
||||
<dcterms:subject rdf:resource="https://d-nb.info/gnd/4001183-5"/>
|
||||
<dcterms:subject rdf:resource="https://d-nb.info/gnd/4401313-9"/>
|
||||
<dcterms:tableOfContents rdf:resource="https://d-nb.info/962361321/04"/>
|
||||
<wdrs:describedby>
|
||||
<rdf:Description rdf:about="https://d-nb.info/962361321/about">
|
||||
<dcterms:license rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/"/>
|
||||
<dcterms:modified rdf:datatype="http://www.w3.org/2001/XMLSchema#dateTime">2024-10-13T04:31:46.000</dcterms:modified>
|
||||
</rdf:Description>
|
||||
</wdrs:describedby>
|
||||
|
||||
<dcterms:issued rdf:datatype="http://www.w3.org/2001/XMLSchema#string">2024</dcterms:issued>
|
||||
|
||||
<rdau:P60493 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">eine Einführung mit Java</rdau:P60493>
|
||||
<isbd:P1053 rdf:datatype="http://www.w3.org/2001/XMLSchema#string">XVI, 494 S.</isbd:P1053>
|
||||
<owl:sameAs rdf:resource="http://hub.culturegraph.org/resource/DNB-962361321"/>
|
||||
</rdf:Description>
|
||||
</rdf:RDF></recordData><recordPosition>1</recordPosition></record></records><echoedSearchRetrieveRequest><version>1.1</version><query>9783898641227</query><xQuery xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nil="true"/></echoedSearchRetrieveRequest></searchRetrieveResponse>`,
|
||||
};
|
||||
|
||||
describe("tryDeutscheNationalBibliothekApi", () => {
|
||||
it("should parse dnb response to book", async () => {
|
||||
global.fetch = jest.fn(() => Promise.resolve(dnbBookMock)) as jest.Mock;
|
||||
|
||||
const book = await tryDeutscheNationalBibliothekApi("mocked-isbn");
|
||||
|
||||
expect(book).toStrictEqual({
|
||||
published: 2024,
|
||||
title: "mockedbook",
|
||||
});
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.clearAllMocks();
|
||||
cleanup();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { cleanup } from "@testing-library/react";
|
||||
import { tryGoogleBooksApi } from "../tryGoogleBooksApi";
|
||||
|
||||
const goolgeBooksMock = {
|
||||
json: () => ({
|
||||
items: [
|
||||
{
|
||||
volumeInfo: {
|
||||
publishedDate: "2024-10-31",
|
||||
title: "mockedbook",
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
};
|
||||
|
||||
describe("tryGoogleBooksApi", () => {
|
||||
it("should parse google response to book", async () => {
|
||||
global.fetch = jest.fn(() => Promise.resolve(goolgeBooksMock)) as jest.Mock;
|
||||
|
||||
const book = await tryGoogleBooksApi("mocked-isbn");
|
||||
|
||||
expect(book).toStrictEqual({
|
||||
published: "2024",
|
||||
title: "mockedbook",
|
||||
});
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.clearAllMocks();
|
||||
cleanup();
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -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",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
|
||||
import { ImBook, ImCamera, ImCancelCircle } from "react-icons/im";
|
||||
import { ImBook, ImCamera } from "react-icons/im";
|
||||
import { ModalHeader } from "./ModalHeader";
|
||||
import { useForm, useWatch } from "react-hook-form";
|
||||
import { Book } from "../../../types/Book";
|
||||
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";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
|
||||
|
||||
|
|
@ -20,19 +18,6 @@ export const BookModal = ({
|
|||
const isEdit = !!book;
|
||||
const [showScanner, setShowScanner] = useState(false);
|
||||
|
||||
const [addNew, setAddNew] = useState<boolean>(false);
|
||||
|
||||
const { data: shelves, isLoading } = useQuery<string[]>({
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`/api/shelves/list`);
|
||||
const data = await response.text();
|
||||
return data
|
||||
.split(",")
|
||||
.map((s) => s.replaceAll('"', "").replace("[", "").replace("]", ""));
|
||||
},
|
||||
queryKey: ["shleves"],
|
||||
});
|
||||
|
||||
const { control, register, formState, setError, setValue, reset } =
|
||||
useForm<BookForm>({
|
||||
mode: "onChange",
|
||||
|
|
@ -43,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);
|
||||
});
|
||||
}
|
||||
setValue("isbn", result);
|
||||
setShowScanner(false);
|
||||
setProcessingDetection(false);
|
||||
}
|
||||
},
|
||||
[processingDetection, setValue]
|
||||
);
|
||||
|
||||
const { scannerError, setScannerRef } = useScanner({
|
||||
onDetected,
|
||||
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);
|
||||
},
|
||||
});
|
||||
|
||||
const values = useWatch({ control });
|
||||
|
|
@ -98,7 +74,7 @@ export const BookModal = ({
|
|||
}
|
||||
if (error) return;
|
||||
const createdBook = await fetch(
|
||||
isEdit ? "/api/books/edit" : "/api/books/create",
|
||||
isEdit ? "api/books/edit" : "/api/books/create",
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
|
|
@ -118,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`}
|
||||
|
|
@ -126,7 +107,9 @@ export const BookModal = ({
|
|||
/>
|
||||
<Modal.Body
|
||||
style={{
|
||||
border: "2px solid black",
|
||||
borderTop: "none",
|
||||
backgroundColor: primary,
|
||||
}}
|
||||
>
|
||||
{!showScanner && (
|
||||
|
|
@ -153,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}
|
||||
|
|
@ -227,52 +213,22 @@ export const BookModal = ({
|
|||
<Form.Label>Shelf</Form.Label>
|
||||
</Col>
|
||||
<Col>
|
||||
{!isLoading &&
|
||||
(addNew ? (
|
||||
<div className='d-flex'>
|
||||
<Form.Control
|
||||
id='move-shelf-text-input'
|
||||
{...register("shelf", { required: true })}
|
||||
style={{
|
||||
borderRadius: "5px 0px 0px 5px",
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
style={{
|
||||
borderRadius: "0px 5px 5px 0px",
|
||||
}}
|
||||
className='d-flex mr-2 pt-2'
|
||||
onClick={() => setAddNew(false)}
|
||||
>
|
||||
<div className='m-auto'>
|
||||
<ImCancelCircle size={20} />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Form.Select
|
||||
id='move-shelf-select'
|
||||
{...register("shelf", {
|
||||
required: true,
|
||||
onChange: (ev) => {
|
||||
if (ev.target.value === "addNew") {
|
||||
setAddNew(true);
|
||||
}
|
||||
},
|
||||
})}
|
||||
isInvalid={!!formState.errors.shelf}
|
||||
<Form.Select
|
||||
{...register("shelf", { required: true })}
|
||||
isInvalid={!!formState.errors.shelf}
|
||||
>
|
||||
{Object.keys(bookShelfs).map((key) => (
|
||||
<option
|
||||
key='key'
|
||||
value={bookShelfs[key as keyof typeof bookShelfs]}
|
||||
>
|
||||
{shelves?.map((shelf) => (
|
||||
<option key='key' value={shelf}>
|
||||
{shelf}
|
||||
</option>
|
||||
))}
|
||||
<option value='addNew'>Add new</option>
|
||||
</Form.Select>
|
||||
{key}
|
||||
</option>
|
||||
))}
|
||||
</Form.Select>
|
||||
<Form.Control.Feedback type='invalid'>
|
||||
{!values.shelf
|
||||
? "Target shelf is required"
|
||||
? "Shelf is required"
|
||||
: formState.errors.shelf?.message}
|
||||
</Form.Control.Feedback>
|
||||
</Col>
|
||||
|
|
@ -281,6 +237,9 @@ export const BookModal = ({
|
|||
<Button
|
||||
style={{
|
||||
borderRadius: "5px",
|
||||
backgroundColor: secondary,
|
||||
color: "black",
|
||||
border: "2px solid black",
|
||||
marginLeft: "auto",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -301,6 +260,7 @@ export const BookModal = ({
|
|||
className='drawingBuffer w-100 position-absolute'
|
||||
style={{
|
||||
height: "100%",
|
||||
border: "2px solid black",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">;
|
||||
|
||||
|
|
@ -29,9 +30,6 @@ export const CheckoutBookModal = ({
|
|||
|
||||
const onSubmit = useCallback(
|
||||
async (data: Partial<BookCheckoutForm>) => {
|
||||
if (!formState.isValid) {
|
||||
return;
|
||||
}
|
||||
if (!data.checkoutBy) {
|
||||
setError("checkoutBy", {
|
||||
message: `please enter ${
|
||||
|
|
@ -63,11 +61,16 @@ export const CheckoutBookModal = ({
|
|||
setFailed(await res.text());
|
||||
}
|
||||
},
|
||||
[formState.isValid, isChechout, uuid, setError, onClose]
|
||||
[uuid, onClose, setError, isChechout]
|
||||
);
|
||||
|
||||
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 +84,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'>
|
||||
|
|
@ -111,12 +116,6 @@ export const CheckoutBookModal = ({
|
|||
"'null' is not a valid nickname"
|
||||
);
|
||||
},
|
||||
notUndefinedString: (value) => {
|
||||
return (
|
||||
value?.toLocaleLowerCase() !== "undefined" ||
|
||||
"'undefined' is not a valid nickname"
|
||||
);
|
||||
},
|
||||
},
|
||||
})}
|
||||
isInvalid={!!formState.errors.checkoutBy}
|
||||
|
|
@ -179,10 +178,12 @@ export const CheckoutBookModal = ({
|
|||
<Button
|
||||
style={{
|
||||
borderRadius: "5px",
|
||||
backgroundColor: secondary,
|
||||
color: "black",
|
||||
border: "2px solid black",
|
||||
marginLeft: "auto",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
disabled={!formState.isValid}
|
||||
onClick={() => onSubmit(values)}
|
||||
>
|
||||
{`${isChechout ? "Checkout" : "Return"} book`}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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 : ""}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
|
||||
import { ImBook, ImCancelCircle } from "react-icons/im";
|
||||
import { ModalHeader } from "./ModalHeader";
|
||||
import { MoveShelfAction, MoveShelfModalProps } from "./types";
|
||||
import { useForm, useWatch } from "react-hook-form";
|
||||
import { useState } from "react";
|
||||
|
||||
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: "Target shelf is required" });
|
||||
return;
|
||||
}
|
||||
|
||||
await fetch(`/api/shelf/move`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ ...values, books }),
|
||||
});
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
|
||||
const { data: shelves, isLoading } = useQuery<string[]>({
|
||||
queryFn: async () => {
|
||||
const response = await fetch(`/api/shelves/list`);
|
||||
const data = await response.text();
|
||||
return data
|
||||
.split(",")
|
||||
.map((s) => s.replaceAll('"', "").replace("[", "").replace("]", ""));
|
||||
},
|
||||
queryKey: ["shleves"],
|
||||
});
|
||||
|
||||
const [addNew, setAddNew] = useState<boolean>(false);
|
||||
|
||||
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 className='d-flex' sm='2'>
|
||||
<Form.Label className='m-auto'>Shelf</Form.Label>
|
||||
</Col>
|
||||
<Col>
|
||||
{!isLoading &&
|
||||
(addNew ? (
|
||||
<div className='d-flex'>
|
||||
<Form.Control
|
||||
id='move-shelf-text-input'
|
||||
{...register("target", { required: true })}
|
||||
/>
|
||||
<Button
|
||||
style={{
|
||||
background: "transparent",
|
||||
marginLeft: "0px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
className='d-flex m-auto'
|
||||
onClick={() => setAddNew(false)}
|
||||
>
|
||||
<ImCancelCircle className='m-auto primary' size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Form.Select
|
||||
id='move-shelf-select'
|
||||
{...register("target", {
|
||||
required: true,
|
||||
onChange: (ev) => {
|
||||
if (ev.target.value === "addNew") {
|
||||
setAddNew(true);
|
||||
}
|
||||
},
|
||||
})}
|
||||
isInvalid={!!formState.errors.target}
|
||||
>
|
||||
{shelves?.map((shelf) => (
|
||||
<option key='key' value={shelf}>
|
||||
{shelf}
|
||||
</option>
|
||||
))}
|
||||
<option value='addNew'>Add new</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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
import { render } from "@testing-library/react";
|
||||
import { AuthenticationModal } from "../AuthenticationModal";
|
||||
|
||||
describe("AuthenticationModal", () => {
|
||||
it("renders as admin verification correctly", () => {
|
||||
const view = render(
|
||||
<AuthenticationModal
|
||||
open={true}
|
||||
onClose={() => undefined}
|
||||
isUpdate={false}
|
||||
/>
|
||||
);
|
||||
expect(view.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders as admin pw change correctly", () => {
|
||||
const view = render(
|
||||
<AuthenticationModal
|
||||
open={true}
|
||||
onClose={() => undefined}
|
||||
isUpdate={true}
|
||||
/>
|
||||
);
|
||||
expect(view.baseElement).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import { render } from "@testing-library/react";
|
||||
import { BookModal } from "../BookModal";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
|
||||
describe("BookModal", () => {
|
||||
global.fetch = jest.fn(() =>
|
||||
Promise.resolve({
|
||||
json: () => Promise.resolve({ test: 100 }),
|
||||
})
|
||||
) as jest.Mock;
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
it("renders without a book", () => {
|
||||
const view = render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BookModal open={true} onClose={() => undefined} />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
expect(view.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("sets book as default value", () => {
|
||||
const view = render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BookModal
|
||||
open={true}
|
||||
onClose={() => undefined}
|
||||
book={{
|
||||
id: 1,
|
||||
uuid: "mockedbook",
|
||||
isbn: "123",
|
||||
title: "mockedbook",
|
||||
published: 2024,
|
||||
lastCheckoutDate: null,
|
||||
checkoutBy: null,
|
||||
shelf: "AVAILABLE",
|
||||
contact: null,
|
||||
}}
|
||||
/>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
expect(view.baseElement).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,271 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AuthenticationModal renders as admin pw change correctly 1`] = `
|
||||
<body
|
||||
class="modal-open"
|
||||
data-rr-ui-modal-open=""
|
||||
style="padding-right: 2048px;"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="fade modal-backdrop show"
|
||||
/>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="fade modal show"
|
||||
role="dialog"
|
||||
style="display: block; padding-right: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="modal-dialog modal-dialog-centered"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="w-100 d-flex modal-title h4"
|
||||
>
|
||||
<svg
|
||||
class="ml-0 mr-auto"
|
||||
fill="currentColor"
|
||||
height="50"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
version="1.1"
|
||||
viewBox="0 0 17 17"
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g />
|
||||
<path
|
||||
d="M14.811 6.299l0.707-0.707-1.733-1.733 0.757-0.753-0.705-0.709-8.146 8.107c-0.484-0.336-1.070-0.535-1.703-0.535-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3c0-0.661-0.222-1.268-0.585-1.764l5.264-5.238 1.738 1.738 0.707-0.707-1.737-1.736 0.701-0.698 1.735 1.735zM3.987 14.969c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
<h2
|
||||
class="m-auto p-2"
|
||||
style="text-align: center;"
|
||||
>
|
||||
Set new Admin key
|
||||
</h2>
|
||||
<button
|
||||
class="ml-auto mr-0 btn btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.118.118 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.118.118 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.118.118 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926 224.297 857.629c-.04.041-.06.052-.083.059a.118.118 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.118.118 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512 166.371 224.297c-.041-.04-.052-.06-.059-.083a.118.118 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.118.118 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.118.118 0 0 1 .07 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-body"
|
||||
>
|
||||
<form
|
||||
class="mb-2"
|
||||
>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-4"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
Current Password
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="oldPassword"
|
||||
placeholder="Enter current admin password ..."
|
||||
type="password"
|
||||
/>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
>
|
||||
Old password is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-4"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
New Password
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="newPassword"
|
||||
placeholder="Enter new admin password ..."
|
||||
type="password"
|
||||
/>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
>
|
||||
New password is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex mx-auto mb-auto mt-2 w-100"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
style="border-radius: 5px; margin-left: auto; margin-right: 10px;"
|
||||
type="button"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`AuthenticationModal renders as admin verification correctly 1`] = `
|
||||
<body
|
||||
class="modal-open"
|
||||
data-rr-ui-modal-open=""
|
||||
style="padding-right: 1024px;"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="fade modal-backdrop show"
|
||||
/>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="fade modal show"
|
||||
role="dialog"
|
||||
style="display: block; padding-right: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="modal-dialog modal-dialog-centered"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="w-100 d-flex modal-title h4"
|
||||
>
|
||||
<svg
|
||||
class="ml-0 mr-auto"
|
||||
fill="currentColor"
|
||||
height="50"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
version="1.1"
|
||||
viewBox="0 0 17 17"
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g />
|
||||
<path
|
||||
d="M14.811 6.299l0.707-0.707-1.733-1.733 0.757-0.753-0.705-0.709-8.146 8.107c-0.484-0.336-1.070-0.535-1.703-0.535-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3c0-0.661-0.222-1.268-0.585-1.764l5.264-5.238 1.738 1.738 0.707-0.707-1.737-1.736 0.701-0.698 1.735 1.735zM3.987 14.969c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
<h2
|
||||
class="m-auto p-2"
|
||||
style="text-align: center;"
|
||||
>
|
||||
Admin Login
|
||||
</h2>
|
||||
<button
|
||||
class="ml-auto mr-0 btn btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.118.118 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.118.118 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.118.118 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926 224.297 857.629c-.04.041-.06.052-.083.059a.118.118 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.118.118 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512 166.371 224.297c-.041-.04-.052-.06-.059-.083a.118.118 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.118.118 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.118.118 0 0 1 .07 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-body"
|
||||
>
|
||||
<form
|
||||
class="mb-2"
|
||||
>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="password"
|
||||
placeholder="Enter admin password ..."
|
||||
type="password"
|
||||
/>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
>
|
||||
Password is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex mx-auto mb-auto mt-2 w-100"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
style="border-radius: 5px; margin-left: auto; margin-right: 10px;"
|
||||
type="button"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
|
@ -1,445 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`BookModal renders without a book 1`] = `
|
||||
<body
|
||||
class="modal-open"
|
||||
data-rr-ui-modal-open=""
|
||||
style="padding-right: 1024px;"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="fade modal-backdrop show"
|
||||
/>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="fade modal show"
|
||||
role="dialog"
|
||||
style="display: block; padding-right: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="modal-dialog modal-dialog-centered"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="w-100 d-flex modal-title h4"
|
||||
>
|
||||
<svg
|
||||
class="ml-0 mr-auto"
|
||||
fill="currentColor"
|
||||
height="50"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 16"
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14 2v13h-10.5c-0.829 0-1.5-0.672-1.5-1.5s0.671-1.5 1.5-1.5h9.5v-12h-10c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12v-14h-1z"
|
||||
/>
|
||||
<path
|
||||
d="M3.501 13v0c-0 0-0.001 0-0.001 0-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5c0 0 0.001-0 0.001-0v0h9.498v-1h-9.498z"
|
||||
/>
|
||||
</svg>
|
||||
<h2
|
||||
class="m-auto p-2"
|
||||
style="text-align: center;"
|
||||
>
|
||||
Add new Book
|
||||
</h2>
|
||||
<button
|
||||
class="ml-auto mr-0 btn btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.118.118 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.118.118 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.118.118 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926 224.297 857.629c-.04.041-.06.052-.083.059a.118.118 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.118.118 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512 166.371 224.297c-.041-.04-.052-.06-.059-.083a.118.118 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.118.118 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.118.118 0 0 1 .07 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-body"
|
||||
>
|
||||
<form
|
||||
class="mb-2"
|
||||
>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-2"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
ISBN
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex flex-column col"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="isbn"
|
||||
style="border-radius: 5px 0px 0px 5px;"
|
||||
/>
|
||||
<button
|
||||
class="mr-2 pt-0 btn btn-primary"
|
||||
style="border-radius: 0px 5px 5px 0px;"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 16"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.75 9.5c0 1.795 1.455 3.25 3.25 3.25s3.25-1.455 3.25-3.25-1.455-3.25-3.25-3.25-3.25 1.455-3.25 3.25zM15 4h-3.5c-0.25-1-0.5-2-1.5-2h-4c-1 0-1.25 1-1.5 2h-3.5c-0.55 0-1 0.45-1 1v9c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-9c0-0.55-0.45-1-1-1zM8 13.938c-2.451 0-4.438-1.987-4.438-4.438s1.987-4.438 4.438-4.438c2.451 0 4.438 1.987 4.438 4.438s-1.987 4.438-4.438 4.438zM15 7h-2v-1h2v1z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
style="display: none;"
|
||||
>
|
||||
ISBN is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-2"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
Title
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="title"
|
||||
/>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
>
|
||||
Title is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-2"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
Year published
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="published"
|
||||
/>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
>
|
||||
Year published is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-2"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
Shelf
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
>
|
||||
Target shelf is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex mx-auto mb-auto mt-2 w-100"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
style="border-radius: 5px; margin-left: auto; margin-right: 10px;"
|
||||
type="button"
|
||||
>
|
||||
Add Book
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`BookModal sets book as default value 1`] = `
|
||||
<body
|
||||
class="modal-open"
|
||||
data-rr-ui-modal-open=""
|
||||
style="padding-right: 2048px;"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="fade modal-backdrop show"
|
||||
/>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="fade modal show"
|
||||
role="dialog"
|
||||
style="display: block; padding-right: 0px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="modal-dialog modal-dialog-centered"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="w-100 d-flex modal-title h4"
|
||||
>
|
||||
<svg
|
||||
class="ml-0 mr-auto"
|
||||
fill="currentColor"
|
||||
height="50"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 16"
|
||||
width="50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14 2v13h-10.5c-0.829 0-1.5-0.672-1.5-1.5s0.671-1.5 1.5-1.5h9.5v-12h-10c-1.1 0-2 0.9-2 2v12c0 1.1 0.9 2 2 2h12v-14h-1z"
|
||||
/>
|
||||
<path
|
||||
d="M3.501 13v0c-0 0-0.001 0-0.001 0-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5c0 0 0.001-0 0.001-0v0h9.498v-1h-9.498z"
|
||||
/>
|
||||
</svg>
|
||||
<h2
|
||||
class="m-auto p-2"
|
||||
style="text-align: center;"
|
||||
>
|
||||
Edit Book
|
||||
</h2>
|
||||
<button
|
||||
class="ml-auto mr-0 btn btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.118.118 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.118.118 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.118.118 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926 224.297 857.629c-.04.041-.06.052-.083.059a.118.118 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.118.118 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512 166.371 224.297c-.041-.04-.052-.06-.059-.083a.118.118 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.118.118 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.118.118 0 0 1 .07 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-body"
|
||||
>
|
||||
<form
|
||||
class="mb-2"
|
||||
>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-2"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
ISBN
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex flex-column col"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="isbn"
|
||||
style="border-radius: 5px 0px 0px 5px;"
|
||||
/>
|
||||
<button
|
||||
class="mr-2 pt-0 btn btn-primary"
|
||||
style="border-radius: 0px 5px 5px 0px;"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 16"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.75 9.5c0 1.795 1.455 3.25 3.25 3.25s3.25-1.455 3.25-3.25-1.455-3.25-3.25-3.25-3.25 1.455-3.25 3.25zM15 4h-3.5c-0.25-1-0.5-2-1.5-2h-4c-1 0-1.25 1-1.5 2h-3.5c-0.55 0-1 0.45-1 1v9c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-9c0-0.55-0.45-1-1-1zM8 13.938c-2.451 0-4.438-1.987-4.438-4.438s1.987-4.438 4.438-4.438c2.451 0 4.438 1.987 4.438 4.438s-1.987 4.438-4.438 4.438zM15 7h-2v-1h2v1z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
style="display: none;"
|
||||
>
|
||||
ISBN is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-2"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
Title
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="title"
|
||||
/>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-2"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
Year published
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
name="published"
|
||||
/>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mb-2 row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-2"
|
||||
>
|
||||
<label
|
||||
class="form-label"
|
||||
>
|
||||
Shelf
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex mx-auto mb-auto mt-2 w-100"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
style="border-radius: 5px; margin-left: auto; margin-right: 10px;"
|
||||
type="button"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
|
@ -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">;
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
import { QuaggaJSResultObject } from "@ericblade/quagga2";
|
||||
import { getMedianOfCodeErrors } from "../getMedianOfCodeErrors";
|
||||
|
||||
export const createMockQuaggaResult = (
|
||||
decodedCodes: Array<{
|
||||
error?: number;
|
||||
code: number;
|
||||
start: number;
|
||||
end: number;
|
||||
}> = []
|
||||
): QuaggaJSResultObject => ({
|
||||
codeResult: {
|
||||
code: "123456",
|
||||
start: 0,
|
||||
end: 10,
|
||||
codeset: 1,
|
||||
startInfo: {
|
||||
error: 0,
|
||||
code: 1,
|
||||
start: 0,
|
||||
end: 5,
|
||||
},
|
||||
decodedCodes,
|
||||
endInfo: {
|
||||
error: 0,
|
||||
code: 1,
|
||||
start: 5,
|
||||
end: 10,
|
||||
},
|
||||
direction: 1,
|
||||
format: "QR",
|
||||
},
|
||||
barcodes: [],
|
||||
line: [{ x: 0, y: 0 }],
|
||||
angle: 0,
|
||||
pattern: [],
|
||||
box: [],
|
||||
boxes: [],
|
||||
});
|
||||
|
||||
describe("getMedianOfCodeErrors", () => {
|
||||
it("should return the median of code errors when there are valid errors", () => {
|
||||
const result = createMockQuaggaResult([
|
||||
{ error: 1, code: 1, start: 0, end: 5 },
|
||||
{ error: 3, code: 1, start: 5, end: 10 },
|
||||
{ error: 2, code: 1, start: 0, end: 10 },
|
||||
]);
|
||||
|
||||
const median = getMedianOfCodeErrors(result);
|
||||
expect(median).toBe(2); // The median of [1, 3, 2] is 2
|
||||
});
|
||||
|
||||
it("should return undefined when there are no code errors", () => {
|
||||
const result = createMockQuaggaResult([
|
||||
{ code: 1, start: 0, end: 5 }, // No error property
|
||||
{ code: 1, start: 5, end: 10 },
|
||||
]);
|
||||
|
||||
const median = getMedianOfCodeErrors(result);
|
||||
expect(median).toBeUndefined();
|
||||
});
|
||||
|
||||
it("should handle an empty decodedCodes array", () => {
|
||||
const result = createMockQuaggaResult([]);
|
||||
|
||||
const median = getMedianOfCodeErrors(result);
|
||||
expect(median).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
import React from "react";
|
||||
import { render, waitFor, cleanup } from "@testing-library/react";
|
||||
import { AuthContext } from "../../../App";
|
||||
import { useAuth } from "../useAuthentication";
|
||||
|
||||
const MockedComponent: React.FC = () => {
|
||||
const { authenticated } = useAuth();
|
||||
return <div>{authenticated}</div>;
|
||||
};
|
||||
|
||||
let authenticated = false;
|
||||
const setAuthenticated = (args: boolean) => (authenticated = args);
|
||||
|
||||
describe("useAuth", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
cleanup();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("should set authenticated to true when fetch returns ok", async () => {
|
||||
global.fetch = jest.fn(() => Promise.resolve({ ok: true })) as jest.Mock;
|
||||
|
||||
render(
|
||||
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
|
||||
<MockedComponent />
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
|
||||
await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
|
||||
|
||||
expect(authenticated).toBe(true);
|
||||
});
|
||||
|
||||
it("should set authenticated to false when fetch returns not ok", async () => {
|
||||
global.fetch = jest.fn(() => Promise.resolve({ ok: false })) as jest.Mock;
|
||||
|
||||
render(
|
||||
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
|
||||
<MockedComponent />
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
|
||||
await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
|
||||
|
||||
expect(authenticated).toBe(false);
|
||||
});
|
||||
|
||||
it("should call fetch once", async () => {
|
||||
global.fetch = jest.fn(() => Promise.resolve({ ok: false })) as jest.Mock;
|
||||
|
||||
render(
|
||||
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
|
||||
<MockedComponent />
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(fetch).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import Quagga, { QuaggaJSResultObject } from "@ericblade/quagga2";
|
||||
|
||||
export const drawQuaggaProcessing = (result: QuaggaJSResultObject) => {
|
||||
const drawingCtx = Quagga.canvas.ctx.overlay;
|
||||
const drawingCanvas = Quagga.canvas.dom.overlay;
|
||||
drawingCtx.font = "24px Arial";
|
||||
drawingCtx.fillStyle = "green";
|
||||
const width = drawingCanvas.getAttribute("width");
|
||||
const height = drawingCanvas.getAttribute("height");
|
||||
|
||||
if (result) {
|
||||
if (result.boxes && width && height) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(width), parseInt(height));
|
||||
result.boxes
|
||||
.filter((box) => box !== result.box)
|
||||
.forEach((box) => {
|
||||
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
|
||||
color: "purple",
|
||||
lineWidth: 2,
|
||||
});
|
||||
});
|
||||
}
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
|
||||
color: "blue",
|
||||
lineWidth: 2,
|
||||
});
|
||||
}
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
drawingCtx.font = "24px Arial";
|
||||
drawingCtx.fillText(result.codeResult.code, 10, 20);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { QuaggaJSResultObject } from "@ericblade/quagga2";
|
||||
|
||||
export const getMedianOfCodeErrors = (result: QuaggaJSResultObject) => {
|
||||
const errors = result.codeResult.decodedCodes.flatMap((x) => x.error);
|
||||
const medianOfErrors = getMedian(errors);
|
||||
return medianOfErrors;
|
||||
};
|
||||
|
||||
export const getMedian = (arr: (number | undefined)[]) => {
|
||||
const newArr = [...arr].filter((x) => typeof x !== "undefined");
|
||||
if (!newArr.length) {
|
||||
return;
|
||||
}
|
||||
newArr.sort((a, b) => a! - b!);
|
||||
const half = Math.floor(newArr.length / 2);
|
||||
if (newArr.length % 2 === 1) {
|
||||
return newArr[half];
|
||||
}
|
||||
return (newArr[half - 1]! + newArr[half]!) / 2;
|
||||
};
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import { useCallback, useContext, useEffect } from "react";
|
||||
import { useCallback, useContext } from "react";
|
||||
import { AuthContext } from "../../App";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
type UseAuthHook = { authenticated: boolean };
|
||||
|
||||
export const useAuth = (): UseAuthHook => {
|
||||
const { authenticated, setAuthenticated } = useContext(AuthContext);
|
||||
const auth = useContext(AuthContext);
|
||||
|
||||
const authenticationCheck = useCallback(
|
||||
async () =>
|
||||
|
|
@ -15,14 +16,17 @@ export const useAuth = (): UseAuthHook => {
|
|||
"Content-Type": "application/json",
|
||||
},
|
||||
}).then((res) => {
|
||||
setAuthenticated?.(res.ok);
|
||||
auth.setAuthenticated?.(res.ok);
|
||||
//react-query can't handle undefined without throwing a warning ...
|
||||
return null;
|
||||
}),
|
||||
[setAuthenticated]
|
||||
[auth]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
authenticationCheck();
|
||||
}, [authenticationCheck]);
|
||||
useQuery({
|
||||
queryFn: authenticationCheck,
|
||||
queryKey: ["auth"],
|
||||
});
|
||||
|
||||
return { authenticated };
|
||||
return auth;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ import Quagga, {
|
|||
QuaggaJSResultObject,
|
||||
} from "@ericblade/quagga2";
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { getMedianOfCodeErrors } from "./getMedianOfCodeErrors";
|
||||
import { drawQuaggaProcessing } from "./drawQuaggaProcessing";
|
||||
|
||||
const constraints = {
|
||||
width: 640,
|
||||
|
|
@ -31,6 +29,28 @@ export const useScanner = ({
|
|||
|
||||
const [scannerRef, setScannerRef] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
const getMedian = useCallback((arr: (number | undefined)[]) => {
|
||||
const newArr = [...arr].filter((x) => typeof x !== "undefined");
|
||||
if (!newArr.length) {
|
||||
return;
|
||||
}
|
||||
newArr.sort((a, b) => a! - b!);
|
||||
const half = Math.floor(newArr.length / 2);
|
||||
if (newArr.length % 2 === 1) {
|
||||
return newArr[half];
|
||||
}
|
||||
return (newArr[half - 1]! + newArr[half]!) / 2;
|
||||
}, []);
|
||||
|
||||
const getMedianOfCodeErrors = useCallback(
|
||||
(result: QuaggaJSResultObject) => {
|
||||
const errors = result.codeResult.decodedCodes.flatMap((x) => x.error);
|
||||
const medianOfErrors = getMedian(errors);
|
||||
return medianOfErrors;
|
||||
},
|
||||
[getMedian]
|
||||
);
|
||||
|
||||
const errorCheck = useCallback(
|
||||
(result: QuaggaJSResultObject) => {
|
||||
if (!onDetected) {
|
||||
|
|
@ -46,29 +66,52 @@ export const useScanner = ({
|
|||
onDetected(result.codeResult.code);
|
||||
}
|
||||
},
|
||||
[onDetected]
|
||||
[getMedianOfCodeErrors, onDetected]
|
||||
);
|
||||
|
||||
const getCameraId = useCallback(async () => {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { facingMode: "environment" },
|
||||
});
|
||||
const handleProcessed = (result: QuaggaJSResultObject) => {
|
||||
const drawingCtx = Quagga.canvas.ctx.overlay;
|
||||
const drawingCanvas = Quagga.canvas.dom.overlay;
|
||||
drawingCtx.font = "24px Arial";
|
||||
drawingCtx.fillStyle = "green";
|
||||
const width = drawingCanvas.getAttribute("width");
|
||||
const height = drawingCanvas.getAttribute("height");
|
||||
|
||||
if (
|
||||
stream &&
|
||||
stream.getVideoTracks().length &&
|
||||
stream.getVideoTracks()[0].getSettings().deviceId
|
||||
) {
|
||||
return stream.getVideoTracks()[0].getSettings().deviceId;
|
||||
if (result) {
|
||||
if (result.boxes && width && height) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(width), parseInt(height));
|
||||
result.boxes
|
||||
.filter((box) => box !== result.box)
|
||||
.forEach((box) => {
|
||||
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
|
||||
color: "purple",
|
||||
lineWidth: 2,
|
||||
});
|
||||
});
|
||||
}
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
|
||||
color: "blue",
|
||||
lineWidth: 2,
|
||||
});
|
||||
}
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
drawingCtx.font = "24px Arial";
|
||||
drawingCtx.fillText(result.codeResult.code, 10, 20);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getCameraId = useCallback(async () => {
|
||||
await navigator.mediaDevices.getUserMedia({
|
||||
video: true,
|
||||
});
|
||||
|
||||
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;
|
||||
}, []);
|
||||
|
|
@ -97,7 +140,7 @@ export const useScanner = ({
|
|||
locate: true,
|
||||
},
|
||||
async (err) => {
|
||||
Quagga.onProcessed(drawQuaggaProcessing);
|
||||
Quagga.onProcessed(handleProcessed);
|
||||
|
||||
if (err) {
|
||||
return console.error("Error starting Quagga:", err);
|
||||
|
|
@ -117,7 +160,7 @@ export const useScanner = ({
|
|||
await Quagga.CameraAccess.release();
|
||||
await Quagga.stop();
|
||||
Quagga.offDetected(errorCheck);
|
||||
Quagga.offProcessed(drawQuaggaProcessing);
|
||||
Quagga.offProcessed(handleProcessed);
|
||||
}, [errorCheck]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
export const bookShelfs = {
|
||||
available: "AVAILABLE",
|
||||
fnord1: "FNORD1",
|
||||
fnord2: "FNORD2",
|
||||
sharing: "SHARING",
|
||||
} as const;
|
||||
|
||||
export type Shelf = (typeof bookShelfs)[keyof typeof bookShelfs];
|
||||
|
||||
export type Book = {
|
||||
id: number;
|
||||
uuid: string;
|
||||
|
|
@ -7,5 +16,5 @@ export type Book = {
|
|||
lastCheckoutDate: number | null;
|
||||
checkoutBy: string | null;
|
||||
contact: string | null;
|
||||
shelf: string | null;
|
||||
shelf: Shelf | null;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -12,7 +12,6 @@ import {
|
|||
deleteBook,
|
||||
editBook,
|
||||
returnBook,
|
||||
listShelves,
|
||||
} from "./queries";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import path from "path";
|
||||
|
|
@ -20,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();
|
||||
|
||||
|
|
@ -201,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 (
|
||||
|
|
@ -257,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);
|
||||
|
|
@ -371,24 +344,6 @@ app.get(
|
|||
}
|
||||
);
|
||||
|
||||
app.get(
|
||||
"/api/shelves/list",
|
||||
async (
|
||||
req: Request<undefined, undefined, null>,
|
||||
res: Response<string[] | string>
|
||||
) => {
|
||||
try {
|
||||
const conn = await pool.getConnection();
|
||||
const books = await conn.query<Book[]>(listShelves);
|
||||
const shelves = books.map((e) => (!e.shelf ? "AVAILABLE" : e.shelf));
|
||||
await conn.end();
|
||||
res.status(200).send(shelves);
|
||||
} catch (error) {
|
||||
res.status(500).send("Internal Server Error: " + error);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
app.post(
|
||||
"/api/books/return",
|
||||
async (
|
||||
|
|
|
|||
|
|
@ -6,4 +6,3 @@ export { findBook } from "./findBook";
|
|||
export { createBook } from "./createBook";
|
||||
export { deleteBook } from "./deleteBook";
|
||||
export { editBook } from "./editBook";
|
||||
export { listShelves } from "./listShelves";
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export const listShelves = `SELECT DISTINCT shelf FROM bookData;`;
|
||||
|
|
@ -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(
|
||||
"', '"
|
||||
)}');`;
|
||||
|
|
@ -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"][];
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue