Merge pull request 'move-all-books-from-shelf' (#15) from move-all-books-from-shelf into main
Reviewed-on: #15
This commit is contained in:
commit
209da6f8e7
24 changed files with 1293 additions and 135 deletions
42
frontend/package-lock.json
generated
42
frontend/package-lock.json
generated
|
@ -9,7 +9,7 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ericblade/quagga2": "^1.8.4",
|
"@ericblade/quagga2": "^1.8.4",
|
||||||
"@tanstack/react-query": "^5.52.1",
|
"@tanstack/react-query": "^5.59.15",
|
||||||
"@tanstack/react-table": "^8.20.5",
|
"@tanstack/react-table": "^8.20.5",
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
|
@ -22,6 +22,7 @@
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
"fast-xml-parser": "^4.5.0",
|
"fast-xml-parser": "^4.5.0",
|
||||||
"history": "^5.3.0",
|
"history": "^5.3.0",
|
||||||
|
"jest-canvas-mock": "^2.5.2",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-bootstrap": "^2.10.4",
|
"react-bootstrap": "^2.10.4",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
|
@ -3727,9 +3728,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tanstack/query-core": {
|
"node_modules/@tanstack/query-core": {
|
||||||
"version": "5.56.2",
|
"version": "5.59.13",
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz",
|
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.13.tgz",
|
||||||
"integrity": "sha512-gor0RI3/R5rVV3gXfddh1MM+hgl0Z4G7tj6Xxpq6p2I03NGPaJ8dITY9Gz05zYYb/EJq9vPas/T4wn9EaDPd4Q==",
|
"integrity": "sha512-Oou0bBu/P8+oYjXsJQ11j+gcpLAMpqW42UlokQYEz4dE7+hOtVO9rVuolJKgEccqzvyFzqX4/zZWY+R/v1wVsQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "github",
|
"type": "github",
|
||||||
|
@ -3737,12 +3738,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tanstack/react-query": {
|
"node_modules/@tanstack/react-query": {
|
||||||
"version": "5.56.2",
|
"version": "5.59.15",
|
||||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.56.2.tgz",
|
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.15.tgz",
|
||||||
"integrity": "sha512-SR0GzHVo6yzhN72pnRhkEFRAHMsUo5ZPzAxfTMvUxFIDVS6W9LYUp6nXW3fcHVdg0ZJl8opSH85jqahvm6DSVg==",
|
"integrity": "sha512-QbVlAkTI78wB4Mqgf2RDmgC0AOiJqer2c5k9STOOSXGv1S6ZkY37r/6UpE8DbQ2Du0ohsdoXgFNEyv+4eDoPEw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tanstack/query-core": "5.56.2"
|
"@tanstack/query-core": "5.59.13"
|
||||||
},
|
},
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "github",
|
"type": "github",
|
||||||
|
@ -6655,6 +6656,12 @@
|
||||||
"node": ">=4"
|
"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": {
|
"node_modules/cssnano": {
|
||||||
"version": "5.1.15",
|
"version": "5.1.15",
|
||||||
"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
|
"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
|
||||||
|
@ -10610,6 +10617,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"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": {
|
"node_modules/jest-changed-files": {
|
||||||
"version": "27.5.1",
|
"version": "27.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
|
||||||
|
@ -12147,6 +12164,15 @@
|
||||||
"mkdirp": "bin/cmd.js"
|
"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": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
"proxy": "http://localhost:3001",
|
"proxy": "http://localhost:3001",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ericblade/quagga2": "^1.8.4",
|
"@ericblade/quagga2": "^1.8.4",
|
||||||
"@tanstack/react-query": "^5.52.1",
|
"@tanstack/react-query": "^5.59.15",
|
||||||
"@tanstack/react-table": "^8.20.5",
|
"@tanstack/react-table": "^8.20.5",
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
|
@ -18,6 +18,7 @@
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
"fast-xml-parser": "^4.5.0",
|
"fast-xml-parser": "^4.5.0",
|
||||||
"history": "^5.3.0",
|
"history": "^5.3.0",
|
||||||
|
"jest-canvas-mock": "^2.5.2",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-bootstrap": "^2.10.4",
|
"react-bootstrap": "^2.10.4",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
|
@ -31,7 +32,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test --testPathPattern='(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$'",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
|
|
|
@ -1,9 +0,0 @@
|
||||||
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();
|
|
||||||
});
|
|
|
@ -50,7 +50,7 @@ function App() {
|
||||||
height: "100vh",
|
height: "100vh",
|
||||||
width: "100vw",
|
width: "100vw",
|
||||||
fontFamily: "New Amsterdam",
|
fontFamily: "New Amsterdam",
|
||||||
overflow: "scroll",
|
overflow: "hidden",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
|
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>
|
||||||
|
|
|
@ -19,7 +19,7 @@ body {
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background-color: #5e6268;
|
background-color: #5e6268;
|
||||||
color: #f2f3f4;
|
color: #f2f3f4;
|
||||||
border: 2px solid #5e6268;
|
border: 1px solid #5e6268;
|
||||||
}
|
}
|
||||||
|
|
||||||
form-control {
|
form-control {
|
||||||
|
@ -91,6 +91,16 @@ body {
|
||||||
border: 2px solid #f2f2e8;
|
border: 2px solid #f2f2e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
background-color: #f2f2e8 !important;
|
||||||
|
color: #5e6268 !important;
|
||||||
|
border: 2px solid #f2f2e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
color: #5e6268 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.danger {
|
.danger {
|
||||||
background-color: #f9a9ab !important;
|
background-color: #f9a9ab !important;
|
||||||
}
|
}
|
||||||
|
@ -123,7 +133,7 @@ body {
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background-color: #f2f3f4;
|
background-color: #f2f3f4;
|
||||||
color: #5e6268;
|
color: #5e6268;
|
||||||
border: 2px solid #5e6268;
|
border-left: 1px solid #5e6268;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
|
@ -179,6 +189,16 @@ body {
|
||||||
border: 2px solid #5e6268;
|
border: 2px solid #5e6268;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
background-color: #f2f2e8 !important;
|
||||||
|
color: #5e6268 !important;
|
||||||
|
border: 2px solid #f2f2e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
color: #f2f2e8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-item {
|
.dropdown-item {
|
||||||
color: #f2f2e8 !important;
|
color: #f2f2e8 !important;
|
||||||
svg {
|
svg {
|
||||||
|
|
|
@ -232,7 +232,7 @@ export const Library = (): React.JSX.Element => {
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
maxHeight: "70vh",
|
maxHeight: "80vh",
|
||||||
overflow: "auto",
|
overflow: "auto",
|
||||||
marginBottom: "5px",
|
marginBottom: "5px",
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -0,0 +1,72 @@
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,33 @@
|
||||||
|
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,13 +1,14 @@
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
|
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
|
||||||
import { ImBook, ImCamera } from "react-icons/im";
|
import { ImBook, ImCamera, ImCancelCircle } from "react-icons/im";
|
||||||
import { ModalHeader } from "./ModalHeader";
|
import { ModalHeader } from "./ModalHeader";
|
||||||
import { useForm, useWatch } from "react-hook-form";
|
import { useForm, useWatch } from "react-hook-form";
|
||||||
import { Book, bookShelfs } from "../../../types/Book";
|
import { Book } from "../../../types/Book";
|
||||||
import { useScanner } from "../../utils/useScanner";
|
import { useScanner } from "../../utils/useScanner";
|
||||||
import { BookModalProps } from "./types";
|
import { BookModalProps } from "./types";
|
||||||
import { tryGoogleBooksApi } from "../../../pages/Main/utils/tryGoogleBooksApi";
|
import { tryGoogleBooksApi } from "../../../pages/Main/utils/tryGoogleBooksApi";
|
||||||
import { tryDeutscheNationalBibliothekApi } from "../../../pages/Main/utils/tryDeutscheNationalBibliothekApi";
|
import { tryDeutscheNationalBibliothekApi } from "../../../pages/Main/utils/tryDeutscheNationalBibliothekApi";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
|
||||||
type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
|
type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
|
||||||
|
|
||||||
|
@ -19,6 +20,19 @@ export const BookModal = ({
|
||||||
const isEdit = !!book;
|
const isEdit = !!book;
|
||||||
const [showScanner, setShowScanner] = useState(false);
|
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 } =
|
const { control, register, formState, setError, setValue, reset } =
|
||||||
useForm<BookForm>({
|
useForm<BookForm>({
|
||||||
mode: "onChange",
|
mode: "onChange",
|
||||||
|
@ -84,7 +98,7 @@ export const BookModal = ({
|
||||||
}
|
}
|
||||||
if (error) return;
|
if (error) return;
|
||||||
const createdBook = await fetch(
|
const createdBook = await fetch(
|
||||||
isEdit ? "api/books/edit" : "/api/books/create",
|
isEdit ? "/api/books/edit" : "/api/books/create",
|
||||||
{
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify(data),
|
body: JSON.stringify(data),
|
||||||
|
@ -213,22 +227,52 @@ export const BookModal = ({
|
||||||
<Form.Label>Shelf</Form.Label>
|
<Form.Label>Shelf</Form.Label>
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Form.Select
|
{!isLoading &&
|
||||||
{...register("shelf", { required: true })}
|
(addNew ? (
|
||||||
isInvalid={!!formState.errors.shelf}
|
<div className='d-flex'>
|
||||||
>
|
<Form.Control
|
||||||
{Object.keys(bookShelfs).map((key) => (
|
id='move-shelf-text-input'
|
||||||
<option
|
{...register("shelf", { required: true })}
|
||||||
key='key'
|
style={{
|
||||||
value={bookShelfs[key as keyof typeof bookShelfs]}
|
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}
|
||||||
>
|
>
|
||||||
{key}
|
{shelves?.map((shelf) => (
|
||||||
</option>
|
<option key='key' value={shelf}>
|
||||||
|
{shelf}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
<option value='addNew'>Add new</option>
|
||||||
|
</Form.Select>
|
||||||
))}
|
))}
|
||||||
</Form.Select>
|
|
||||||
<Form.Control.Feedback type='invalid'>
|
<Form.Control.Feedback type='invalid'>
|
||||||
{!values.shelf
|
{!values.shelf
|
||||||
? "Shelf is required"
|
? "Target shelf is required"
|
||||||
: formState.errors.shelf?.message}
|
: formState.errors.shelf?.message}
|
||||||
</Form.Control.Feedback>
|
</Form.Control.Feedback>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import { useMutation } from "@tanstack/react-query";
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||||
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
|
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
|
||||||
import { ImBook } from "react-icons/im";
|
import { ImBook, ImCancelCircle } from "react-icons/im";
|
||||||
import { ModalHeader } from "./ModalHeader";
|
import { ModalHeader } from "./ModalHeader";
|
||||||
import { MoveShelfAction, MoveShelfModalProps } from "./types";
|
import { MoveShelfAction, MoveShelfModalProps } from "./types";
|
||||||
import { useForm, useWatch } from "react-hook-form";
|
import { useForm, useWatch } from "react-hook-form";
|
||||||
import { bookShelfs } from "../../../types/Book";
|
import { useState } from "react";
|
||||||
|
|
||||||
export const MoveShelfModal = ({
|
export const MoveShelfModal = ({
|
||||||
books,
|
books,
|
||||||
|
@ -20,7 +20,7 @@ export const MoveShelfModal = ({
|
||||||
const { mutate: mv } = useMutation({
|
const { mutate: mv } = useMutation({
|
||||||
mutationFn: async () => {
|
mutationFn: async () => {
|
||||||
if (!values.target) {
|
if (!values.target) {
|
||||||
setError("target", { message: "Taget shelf is required" });
|
setError("target", { message: "Target shelf is required" });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,6 +35,19 @@ 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 (
|
return (
|
||||||
<Modal show={open} onHide={onClose} centered>
|
<Modal show={open} onHide={onClose} centered>
|
||||||
<ModalHeader
|
<ModalHeader
|
||||||
|
@ -48,23 +61,50 @@ export const MoveShelfModal = ({
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Form.Group as={Row} className='mb-2'>
|
<Form.Group as={Row} className='mb-2'>
|
||||||
<Col sm='2'>
|
<Col className='d-flex' sm='2'>
|
||||||
<Form.Label>Shelf</Form.Label>
|
<Form.Label className='m-auto'>Shelf</Form.Label>
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Form.Select
|
{!isLoading &&
|
||||||
{...register("target", { required: true })}
|
(addNew ? (
|
||||||
isInvalid={!!formState.errors.target}
|
<div className='d-flex'>
|
||||||
>
|
<Form.Control
|
||||||
{Object.keys(bookShelfs).map((key) => (
|
id='move-shelf-text-input'
|
||||||
<option
|
{...register("target", { required: true })}
|
||||||
key='key'
|
/>
|
||||||
value={bookShelfs[key as keyof typeof bookShelfs]}
|
<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}
|
||||||
>
|
>
|
||||||
{key}
|
{shelves?.map((shelf) => (
|
||||||
</option>
|
<option key='key' value={shelf}>
|
||||||
|
{shelf}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
<option value='addNew'>Add new</option>
|
||||||
|
</Form.Select>
|
||||||
))}
|
))}
|
||||||
</Form.Select>
|
|
||||||
<Form.Control.Feedback type='invalid'>
|
<Form.Control.Feedback type='invalid'>
|
||||||
{!values.target
|
{!values.target
|
||||||
? "Target shelf is required"
|
? "Target shelf is required"
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,45 @@
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,271 @@
|
||||||
|
// 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>
|
||||||
|
`;
|
|
@ -0,0 +1,445 @@
|
||||||
|
// 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>
|
||||||
|
`;
|
|
@ -0,0 +1,69 @@
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,66 @@
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
34
frontend/src/shared/utils/drawQuaggaProcessing.ts
Normal file
34
frontend/src/shared/utils/drawQuaggaProcessing.ts
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
20
frontend/src/shared/utils/getMedianOfCodeErrors.ts
Normal file
20
frontend/src/shared/utils/getMedianOfCodeErrors.ts
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
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,11 +1,10 @@
|
||||||
import { useCallback, useContext } from "react";
|
import { useCallback, useContext, useEffect } from "react";
|
||||||
import { AuthContext } from "../../App";
|
import { AuthContext } from "../../App";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
type UseAuthHook = { authenticated: boolean };
|
type UseAuthHook = { authenticated: boolean };
|
||||||
|
|
||||||
export const useAuth = (): UseAuthHook => {
|
export const useAuth = (): UseAuthHook => {
|
||||||
const auth = useContext(AuthContext);
|
const { authenticated, setAuthenticated } = useContext(AuthContext);
|
||||||
|
|
||||||
const authenticationCheck = useCallback(
|
const authenticationCheck = useCallback(
|
||||||
async () =>
|
async () =>
|
||||||
|
@ -16,17 +15,14 @@ export const useAuth = (): UseAuthHook => {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
auth.setAuthenticated?.(res.ok);
|
setAuthenticated?.(res.ok);
|
||||||
//react-query can't handle undefined without throwing a warning ...
|
|
||||||
return null;
|
|
||||||
}),
|
}),
|
||||||
[auth]
|
[setAuthenticated]
|
||||||
);
|
);
|
||||||
|
|
||||||
useQuery({
|
useEffect(() => {
|
||||||
queryFn: authenticationCheck,
|
authenticationCheck();
|
||||||
queryKey: ["auth"],
|
}, [authenticationCheck]);
|
||||||
});
|
|
||||||
|
|
||||||
return auth;
|
return { authenticated };
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,6 +3,8 @@ import Quagga, {
|
||||||
QuaggaJSResultObject,
|
QuaggaJSResultObject,
|
||||||
} from "@ericblade/quagga2";
|
} from "@ericblade/quagga2";
|
||||||
import { useState, useCallback, useEffect } from "react";
|
import { useState, useCallback, useEffect } from "react";
|
||||||
|
import { getMedianOfCodeErrors } from "./getMedianOfCodeErrors";
|
||||||
|
import { drawQuaggaProcessing } from "./drawQuaggaProcessing";
|
||||||
|
|
||||||
const constraints = {
|
const constraints = {
|
||||||
width: 640,
|
width: 640,
|
||||||
|
@ -29,28 +31,6 @@ export const useScanner = ({
|
||||||
|
|
||||||
const [scannerRef, setScannerRef] = useState<HTMLDivElement | null>(null);
|
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(
|
const errorCheck = useCallback(
|
||||||
(result: QuaggaJSResultObject) => {
|
(result: QuaggaJSResultObject) => {
|
||||||
if (!onDetected) {
|
if (!onDetected) {
|
||||||
|
@ -66,42 +46,9 @@ export const useScanner = ({
|
||||||
onDetected(result.codeResult.code);
|
onDetected(result.codeResult.code);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[getMedianOfCodeErrors, onDetected]
|
[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 getCameraId = useCallback(async () => {
|
||||||
const stream = await navigator.mediaDevices.getUserMedia({
|
const stream = await navigator.mediaDevices.getUserMedia({
|
||||||
video: { facingMode: "environment" },
|
video: { facingMode: "environment" },
|
||||||
|
@ -150,7 +97,7 @@ export const useScanner = ({
|
||||||
locate: true,
|
locate: true,
|
||||||
},
|
},
|
||||||
async (err) => {
|
async (err) => {
|
||||||
Quagga.onProcessed(handleProcessed);
|
Quagga.onProcessed(drawQuaggaProcessing);
|
||||||
|
|
||||||
if (err) {
|
if (err) {
|
||||||
return console.error("Error starting Quagga:", err);
|
return console.error("Error starting Quagga:", err);
|
||||||
|
@ -170,7 +117,7 @@ export const useScanner = ({
|
||||||
await Quagga.CameraAccess.release();
|
await Quagga.CameraAccess.release();
|
||||||
await Quagga.stop();
|
await Quagga.stop();
|
||||||
Quagga.offDetected(errorCheck);
|
Quagga.offDetected(errorCheck);
|
||||||
Quagga.offProcessed(handleProcessed);
|
Quagga.offProcessed(drawQuaggaProcessing);
|
||||||
}, [errorCheck]);
|
}, [errorCheck]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -1,12 +1,3 @@
|
||||||
export const bookShelfs = {
|
|
||||||
available: "AVAILABLE",
|
|
||||||
fnord1: "FNORD1",
|
|
||||||
fnord2: "FNORD2",
|
|
||||||
sharing: "SHARING",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export type Shelf = (typeof bookShelfs)[keyof typeof bookShelfs];
|
|
||||||
|
|
||||||
export type Book = {
|
export type Book = {
|
||||||
id: number;
|
id: number;
|
||||||
uuid: string;
|
uuid: string;
|
||||||
|
@ -16,5 +7,5 @@ export type Book = {
|
||||||
lastCheckoutDate: number | null;
|
lastCheckoutDate: number | null;
|
||||||
checkoutBy: string | null;
|
checkoutBy: string | null;
|
||||||
contact: string | null;
|
contact: string | null;
|
||||||
shelf: Shelf | null;
|
shelf: string | null;
|
||||||
};
|
};
|
||||||
|
|
|
@ -12,6 +12,7 @@ import {
|
||||||
deleteBook,
|
deleteBook,
|
||||||
editBook,
|
editBook,
|
||||||
returnBook,
|
returnBook,
|
||||||
|
listShelves,
|
||||||
} from "./queries";
|
} from "./queries";
|
||||||
import { v4 as uuidv4 } from "uuid";
|
import { v4 as uuidv4 } from "uuid";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
|
@ -370,6 +371,24 @@ 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(
|
app.post(
|
||||||
"/api/books/return",
|
"/api/books/return",
|
||||||
async (
|
async (
|
||||||
|
|
|
@ -6,3 +6,4 @@ export { findBook } from "./findBook";
|
||||||
export { createBook } from "./createBook";
|
export { createBook } from "./createBook";
|
||||||
export { deleteBook } from "./deleteBook";
|
export { deleteBook } from "./deleteBook";
|
||||||
export { editBook } from "./editBook";
|
export { editBook } from "./editBook";
|
||||||
|
export { listShelves } from "./listShelves";
|
||||||
|
|
1
middleware/queries/listShelves.ts
Normal file
1
middleware/queries/listShelves.ts
Normal file
|
@ -0,0 +1 @@
|
||||||
|
export const listShelves = `SELECT DISTINCT shelf FROM bookData;`;
|
Loading…
Reference in a new issue