0Ry5/n39librarian
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

merge-try-google-books-api-for-book-identification-by-isbn #7

Merged
0Ry5 merged 3 commits from try-google-books-api-for-book-identification-by-isbn into main 2024-09-13 19:39:59 +02:00
Conversation 1 Commits 3 Files changed 6 +37 -23
1 changed files with 37 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit f35c4c473d - Show all commits

60
frontend/src/shared/components/modals/BookModal.tsx
View file

@ -29,7 +29,20 @@ export const BookModal = ({
}, [book, reset]); }, [book, reset]);
const { scannerError, setScannerRef } = useScanner({ const { scannerError, setScannerRef } = useScanner({
onDetected: (result) => { onDetected: async (result) => {
const googleBooks = await (
await fetch(
"https://www.googleapis.com/books/v1/volumes?q=isbn:" + result
)
).json();
if ("items" in googleBooks) {
console.log(googleBooks);
setValue(
"published",
googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4)
);
setValue("title", googleBooks.items[0].volumeInfo.title);
}
setValue("isbn", result); setValue("isbn", result);
setShowScanner(false); setShowScanner(false);
}, },
@ -38,6 +51,7 @@ export const BookModal = ({
const values = useWatch({ control }); const values = useWatch({ control });
const [submitError, setSubmitError] = useState<string | undefined>(); const [submitError, setSubmitError] = useState<string | undefined>();
const onSubmit = useCallback( const onSubmit = useCallback(
async (data: Partial<BookForm>) => { async (data: Partial<BookForm>) => {
setSubmitError(undefined); setSubmitError(undefined);
@ -89,7 +103,7 @@ export const BookModal = ({
<ModalHeader <ModalHeader
onClose={onClose} onClose={onClose}
title={`${!!book ? "Edit" : "Add new"} Book`} title={`${!!book ? "Edit" : "Add new"} Book`}
icon={<ImBook size={50} className="ml-0 mr-auto" />} icon={<ImBook size={50} className='ml-0 mr-auto' />}
/> />
<Modal.Body <Modal.Body
style={{ style={{
@ -100,18 +114,18 @@ export const BookModal = ({
> >
{!showScanner && ( {!showScanner && (
<Form <Form
className="mb-2" className='mb-2'
onSubmit={(ev) => { onSubmit={(ev) => {
ev.preventDefault(); ev.preventDefault();
onSubmit(values); onSubmit(values);
}} }}
> >
<Form.Group as={Row} className="mb-2"> <Form.Group as={Row} className='mb-2'>
<Col sm="2"> <Col sm='2'>
<Form.Label>ISBN</Form.Label> <Form.Label>ISBN</Form.Label>
</Col> </Col>
<Col className="d-flex flex-column"> <Col className='d-flex flex-column'>
<div className="d-flex"> <div className='d-flex'>
<Form.Control <Form.Control
{...register("isbn", { required: true, maxLength: 360 })} {...register("isbn", { required: true, maxLength: 360 })}
isInvalid={!!formState.errors.isbn} isInvalid={!!formState.errors.isbn}
@ -126,7 +140,7 @@ export const BookModal = ({
color: "black", color: "black",
border: "2px solid black", border: "2px solid black",
}} }}
className="mr-2 pt-0" className='mr-2 pt-0'
disabled={showScanner} disabled={showScanner}
onClick={() => setShowScanner(true)} onClick={() => setShowScanner(true)}
> >
@ -135,7 +149,7 @@ export const BookModal = ({
</div> </div>
<Form.Control.Feedback <Form.Control.Feedback
style={{ display: !formState.errors.isbn ? "none" : "block" }} style={{ display: !formState.errors.isbn ? "none" : "block" }}
type="invalid" type='invalid'
> >
{!formState.errors.isbn {!formState.errors.isbn
? "ISBN is required" ? "ISBN is required"
@ -143,8 +157,8 @@ export const BookModal = ({
</Form.Control.Feedback> </Form.Control.Feedback>
</Col> </Col>
</Form.Group> </Form.Group>
<Form.Group as={Row} className="mb-2"> <Form.Group as={Row} className='mb-2'>
<Col sm="2"> <Col sm='2'>
<Form.Label>Title</Form.Label> <Form.Label>Title</Form.Label>
</Col> </Col>
<Col> <Col>
@ -153,15 +167,15 @@ export const BookModal = ({
isInvalid={!!formState.errors.title} isInvalid={!!formState.errors.title}
/> />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type='invalid'>
{!values.title {!values.title
? "Title is required" ? "Title is required"
: formState.errors.title?.message} : formState.errors.title?.message}
</Form.Control.Feedback> </Form.Control.Feedback>
</Col> </Col>
</Form.Group> </Form.Group>
<Form.Group as={Row} className="mb-2"> <Form.Group as={Row} className='mb-2'>
<Col sm="2"> <Col sm='2'>
<Form.Label>Year published</Form.Label> <Form.Label>Year published</Form.Label>
</Col> </Col>
<Col> <Col>
@ -187,15 +201,15 @@ export const BookModal = ({
isInvalid={!!formState.errors.published} isInvalid={!!formState.errors.published}
/> />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type='invalid'>
{!values.published {!values.published
? "Year published is required" ? "Year published is required"
: formState.errors.published?.message} : formState.errors.published?.message}
</Form.Control.Feedback> </Form.Control.Feedback>
</Col> </Col>
</Form.Group> </Form.Group>
<Form.Group as={Row} className="mb-2"> <Form.Group as={Row} className='mb-2'>
<Col sm="2"> <Col sm='2'>
<Form.Label>Shelf</Form.Label> <Form.Label>Shelf</Form.Label>
</Col> </Col>
<Col> <Col>
@ -205,21 +219,21 @@ export const BookModal = ({
> >
{Object.keys(bookShelfs).map((key) => ( {Object.keys(bookShelfs).map((key) => (
<option <option
key="key" key='key'
value={bookShelfs[key as keyof typeof bookShelfs]} value={bookShelfs[key as keyof typeof bookShelfs]}
> >
{key} {key}
</option> </option>
))} ))}
</Form.Select> </Form.Select>
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type='invalid'>
{!values.shelf {!values.shelf
? "Shelf is required" ? "Shelf is required"
: formState.errors.shelf?.message} : formState.errors.shelf?.message}
</Form.Control.Feedback> </Form.Control.Feedback>
</Col> </Col>
</Form.Group> </Form.Group>
<div className="d-flex mx-auto mb-auto mt-2 w-100"> <div className='d-flex mx-auto mb-auto mt-2 w-100'>
<Button <Button
style={{ style={{
borderRadius: "5px", borderRadius: "5px",
@ -238,12 +252,12 @@ export const BookModal = ({
)} )}
{showScanner && ( {showScanner && (
<div <div
className="w-100 overflow-hidden" className='w-100 overflow-hidden'
ref={(ref) => setScannerRef(ref)} ref={(ref) => setScannerRef(ref)}
style={{ position: "relative", height: "25vh" }} style={{ position: "relative", height: "25vh" }}
> >
<canvas <canvas
className="drawingBuffer w-100 position-absolute" className='drawingBuffer w-100 position-absolute'
style={{ style={{
height: "100%", height: "100%",
border: "2px solid black", border: "2px solid black",
@ -258,7 +272,7 @@ export const BookModal = ({
</p> </p>
) : null} ) : null}
{!!submitError && ( {!!submitError && (
<Form.Control.Feedback style={{ display: "block" }} type="invalid"> <Form.Control.Feedback style={{ display: "block" }} type='invalid'>
{submitError} {submitError}
</Form.Control.Feedback> </Form.Control.Feedback>
)} )}