feat(GoogleApi): add google api to BookModal

frontend/src/shared/components/modals/BookModal.tsx

@@ -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">
+            <Form.Group as={Row} className='mb-2'>
-              <Col sm="2">
+              <Col sm='2'>
                 <Form.Label>ISBN</Form.Label>
               </Col>
-              <Col className="d-flex flex-column">
+              <Col className='d-flex flex-column'>
-                <div className="d-flex">
+                <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">
+            <Form.Group as={Row} className='mb-2'>
-              <Col sm="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">
+            <Form.Group as={Row} className='mb-2'>
-              <Col sm="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">
+            <Form.Group as={Row} className='mb-2'>
-              <Col sm="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>
         )}