feat(DNBApi): add api from deutsche national bibliothek

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

@@ -6,6 +6,8 @@ import { useForm, useWatch } from "react-hook-form";
 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";
 
 type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
 
@@ -27,24 +29,33 @@ export const BookModal = ({
     reset(book);
   }, [book, reset]);
 
-  const { scannerError, setScannerRef } = useScanner({
-    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);
+  const [processingDetection, setProcessingDetection] = useState(false);
+
+  const onDetected = useCallback(
+    async (result: string) => {
+      if (!processingDetection) {
+        setProcessingDetection(true);
+        const apiResponses = (
+          await Promise.all([
+            tryDeutscheNationalBibliothekApi(result),
+            tryGoogleBooksApi(result),
+          ])
+        ).filter((b) => !!b) as Pick<Book, "published" | "title">[];
+        if (apiResponses.length) {
+          Object.entries(apiResponses[0]).forEach(([key, value]) => {
+            setValue(key as keyof BookForm, value);
+          });
+        }
+        setValue("isbn", result);
+        setShowScanner(false);
+        setProcessingDetection(false);
       }
-      setValue("isbn", result);
-      setShowScanner(false);
     },
+    [processingDetection, setValue]
+  );
+
+  const { scannerError, setScannerRef } = useScanner({
+    onDetected,
   });
 
   const values = useWatch({ control });

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

@@ -1,12 +1,11 @@
 import React, { useCallback, useState } from "react";
 import { Alert, Button, Col, Form, Modal, Row } from "react-bootstrap";
-import { ImBoxAdd, ImBoxRemove } from "react-icons/im";
 import { useForm, useWatch } from "react-hook-form";
+import { AiOutlineExclamationCircle } from "react-icons/ai";
+import { ImBoxAdd, ImBoxRemove } from "react-icons/im";
 import { Book } from "../../../types/Book";
-import { primary, secondary } from "../../../colors";
 import { ModalHeader } from "./ModalHeader";
 import { CheckoutBookModalProps } from "./types";
-import { AiOutlineExclamationCircle } from "react-icons/ai";
 
 type BookCheckoutForm = Pick<Book, "checkoutBy" | "contact">;
 

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

@@ -1,8 +1,7 @@
-import { Button, Modal } from "react-bootstrap";
-import { primary, secondary } from "../../../colors";
-import { ModalHeader } from "./ModalHeader";
-import { ImBin } from "react-icons/im";
 import { useMutation } from "@tanstack/react-query";
+import { Button, Modal } from "react-bootstrap";
+import { ImBin } from "react-icons/im";
+import { ModalHeader } from "./ModalHeader";
 import { DeleteBookModalProps } from "./types";
 
 export const DeleteBookModal = ({

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Modal } from "react-bootstrap";
 import { ImCamera } from "react-icons/im";
 import { useScanner } from "../../utils/useScanner";