feat(GoogleApi): add google api to BookModal
This commit is contained in:
parent
af569cbde6
commit
f35c4c473d
1 changed files with 37 additions and 23 deletions
|
|
@ -29,7 +29,20 @@ export const BookModal = ({
|
|||
}, [book, reset]);
|
||||
|
||||
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);
|
||||
setShowScanner(false);
|
||||
},
|
||||
|
|
@ -38,6 +51,7 @@ export const BookModal = ({
|
|||
const values = useWatch({ control });
|
||||
|
||||
const [submitError, setSubmitError] = useState<string | undefined>();
|
||||
|
||||
const onSubmit = useCallback(
|
||||
async (data: Partial<BookForm>) => {
|
||||
setSubmitError(undefined);
|
||||
|
|
@ -89,7 +103,7 @@ export const BookModal = ({
|
|||
<ModalHeader
|
||||
onClose={onClose}
|
||||
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
|
||||
style={{
|
||||
|
|
@ -100,18 +114,18 @@ export const BookModal = ({
|
|||
>
|
||||
{!showScanner && (
|
||||
<Form
|
||||
className="mb-2"
|
||||
className='mb-2'
|
||||
onSubmit={(ev) => {
|
||||
ev.preventDefault();
|
||||
onSubmit(values);
|
||||
}}
|
||||
>
|
||||
<Form.Group as={Row} className="mb-2">
|
||||
<Col sm="2">
|
||||
<Form.Group as={Row} className='mb-2'>
|
||||
<Col sm='2'>
|
||||
<Form.Label>ISBN</Form.Label>
|
||||
</Col>
|
||||
<Col className="d-flex flex-column">
|
||||
<div className="d-flex">
|
||||
<Col className='d-flex flex-column'>
|
||||
<div className='d-flex'>
|
||||
<Form.Control
|
||||
{...register("isbn", { required: true, maxLength: 360 })}
|
||||
isInvalid={!!formState.errors.isbn}
|
||||
|
|
@ -126,7 +140,7 @@ export const BookModal = ({
|
|||
color: "black",
|
||||
border: "2px solid black",
|
||||
}}
|
||||
className="mr-2 pt-0"
|
||||
className='mr-2 pt-0'
|
||||
disabled={showScanner}
|
||||
onClick={() => setShowScanner(true)}
|
||||
>
|
||||
|
|
@ -135,7 +149,7 @@ export const BookModal = ({
|
|||
</div>
|
||||
<Form.Control.Feedback
|
||||
style={{ display: !formState.errors.isbn ? "none" : "block" }}
|
||||
type="invalid"
|
||||
type='invalid'
|
||||
>
|
||||
{!formState.errors.isbn
|
||||
? "ISBN is required"
|
||||
|
|
@ -143,8 +157,8 @@ export const BookModal = ({
|
|||
</Form.Control.Feedback>
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} className="mb-2">
|
||||
<Col sm="2">
|
||||
<Form.Group as={Row} className='mb-2'>
|
||||
<Col sm='2'>
|
||||
<Form.Label>Title</Form.Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -153,15 +167,15 @@ export const BookModal = ({
|
|||
isInvalid={!!formState.errors.title}
|
||||
/>
|
||||
|
||||
<Form.Control.Feedback type="invalid">
|
||||
<Form.Control.Feedback type='invalid'>
|
||||
{!values.title
|
||||
? "Title is required"
|
||||
: formState.errors.title?.message}
|
||||
</Form.Control.Feedback>
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} className="mb-2">
|
||||
<Col sm="2">
|
||||
<Form.Group as={Row} className='mb-2'>
|
||||
<Col sm='2'>
|
||||
<Form.Label>Year published</Form.Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -187,15 +201,15 @@ export const BookModal = ({
|
|||
isInvalid={!!formState.errors.published}
|
||||
/>
|
||||
|
||||
<Form.Control.Feedback type="invalid">
|
||||
<Form.Control.Feedback type='invalid'>
|
||||
{!values.published
|
||||
? "Year published is required"
|
||||
: formState.errors.published?.message}
|
||||
</Form.Control.Feedback>
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} className="mb-2">
|
||||
<Col sm="2">
|
||||
<Form.Group as={Row} className='mb-2'>
|
||||
<Col sm='2'>
|
||||
<Form.Label>Shelf</Form.Label>
|
||||
</Col>
|
||||
<Col>
|
||||
|
|
@ -205,21 +219,21 @@ export const BookModal = ({
|
|||
>
|
||||
{Object.keys(bookShelfs).map((key) => (
|
||||
<option
|
||||
key="key"
|
||||
key='key'
|
||||
value={bookShelfs[key as keyof typeof bookShelfs]}
|
||||
>
|
||||
{key}
|
||||
</option>
|
||||
))}
|
||||
</Form.Select>
|
||||
<Form.Control.Feedback type="invalid">
|
||||
<Form.Control.Feedback type='invalid'>
|
||||
{!values.shelf
|
||||
? "Shelf is required"
|
||||
: formState.errors.shelf?.message}
|
||||
</Form.Control.Feedback>
|
||||
</Col>
|
||||
</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
|
||||
style={{
|
||||
borderRadius: "5px",
|
||||
|
|
@ -238,12 +252,12 @@ export const BookModal = ({
|
|||
)}
|
||||
{showScanner && (
|
||||
<div
|
||||
className="w-100 overflow-hidden"
|
||||
className='w-100 overflow-hidden'
|
||||
ref={(ref) => setScannerRef(ref)}
|
||||
style={{ position: "relative", height: "25vh" }}
|
||||
>
|
||||
<canvas
|
||||
className="drawingBuffer w-100 position-absolute"
|
||||
className='drawingBuffer w-100 position-absolute'
|
||||
style={{
|
||||
height: "100%",
|
||||
border: "2px solid black",
|
||||
|
|
@ -258,7 +272,7 @@ export const BookModal = ({
|
|||
</p>
|
||||
) : null}
|
||||
{!!submitError && (
|
||||
<Form.Control.Feedback style={{ display: "block" }} type="invalid">
|
||||
<Form.Control.Feedback style={{ display: "block" }} type='invalid'>
|
||||
{submitError}
|
||||
</Form.Control.Feedback>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue