diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index adc101a..8d8e988 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,7 @@
"version": "0.1.0",
"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",
@@ -22,7 +22,6 @@
"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",
@@ -3728,9 +3727,9 @@
}
},
"node_modules/@tanstack/query-core": {
- "version": "5.59.13",
- "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.13.tgz",
- "integrity": "sha512-Oou0bBu/P8+oYjXsJQ11j+gcpLAMpqW42UlokQYEz4dE7+hOtVO9rVuolJKgEccqzvyFzqX4/zZWY+R/v1wVsQ==",
+ "version": "5.56.2",
+ "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz",
+ "integrity": "sha512-gor0RI3/R5rVV3gXfddh1MM+hgl0Z4G7tj6Xxpq6p2I03NGPaJ8dITY9Gz05zYYb/EJq9vPas/T4wn9EaDPd4Q==",
"license": "MIT",
"funding": {
"type": "github",
@@ -3738,12 +3737,12 @@
}
},
"node_modules/@tanstack/react-query": {
- "version": "5.59.15",
- "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.15.tgz",
- "integrity": "sha512-QbVlAkTI78wB4Mqgf2RDmgC0AOiJqer2c5k9STOOSXGv1S6ZkY37r/6UpE8DbQ2Du0ohsdoXgFNEyv+4eDoPEw==",
+ "version": "5.56.2",
+ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.56.2.tgz",
+ "integrity": "sha512-SR0GzHVo6yzhN72pnRhkEFRAHMsUo5ZPzAxfTMvUxFIDVS6W9LYUp6nXW3fcHVdg0ZJl8opSH85jqahvm6DSVg==",
"license": "MIT",
"dependencies": {
- "@tanstack/query-core": "5.59.13"
+ "@tanstack/query-core": "5.56.2"
},
"funding": {
"type": "github",
@@ -6656,12 +6655,6 @@
"node": ">=4"
}
},
- "node_modules/cssfontparser": {
- "version": "1.2.1",
- "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
- "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==",
- "license": "MIT"
- },
"node_modules/cssnano": {
"version": "5.1.15",
"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
@@ -10617,16 +10610,6 @@
}
}
},
- "node_modules/jest-canvas-mock": {
- "version": "2.5.2",
- "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz",
- "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==",
- "license": "MIT",
- "dependencies": {
- "cssfontparser": "^1.2.1",
- "moo-color": "^1.0.2"
- }
- },
"node_modules/jest-changed-files": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
@@ -12164,15 +12147,6 @@
"mkdirp": "bin/cmd.js"
}
},
- "node_modules/moo-color": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz",
- "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==",
- "license": "MIT",
- "dependencies": {
- "color-name": "^1.1.4"
- }
- },
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c201ae0..c1ddcba 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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",
@@ -18,7 +18,6 @@
"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 +31,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": {
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
new file mode 100644
index 0000000..2a68616
--- /dev/null
+++ b/frontend/src/App.test.tsx
@@ -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();
+});
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 20e1772..cb17589 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -50,7 +50,7 @@ function App() {
height: "100vh",
width: "100vw",
fontFamily: "New Amsterdam",
- overflow: "hidden",
+ overflow: "scroll",
}}
>
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 898d521..d5518dc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -19,7 +19,7 @@ body {
.btn-primary {
background-color: #5e6268;
color: #f2f3f4;
- border: 1px solid #5e6268;
+ border: 2px solid #5e6268;
}
form-control {
@@ -91,16 +91,6 @@ body {
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;
}
@@ -133,7 +123,7 @@ body {
.btn-primary {
background-color: #f2f3f4;
color: #5e6268;
- border-left: 1px solid #5e6268;
+ border: 2px solid #5e6268;
}
.form-control {
@@ -160,18 +150,17 @@ body {
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 {
+ table {
+ tbody > td > div {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+ "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+ "Helvetica Neue", sans-serif !important;
+ }
letter-spacing: 0.25em;
}
@@ -189,16 +178,6 @@ body {
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 {
diff --git a/frontend/src/pages/Library/Library.tsx b/frontend/src/pages/Library/Library.tsx
index 76f5101..0aaaae8 100644
--- a/frontend/src/pages/Library/Library.tsx
+++ b/frontend/src/pages/Library/Library.tsx
@@ -232,7 +232,7 @@ export const Library = (): React.JSX.Element => {
<div
style={{
maxWidth: "100%",
- maxHeight: "80vh",
+ maxHeight: "70vh",
overflow: "auto",
marginBottom: "5px",
}}
diff --git a/frontend/src/pages/Library/components/Pagination.tsx b/frontend/src/pages/Library/components/Pagination.tsx
index 240f3c2..ee7b531 100644
--- a/frontend/src/pages/Library/components/Pagination.tsx
+++ b/frontend/src/pages/Library/components/Pagination.tsx
@@ -1,7 +1,6 @@
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,
@@ -12,8 +11,6 @@ export const Pagination = ({
getPageCount: () => number;
setPageIndex: (index: number) => void;
}): React.JSX.Element => {
- const { authenticated } = useAuth();
-
const getPage = useCallback(
(n: number) => (
<BP.Item
@@ -32,7 +29,7 @@ export const Pagination = ({
className='d-flex'
style={{
marginLeft: "auto",
- marginRight: authenticated ? "10px" : "auto",
+ marginRight: "10px",
}}
>
<BP.Item
diff --git a/frontend/src/pages/Main/utils/__tests__/tryDeutscheNationalBibliothekApi.test.ts b/frontend/src/pages/Main/utils/__tests__/tryDeutscheNationalBibliothekApi.test.ts
deleted file mode 100644
index 808657e..0000000
--- a/frontend/src/pages/Main/utils/__tests__/tryDeutscheNationalBibliothekApi.test.ts
+++ /dev/null
@@ -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();
- });
-});
diff --git a/frontend/src/pages/Main/utils/__tests__/tryGoogleBooksApi.test.ts b/frontend/src/pages/Main/utils/__tests__/tryGoogleBooksApi.test.ts
deleted file mode 100644
index 5e93a95..0000000
--- a/frontend/src/pages/Main/utils/__tests__/tryGoogleBooksApi.test.ts
+++ /dev/null
@@ -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();
- });
-});
diff --git a/frontend/src/shared/components/modals/BookModal.tsx b/frontend/src/shared/components/modals/BookModal.tsx
index 0c7ced6..8ae20ce 100644
--- a/frontend/src/shared/components/modals/BookModal.tsx
+++ b/frontend/src/shared/components/modals/BookModal.tsx
@@ -1,14 +1,13 @@
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 { 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 +19,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",
@@ -98,7 +84,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),
@@ -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>
diff --git a/frontend/src/shared/components/modals/MoveShelfModal.tsx b/frontend/src/shared/components/modals/MoveShelfModal.tsx
index fe58fbe..133c94a 100644
--- a/frontend/src/shared/components/modals/MoveShelfModal.tsx
+++ b/frontend/src/shared/components/modals/MoveShelfModal.tsx
@@ -1,10 +1,10 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
-import { ImBook, ImCancelCircle } from "react-icons/im";
+import { ImBook } from "react-icons/im";
import { ModalHeader } from "./ModalHeader";
import { MoveShelfAction, MoveShelfModalProps } from "./types";
import { useForm, useWatch } from "react-hook-form";
-import { useState } from "react";
+import { bookShelfs } from "../../../types/Book";
export const MoveShelfModal = ({
books,
@@ -20,7 +20,7 @@ export const MoveShelfModal = ({
const { mutate: mv } = useMutation({
mutationFn: async () => {
if (!values.target) {
- setError("target", { message: "Target shelf is required" });
+ setError("target", { message: "Taget shelf is required" });
return;
}
@@ -35,19 +35,6 @@ export const MoveShelfModal = ({
},
});
- 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
@@ -61,50 +48,23 @@ export const MoveShelfModal = ({
}}
>
<Form.Group as={Row} className='mb-2'>
- <Col className='d-flex' sm='2'>
- <Form.Label className='m-auto'>Shelf</Form.Label>
+ <Col sm='2'>
+ <Form.Label>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}
+ <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]}
>
- {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.target
? "Target shelf is required"
diff --git a/frontend/src/shared/components/modals/__tests__/AuthenticationModal.test.tsx b/frontend/src/shared/components/modals/__tests__/AuthenticationModal.test.tsx
deleted file mode 100644
index ad856f6..0000000
--- a/frontend/src/shared/components/modals/__tests__/AuthenticationModal.test.tsx
+++ /dev/null
@@ -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();
- });
-});
diff --git a/frontend/src/shared/components/modals/__tests__/BookModal.test.tsx b/frontend/src/shared/components/modals/__tests__/BookModal.test.tsx
deleted file mode 100644
index b6d8c2c..0000000
--- a/frontend/src/shared/components/modals/__tests__/BookModal.test.tsx
+++ /dev/null
@@ -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();
- });
-});
diff --git a/frontend/src/shared/components/modals/__tests__/__snapshots__/AuthenticationModal.test.tsx.snap b/frontend/src/shared/components/modals/__tests__/__snapshots__/AuthenticationModal.test.tsx.snap
deleted file mode 100644
index cb78b1d..0000000
--- a/frontend/src/shared/components/modals/__tests__/__snapshots__/AuthenticationModal.test.tsx.snap
+++ /dev/null
@@ -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>
-`;
diff --git a/frontend/src/shared/components/modals/__tests__/__snapshots__/BookModal.test.tsx.snap b/frontend/src/shared/components/modals/__tests__/__snapshots__/BookModal.test.tsx.snap
deleted file mode 100644
index a3862dd..0000000
--- a/frontend/src/shared/components/modals/__tests__/__snapshots__/BookModal.test.tsx.snap
+++ /dev/null
@@ -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>
-`;
diff --git a/frontend/src/shared/utils/__tests__/getMedianOfCodeErrors.test.ts b/frontend/src/shared/utils/__tests__/getMedianOfCodeErrors.test.ts
deleted file mode 100644
index 8411e00..0000000
--- a/frontend/src/shared/utils/__tests__/getMedianOfCodeErrors.test.ts
+++ /dev/null
@@ -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();
- });
-});
diff --git a/frontend/src/shared/utils/__tests__/useAuthentication.test.tsx b/frontend/src/shared/utils/__tests__/useAuthentication.test.tsx
deleted file mode 100644
index 0f85e3e..0000000
--- a/frontend/src/shared/utils/__tests__/useAuthentication.test.tsx
+++ /dev/null
@@ -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);
- });
- });
-});
diff --git a/frontend/src/shared/utils/drawQuaggaProcessing.ts b/frontend/src/shared/utils/drawQuaggaProcessing.ts
deleted file mode 100644
index 6185a7b..0000000
--- a/frontend/src/shared/utils/drawQuaggaProcessing.ts
+++ /dev/null
@@ -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);
- }
- }
-};
diff --git a/frontend/src/shared/utils/getMedianOfCodeErrors.ts b/frontend/src/shared/utils/getMedianOfCodeErrors.ts
deleted file mode 100644
index e43e0ca..0000000
--- a/frontend/src/shared/utils/getMedianOfCodeErrors.ts
+++ /dev/null
@@ -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;
-};
diff --git a/frontend/src/shared/utils/useAuthentication.ts b/frontend/src/shared/utils/useAuthentication.ts
index 3d6e203..b3d5c36 100644
--- a/frontend/src/shared/utils/useAuthentication.ts
+++ b/frontend/src/shared/utils/useAuthentication.ts
@@ -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;
};
diff --git a/frontend/src/shared/utils/useScanner.ts b/frontend/src/shared/utils/useScanner.ts
index 44aa7ee..70666b2 100644
--- a/frontend/src/shared/utils/useScanner.ts
+++ b/frontend/src/shared/utils/useScanner.ts
@@ -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,9 +66,42 @@ export const useScanner = ({
onDetected(result.codeResult.code);
}
},
- [onDetected]
+ [getMedianOfCodeErrors, onDetected]
);
+ 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 (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 () => {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" },
@@ -97,7 +150,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 +170,7 @@ export const useScanner = ({
await Quagga.CameraAccess.release();
await Quagga.stop();
Quagga.offDetected(errorCheck);
- Quagga.offProcessed(drawQuaggaProcessing);
+ Quagga.offProcessed(handleProcessed);
}, [errorCheck]);
useEffect(() => {
diff --git a/frontend/src/types/Book.ts b/frontend/src/types/Book.ts
index dc0e488..393a1df 100644
--- a/frontend/src/types/Book.ts
+++ b/frontend/src/types/Book.ts
@@ -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;
};
diff --git a/middleware/index.ts b/middleware/index.ts
index e87c4a7..2b3ab01 100644
--- a/middleware/index.ts
+++ b/middleware/index.ts
@@ -12,7 +12,6 @@ import {
deleteBook,
editBook,
returnBook,
- listShelves,
} from "./queries";
import { v4 as uuidv4 } from "uuid";
import path from "path";
@@ -371,24 +370,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 (
diff --git a/middleware/queries/index.ts b/middleware/queries/index.ts
index c52e1a2..94863aa 100644
--- a/middleware/queries/index.ts
+++ b/middleware/queries/index.ts
@@ -6,4 +6,3 @@ export { findBook } from "./findBook";
export { createBook } from "./createBook";
export { deleteBook } from "./deleteBook";
export { editBook } from "./editBook";
-export { listShelves } from "./listShelves";
diff --git a/middleware/queries/listShelves.ts b/middleware/queries/listShelves.ts
deleted file mode 100644
index f4adf50..0000000
--- a/middleware/queries/listShelves.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const listShelves = `SELECT DISTINCT shelf FROM bookData;`;