Merge pull request 'merge-move-all-books-from-shelf' (#14) from move-all-books-from-shelf into main

Reviewed-on: #14

.gitignore

@@ -1,3 +1,4 @@
 .env
 n39env
+.n39env
 .vscode

frontend/package.json

@@ -16,6 +16,7 @@
     "@types/react-dom": "^18.3.0",
     "bootstrap": "^5.3.3",
     "date-fns": "^3.6.0",
+    "fast-xml-parser": "^4.5.0",
     "history": "^5.3.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",

frontend/src/index.css

@@ -45,12 +45,17 @@ body {
     letter-spacing: normal;
   }
 
+  tbody > tr > td {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+      "Helvetica Neue", sans-serif !important;
+  }
   .table > :not(caption) > * > * {
     background-color: #f2f2e8 !important;
     color: #5e6268 !important;
   }
 
-  table {
+  table > thead {
     letter-spacing: 0.25em;
   }
 
@@ -145,12 +150,18 @@ body {
       letter-spacing: normal;
     }
 
+    tbody > tr > td {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif !important;
+    }
+
     .table > :not(caption) > * > * {
       background-color: #5e6268 !important;
       color: #f2f2e8 !important;
     }
 
-    table {
+    table > thead {
       letter-spacing: 0.25em;
     }
 

frontend/src/pages/Library/Library.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useContext, useMemo } from "react";
+import React, { useCallback, useContext, useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Book } from "../../types/Book";
-import { Pagination, Table } from "react-bootstrap";
+import { Button, Form, Table } from "react-bootstrap";
 import {
   createColumnHelper,
   flexRender,
@@ -15,12 +15,13 @@ import {
 } from "@tanstack/react-table";
 import { Actions } from "./components/Actions";
 import { ImArrowDown, ImArrowUp } from "react-icons/im";
-import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
 import { useLocation } from "react-router-dom";
 import { format } from "date-fns";
 import { useAuth } from "../../shared/utils/useAuthentication";
 import { ModalSelector } from "../../shared/components/modals/Modals";
 import { ModalContext } from "../../App";
+import { Pagination } from "./components/Pagination";
+import { modalTypes } from "../../shared/components/modals/types";
 
 export const Library = (): React.JSX.Element => {
   const location = useLocation();
@@ -31,9 +32,21 @@ export const Library = (): React.JSX.Element => {
     [location]
   );
 
-  const auth = useAuth();
+  const { authenticated } = useAuth();
   const modalContext = useContext(ModalContext);
 
+  const [selectedBooks, setSelectedBooks] = useState<Book["uuid"][]>([]);
+
+  const toggleBookSelection = useCallback(
+    (uuid: Book["uuid"]) =>
+      setSelectedBooks((prev) =>
+        prev.includes(uuid)
+          ? prev.filter((current) => current !== uuid)
+          : [...prev, uuid]
+      ),
+    []
+  );
+
   const { data: books, refetch } = useQuery<Book[]>({
     queryFn: async () => {
       if (
@@ -50,10 +63,48 @@ export const Library = (): React.JSX.Element => {
     queryKey: ["books"],
   });
 
+  const shelf = params.get("shelf");
+  const year = params.get("year");
+
+  const data = useMemo(
+    () =>
+      books?.filter(
+        (b) =>
+          (!shelf || b.shelf?.toLowerCase() === shelf?.toLowerCase()) &&
+          (!year || b.published.toString() === year)
+      ) ?? [],
+    [books, year, shelf]
+  );
+
   const columnHelper = createColumnHelper<Book>();
   const columns: ColumnDef<Book, any>[] = useMemo(
     () =>
       [
+        authenticated
+          ? columnHelper.display({
+              id: "selection",
+              header: () => (
+                <Form.Check
+                  type='checkbox'
+                  checked={selectedBooks.length === data?.length}
+                  id={`select-all-books`}
+                  onChange={() =>
+                    setSelectedBooks((prev) =>
+                      prev.length || !data ? [] : data.map((b) => b.uuid)
+                    )
+                  }
+                />
+              ),
+              cell: (props) => (
+                <Form.Check
+                  type='checkbox'
+                  checked={selectedBooks.includes(props.row.original.uuid)}
+                  id={`select-book-${props.row.original.uuid}`}
+                  onChange={() => toggleBookSelection(props.row.original.uuid)}
+                />
+              ),
+            })
+          : undefined,
         columnHelper.accessor((book) => book.isbn, {
           id: "isbn",
           header: "ISBN",
@@ -108,7 +159,7 @@ export const Library = (): React.JSX.Element => {
             </div>
           ),
         }),
-        auth.authenticated
+        authenticated
           ? columnHelper.accessor(
               (book) => (!book.contact ? "" : book.contact),
               {
@@ -133,26 +184,21 @@ export const Library = (): React.JSX.Element => {
             <Actions
               book={props.row.original}
               refetch={refetch}
-              authenticated={auth.authenticated}
+              authenticated={authenticated}
               setActiveModal={modalContext.setActiveModal}
             />
           ),
         }),
       ].filter((c) => typeof c !== "undefined") as ColumnDef<Book, any>[],
-    [auth.authenticated, columnHelper, modalContext.setActiveModal, refetch]
+    [
-  );
+      authenticated,
-
+      columnHelper,
-  const shelf = params.get("shelf");
+      selectedBooks,
-  const year = params.get("year");
+      data,
-
+      toggleBookSelection,
-  const data = useMemo(
+      refetch,
-    () =>
+      modalContext.setActiveModal,
-      books?.filter(
+    ]
-        (b) =>
-          (!shelf || b.shelf?.toLowerCase() === shelf?.toLowerCase()) &&
-          (!year || b.published.toString() === year)
-      ) ?? [],
-    [books, year, shelf]
   );
 
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -179,19 +225,6 @@ export const Library = (): React.JSX.Element => {
     [table.getState().pagination.pageIndex]
   );
 
-  const getPage = useCallback(
-    (n: number) => (
-      <Pagination.Item
-        key={`${n}th-page`}
-        active={n === currentPage}
-        onClick={() => table.setPageIndex(n)}
-      >
-        {n + 1}
-      </Pagination.Item>
-    ),
-    [table, currentPage]
-  );
-
   return (
     <div className='m-auto p-2' style={{ width: "100%", maxHeight: "100vh" }}>
       <ModalSelector {...modalContext} />
@@ -249,32 +282,32 @@ export const Library = (): React.JSX.Element => {
       </div>
       {table.getPageCount() ? (
         <div className='d-flex w-100'>
-          <Pagination className='d-flex m-auto'>
+          <Pagination
-            <Pagination.Item
+            currentPage={currentPage}
-              key='prev'
+            setPageIndex={table.setPageIndex}
-              disabled={currentPage === 0}
+            getPageCount={table.getPageCount}
-              onClick={() => table.setPageIndex(currentPage - 1)}
+          />
+          {authenticated && (
+            <Button
+              style={{
+                marginLeft: "0px",
+                marginRight: "auto",
+              }}
+              className='my-auto'
+              onClick={() =>
+                modalContext.setActiveModal({
+                  type: modalTypes.moveShelf,
+                  books: selectedBooks,
+                  onClose: () => {
+                    refetch();
+                    modalContext.setActiveModal();
+                  },
+                })
+              }
             >
-              <AiOutlineLeft />
+              Move selection
-            </Pagination.Item>
+            </Button>
-            {getPage(0)}
+          )}
-            {currentPage > 3 && <Pagination.Ellipsis />}
-            {currentPage === 3 && getPage(currentPage - 2)}
-            {currentPage > 1 && getPage(currentPage - 1)}
-            {currentPage > 0 && getPage(currentPage)}
-            {currentPage < table.getPageCount() - 2 && getPage(currentPage + 1)}
-            {currentPage < table.getPageCount() - 3 &&
-              table.getPageCount() > 4 && <Pagination.Ellipsis />}
-            {currentPage < table.getPageCount() - 1 &&
-              getPage(table.getPageCount() - 1)}
-            <Pagination.Item
-              key='next'
-              onClick={() => table.setPageIndex(currentPage + 1)}
-              disabled={currentPage >= table.getPageCount() - 1}
-            >
-              <AiOutlineRight />
-            </Pagination.Item>
-          </Pagination>
         </div>
       ) : null}
     </div>

frontend/src/pages/Library/components/Actions.tsx

@@ -1,12 +1,10 @@
-import { Badge, Dropdown } from "react-bootstrap";
-import { Book } from "../../../types/Book";
-import { ImBin, ImBook, ImBoxAdd, ImBoxRemove, ImMenu } from "react-icons/im";
 import { useMutation } from "@tanstack/react-query";
-import * as colors from "../../../colors";
+import { useCallback } from "react";
-import * as dark from "../../../darkmodeColors";
+import { Badge, Dropdown } from "react-bootstrap";
+import { ImBin, ImBook, ImBoxAdd, ImBoxRemove, ImMenu } from "react-icons/im";
 import { ModalContextType } from "../../../App";
 import { modalTypes } from "../../../shared/components/modals/types";
-import { useCallback } from "react";
+import { Book } from "../../../types/Book";
 
 const { book: bookModal, checkout, del } = modalTypes;
 
@@ -110,9 +108,7 @@ export const Actions = ({
             <Dropdown.Item
               id='delete'
               className='d-flex'
-              onClick={() =>
+              onClick={() => setActiveModal({ type: del, onClose, ...book })}
-                setActiveModal({ type: del, uuid: book.uuid, onClose })
-              }
             >
               <Badge pill className='ml-2 d-flex danger mr-2'>
                 <ImBin size={25} color='black' className='m-auto' />

frontend/src/pages/Library/components/Pagination.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from "react";
+import { Pagination as BP } from "react-bootstrap";
+import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
+import { useAuth } from "../../../shared/utils/useAuthentication";
+
+export const Pagination = ({
+  currentPage,
+  getPageCount,
+  setPageIndex,
+}: {
+  currentPage: number;
+  getPageCount: () => number;
+  setPageIndex: (index: number) => void;
+}): React.JSX.Element => {
+  const { authenticated } = useAuth();
+
+  const getPage = useCallback(
+    (n: number) => (
+      <BP.Item
+        key={`${n}th-page`}
+        active={n === currentPage}
+        onClick={() => setPageIndex(n)}
+      >
+        {n + 1}
+      </BP.Item>
+    ),
+    [setPageIndex, currentPage]
+  );
+
+  return (
+    <BP
+      className='d-flex'
+      style={{
+        marginLeft: "auto",
+        marginRight: authenticated ? "10px" : "auto",
+      }}
+    >
+      <BP.Item
+        key='prev'
+        disabled={currentPage === 0}
+        onClick={() => setPageIndex(currentPage - 1)}
+      >
+        <AiOutlineLeft />
+      </BP.Item>
+      {getPage(0)}
+      {currentPage > 3 && <BP.Ellipsis />}
+      {currentPage === 3 && getPage(currentPage - 2)}
+      {currentPage > 1 && getPage(currentPage - 1)}
+      {currentPage > 0 && getPage(currentPage)}
+      {currentPage < getPageCount() - 2 && getPage(currentPage + 1)}
+      {currentPage < getPageCount() - 3 && getPageCount() > 4 && (
+        <BP.Ellipsis />
+      )}
+      {currentPage < getPageCount() - 1 && getPage(getPageCount() - 1)}
+      <BP.Item
+        key='next'
+        onClick={() => setPageIndex(currentPage + 1)}
+        disabled={currentPage >= getPageCount() - 1}
+      >
+        <AiOutlineRight />
+      </BP.Item>
+    </BP>
+  );
+};

frontend/src/pages/Main/utils/tryDeutscheNationalBibliothekApi.ts

@@ -0,0 +1,29 @@
+import { XMLParser } from "fast-xml-parser";
+import { Book } from "../../../types/Book";
+
+export const tryDeutscheNationalBibliothekApi = async (
+  isbn: string
+): Promise<Pick<Book, "published" | "title"> | undefined> => {
+  const parser = new XMLParser();
+
+  const foundBooks = parser.parse(
+    await (
+      await fetch(
+        "https://services.dnb.de/sru/dnb?version=1.1&operation=searchRetrieve&query=" +
+          isbn
+      )
+    ).text()
+  );
+  const foundBook =
+    foundBooks.searchRetrieveResponse?.records?.record?.recordData?.[
+      "rdf:RDF"
+    ]?.["rdf:Description"];
+
+  if (!!foundBook) {
+    return {
+      published: foundBook["dcterms:issued"],
+      title: foundBook["dc:title"],
+    };
+  }
+  return undefined;
+};

frontend/src/pages/Main/utils/tryGoogleBooksApi.ts

@@ -0,0 +1,16 @@
+import { Book } from "../../../types/Book";
+
+export const tryGoogleBooksApi = async (
+  isbn: string
+): Promise<Pick<Book, "published" | "title"> | undefined> => {
+  const googleBooks = await (
+    await fetch("https://www.googleapis.com/books/v1/volumes?q=isbn:" + isbn)
+  ).json();
+  if ("items" in googleBooks) {
+    return {
+      published: googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4),
+      title: googleBooks.items[0].volumeInfo.title,
+    };
+  }
+  return undefined;
+};

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({
+  const [processingDetection, setProcessingDetection] = useState(false);
-    onDetected: async (result) => {
+
-      const googleBooks = await (
+  const onDetected = useCallback(
-        await fetch(
+    async (result: string) => {
-          "https://www.googleapis.com/books/v1/volumes?q=isbn:" + result
+      if (!processingDetection) {
-        )
+        setProcessingDetection(true);
-      ).json();
+        const apiResponses = (
-      if ("items" in googleBooks) {
+          await Promise.all([
-        console.log(googleBooks);
+            tryDeutscheNationalBibliothekApi(result),
-        setValue(
+            tryGoogleBooksApi(result),
-          "published",
+          ])
-          googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4)
+        ).filter((b) => !!b) as Pick<Book, "published" | "title">[];
-        );
+        if (apiResponses.length) {
-        setValue("title", googleBooks.items[0].volumeInfo.title);
+          Object.entries(apiResponses[0]).forEach(([key, value]) => {
+            setValue(key as keyof BookForm, value);
+          });
         }
         setValue("isbn", result);
         setShowScanner(false);
+        setProcessingDetection(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,12 +1,12 @@
-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 = ({
   uuid,
+  title,
   open,
   onClose,
 }: Omit<DeleteBookModalProps, "type">): React.JSX.Element => {
@@ -27,7 +27,7 @@ export const DeleteBookModal = ({
     <Modal show={open} onHide={onClose} centered>
       <ModalHeader
         onClose={onClose}
-        title={"Move to Shelf"}
+        title={`Delete Book "${title}"`}
         icon={<ImBin size={50} className='ml-0 mr-auto' />}
       />
       <Modal.Body
@@ -35,6 +35,7 @@ export const DeleteBookModal = ({
           borderTop: "none",
         }}
       >
+        Do you really want to delete this book?
         <div className='d-flex mx-auto mb-auto mt-2 w-100'>
           <Button
             style={{

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

@@ -6,8 +6,9 @@ import { CheckoutBookModal } from "./CheckoutModal";
 import { ScannerModal } from "./ScannerModal";
 import { DeleteBookModal } from "./DeleteBookModal";
 import { ModalContextType } from "../../../App";
+import { MoveShelfModal } from "./MoveShelfModal";
 
-const { auth, book, checkout, scanner, del } = modalTypes;
+const { auth, book, checkout, scanner, del, moveShelf } = modalTypes;
 
 export const ModalSelector = ({
   activeModal,
@@ -48,7 +49,15 @@ export const ModalSelector = ({
     <DeleteBookModal
       open={activeModal?.type === del}
       onClose={activeModal?.type === del ? activeModal.onClose : setActiveModal}
-      uuid={activeModal?.type === checkout ? activeModal.uuid : ""}
+      uuid={activeModal?.type === del ? activeModal.uuid : ""}
+      title={activeModal?.type === del ? activeModal.title : ""}
+    />
+    <MoveShelfModal
+      books={activeModal?.type === moveShelf ? activeModal.books : []}
+      open={activeModal?.type === moveShelf}
+      onClose={
+        activeModal?.type === moveShelf ? activeModal.onClose : setActiveModal
+      }
     />
   </>
 );

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

@@ -0,0 +1,100 @@
+import { useMutation } from "@tanstack/react-query";
+import { Button, Col, Form, Modal, Row } from "react-bootstrap";
+import { ImBook } from "react-icons/im";
+import { ModalHeader } from "./ModalHeader";
+import { MoveShelfAction, MoveShelfModalProps } from "./types";
+import { useForm, useWatch } from "react-hook-form";
+import { bookShelfs } from "../../../types/Book";
+
+export const MoveShelfModal = ({
+  books,
+  open,
+  onClose,
+}: Omit<MoveShelfModalProps, "type">): React.JSX.Element => {
+  const { control, register, formState, setError } = useForm<MoveShelfAction>({
+    mode: "onChange",
+  });
+
+  const values = useWatch({ control });
+
+  const { mutate: mv } = useMutation({
+    mutationFn: async () => {
+      if (!values.target) {
+        setError("target", { message: "Taget shelf is required" });
+        return;
+      }
+
+      await fetch(`/api/shelf/move`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ ...values, books }),
+      });
+      onClose();
+    },
+  });
+
+  return (
+    <Modal show={open} onHide={onClose} centered>
+      <ModalHeader
+        onClose={onClose}
+        title={"Move to Shelf"}
+        icon={<ImBook size={50} className='ml-0 mr-auto' />}
+      />
+      <Modal.Body
+        style={{
+          borderTop: "none",
+        }}
+      >
+        <Form.Group as={Row} className='mb-2'>
+          <Col sm='2'>
+            <Form.Label>Shelf</Form.Label>
+          </Col>
+          <Col>
+            <Form.Select
+              {...register("target", { required: true })}
+              isInvalid={!!formState.errors.target}
+            >
+              {Object.keys(bookShelfs).map((key) => (
+                <option
+                  key='key'
+                  value={bookShelfs[key as keyof typeof bookShelfs]}
+                >
+                  {key}
+                </option>
+              ))}
+            </Form.Select>
+            <Form.Control.Feedback type='invalid'>
+              {!values.target
+                ? "Target shelf is required"
+                : formState.errors.target?.message}
+            </Form.Control.Feedback>
+          </Col>
+        </Form.Group>
+        <div className='d-flex mx-auto mb-auto mt-2 w-100'>
+          <Button
+            style={{
+              borderRadius: "5px",
+              marginLeft: "auto",
+              marginRight: "10px",
+            }}
+            onClick={() => onClose()}
+          >
+            Cancel
+          </Button>
+          <Button
+            style={{
+              borderRadius: "5px",
+              marginLeft: "0px",
+              marginRight: "10px",
+            }}
+            onClick={() => mv()}
+          >
+            Move
+          </Button>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};

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";

frontend/src/shared/components/modals/types.ts

@@ -11,6 +11,7 @@ export const modalTypes = {
   checkout: "checkout",
   scanner: "scanner",
   del: "del",
+  moveShelf: "moveShelf",
 } as const;
 
 export type ModalTypes = keyof typeof modalTypes;
@@ -37,11 +38,21 @@ export type ScannnerModal = {
 } & BaseModalProps;
 
 export type DeleteBookModalProps = { type: "del" } & BaseModalProps &
-  Pick<Book, "uuid">;
+  Pick<Book, "uuid" | "title">;
+
+export type MoveShelfModalProps = { type: "moveShelf" } & BaseModalProps & {
+    books: Book["uuid"][];
+  };
+
+export interface MoveShelfAction {
+  target: Book["shelf"];
+  books: Book["uuid"][];
+}
 
 export type ActiveModalProps =
   | Omit<AuthModalProps, "open" | "onClose">
   | Omit<BookModalProps, "open">
   | Omit<CheckoutBookModalProps, "open">
   | Omit<ScannnerModal, "open" | "onClose">
-  | Omit<DeleteBookModalProps, "open">;
+  | Omit<DeleteBookModalProps, "open">
+  | Omit<MoveShelfModalProps, "open">;

frontend/src/shared/utils/useScanner.ts

@@ -103,15 +103,25 @@ export const useScanner = ({
   };
 
   const getCameraId = useCallback(async () => {
-    await navigator.mediaDevices.getUserMedia({
+    const stream = await navigator.mediaDevices.getUserMedia({
-      video: true,
+      video: { facingMode: "environment" },
     });
 
+    if (
+      stream &&
+      stream.getVideoTracks().length &&
+      stream.getVideoTracks()[0].getSettings().deviceId
+    ) {
+      return stream.getVideoTracks()[0].getSettings().deviceId;
+    }
+
     const devices = await navigator.mediaDevices
       .enumerateDevices()
       .then((ds) => ds.filter((d) => d.kind === "videoinput"));
 
-    const back = devices.filter((d) => d.label === "Back Camera")[0];
+    const back = devices.filter((d) =>
+      d.label.toLowerCase().includes("back")
+    )[0];
 
     return !back ? devices[0].deviceId : back.deviceId;
   }, []);

middleware/index.ts

@@ -2,7 +2,7 @@ import express, { Request, Response, Application } from "express";
 import dotenv from "dotenv";
 
 import { createPool } from "mariadb";
-import { Book } from "./types/Book";
+import { Book, MoveShelfAction } from "./types/Book";
 import {
   checkoutBook,
   findBook,
@@ -19,6 +19,7 @@ import session from "express-session";
 import { censorBookData } from "./utils/censorBookData";
 import * as fs from "fs";
 import { checkForThreads } from "./utils/passesSQLInjectionCheck";
+import { moveShelf } from "./queries/moveShelf";
 
 dotenv.config();
 
@@ -199,6 +200,31 @@ app.post(
   }
 );
 
+app.post(
+  "/api/shelf/move",
+  async (
+    req: Request<undefined, undefined, MoveShelfAction>,
+    res: Response
+  ) => {
+    await isAuthenticated(req, res, async () => {
+      const { target } = req.body;
+      try {
+        const containsThread = checkForThreads([target], res);
+        if (containsThread) {
+          return;
+        }
+
+        const conn = await pool.getConnection();
+        await conn.query(moveShelf(req.body));
+        await conn.end();
+        res.status(200).send(`Books moved to shelf ${target}.`);
+      } catch (error) {
+        res.status(500).send("Internal Server Error: " + error);
+      }
+    });
+  }
+);
+
 app.post(
   "/api/books/edit",
   async (
@@ -230,7 +256,7 @@ app.post(
         } else {
           await conn.query(editBook(req.body));
           await conn.end();
-          res.status(200).send("Book moved to shelf");
+          res.status(200).send("Book edited.");
         }
       } catch (error) {
         res.status(500).send("Internal Server Error: " + error);

middleware/queries/moveShelf.ts

@@ -0,0 +1,6 @@
+import { MoveShelfAction } from "../types/Book";
+
+export const moveShelf = ({ target, books }: MoveShelfAction) =>
+  `UPDATE bookData SET shelf='${target}' WHERE uuid IN ('${books.join(
+    "', '"
+  )}');`;

middleware/types/Book.ts

@@ -9,3 +9,8 @@ export type Book = {
   contact: string | null;
   shelf: "AVAILABLE" | "FNORD1" | "FNORD2" | "SHARING" | null;
 };
+
+export interface MoveShelfAction {
+  target: Book["shelf"];
+  books: Book["uuid"][];
+}