added loan creation functionality and improved error handling in HomePage and Fetcher

FrontendV2/src/pages/HomePage.tsx

@@ -19,6 +19,7 @@ import { getBorrowableItems } from "@/utils/Fetcher";
 import { useState } from "react";
 import MyAlert from "@/components/myChakra/MyAlert";
 import { borrowAbleItemsAtom } from "@/states/Atoms";
+import { createLoan } from "@/utils/Fetcher";
 
 export interface User {
   username: string;
@@ -33,11 +34,21 @@ export const HomePage = () => {
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
   const [isLoadingA, setIsLoadingA] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
   // Error handling states
-  const [isError, setIsError] = useState(false);
+  const [isMsg, setIsMsg] = useState(false);
-  const [errorTitle, setErrorTitle] = useState("");
+  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
-  const [errorDescription, setErrorDescription] = useState("");
+  const [msgTitle, setMsgTitle] = useState("");
+  const [msgDescription, setMsgDescription] = useState("");
+
+  const handleCheckboxChange = (itemId: number) => {
+    setSelectedItems((prevSelected) =>
+      prevSelected.includes(itemId)
+        ? prevSelected.filter((id) => id !== itemId)
+        : [...prevSelected, itemId]
+    );
+  };
 
   return (
     <Container maxW="7xl" className="px-6 sm:px-8 pt-10">
@@ -91,11 +102,11 @@ export const HomePage = () => {
           </Button>
         </Flex>
       </Stack>
-      {isError && (
+      {isMsg && (
         <MyAlert
-          status="error"
+          status={msgStatus}
-          title={errorTitle}
+          title={msgTitle}
-          description={errorDescription}
+          description={msgDescription}
         />
       )}
       <Stack as="main">
@@ -123,23 +134,26 @@ export const HomePage = () => {
           onClick={async () => {
             setIsLoadingA(true);
             if (!startDate || !endDate) {
-              setErrorTitle("Fehlende Eingaben");
+              setMsgStatus("error");
-              setErrorDescription("Bitte Start- und Enddatum angeben.");
+              setMsgTitle("Fehlende Eingaben");
-              setIsError(true);
+              setMsgDescription("Bitte Start- und Enddatum angeben.");
+              setIsMsg(true);
               setIsLoadingA(false);
               return;
             }
             await getBorrowableItems(startDate, endDate).then((response) => {
               setIsLoadingA(false);
               if (response && response.status === "error") {
-                setErrorTitle(response.title || "Fehler");
+                setMsgStatus("error");
-                setErrorDescription(
+                setMsgTitle(response.title || "Fehler");
+                setMsgDescription(
                   response.description || "Unbekannter Frontend Fehler"
                 );
-                setIsError(true);
+                setIsMsg(true);
                 return;
               }
               setBorrowableItems(response.data);
+              setIsMsg(false);
               console.log(borrowableItems);
             });
           }}
@@ -166,7 +180,12 @@ export const HomePage = () => {
                 {borrowableItems.map((item) => (
                   <Table.Row key={item.id}>
                     <Table.Cell>
-                      <input type="checkbox" name={item.id} id={item.id} />
+                      <input
+                        onChange={() => handleCheckboxChange(item.id)}
+                        type="checkbox"
+                        name={item.id}
+                        id={item.id}
+                      />
                     </Table.Cell>
                     <Table.Cell>{item.item_name}</Table.Cell>
                   </Table.Row>
@@ -175,6 +194,29 @@ export const HomePage = () => {
             </Table.Root>
           </Table.ScrollArea>
         )}
+        {selectedItems.length >= 1 && (
+          <Button
+            onClick={() =>
+              createLoan(selectedItems, startDate, endDate).then((response) => {
+                if (response.status === "error") {
+                  setMsgStatus("error");
+                  setMsgTitle(response.title || "Fehler");
+                  setMsgDescription(
+                    response.description || "Unbekannter Frontend Fehler"
+                  );
+                  setIsMsg(true);
+                  return;
+                }
+                setMsgStatus("success");
+                setMsgTitle("Erfolg");
+                setMsgDescription("Gegenstände erfolgreich ausgeliehen.");
+                setIsMsg(true);
+              })
+            }
+          >
+            Gegenstände ausleihen
+          </Button>
+        )}
       </Stack>
     </Container>
   );

FrontendV2/src/utils/Fetcher.ts

@@ -47,3 +47,36 @@ export const getBorrowableItems = async (
     };
   }
 };
+
+export const createLoan = async (
+  itemIds: number[],
+  startDate: string,
+  endDate: string
+) => {
+  const response = await fetch(`${API_BASE}/api/createLoan`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+    },
+    body: JSON.stringify({ items: itemIds, startDate, endDate }),
+  });
+
+  if (!response.ok) {
+    return {
+      data: null,
+      status: "error",
+      title: "Server error",
+      description:
+        "Ein Fehler ist auf dem Server aufgetreten. Manchmal hilft es, die Seite neu zu laden.",
+    };
+  }
+
+  const data = await response.json();
+  return {
+    data: data,
+    status: "success",
+    title: null,
+    description: null,
+  };
+};