added borrowable items fetching and date input functionality to HomePage

FrontendV2/src/pages/HomePage.tsx

@@ -7,10 +7,18 @@ import {
   Badge,
   Flex,
   Button,
+  Input,
+  Spinner,
+  VStack,
+  Table,
 } from "@chakra-ui/react";
 import { triggerLogoutAtom, setIsLoggedInAtom } from "@/states/Atoms";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
+import { getBorrowableItems } from "@/utils/Fetcher";
+import { useState } from "react";
+import MyAlert from "@/components/myChakra/MyAlert";
+import { borrowAbleItemsAtom } from "@/states/Atoms";
 
 export interface User {
   username: string;
@@ -21,6 +29,15 @@ export const HomePage = () => {
   const userData = useUserContext();
   const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
   const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
+  const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [isLoadingA, setIsLoadingA] = useState(false);
+
+  // Error handling states
+  const [isError, setIsError] = useState(false);
+  const [errorTitle, setErrorTitle] = useState("");
+  const [errorDescription, setErrorDescription] = useState("");
 
   return (
     <Container maxW="7xl" className="px-6 sm:px-8 pt-10">
@@ -74,6 +91,91 @@ export const HomePage = () => {
           </Button>
         </Flex>
       </Stack>
+      {isError && (
+        <MyAlert
+          status="error"
+          title={errorTitle}
+          description={errorDescription}
+        />
+      )}
+      <Stack as="main">
+        <label htmlFor="startDate">
+          <Text>Startdatum</Text>
+        </label>
+        <Input
+          id="startDate"
+          placeholder="Startdatum"
+          type="datetime-local"
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+        />
+        <label htmlFor="endDate">
+          <Text>Enddatum</Text>
+        </label>
+        <Input
+          id="endDate"
+          placeholder="Enddatum"
+          type="datetime-local"
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+        />
+        <Button
+          onClick={async () => {
+            setIsLoadingA(true);
+            if (!startDate || !endDate) {
+              setErrorTitle("Fehlende Eingaben");
+              setErrorDescription("Bitte Start- und Enddatum angeben.");
+              setIsError(true);
+              setIsLoadingA(false);
+              return;
+            }
+            await getBorrowableItems(startDate, endDate).then((response) => {
+              setIsLoadingA(false);
+              if (response && response.status === "error") {
+                setErrorTitle(response.title || "Fehler");
+                setErrorDescription(
+                  response.description || "Unbekannter Frontend Fehler"
+                );
+                setIsError(true);
+                return;
+              }
+              setBorrowableItems(response.data);
+              console.log(borrowableItems);
+            });
+          }}
+        >
+          Verfügbare Gegenstände anzeigen
+        </Button>
+        {isLoadingA && (
+          <VStack colorPalette="teal">
+            <Spinner color="colorPalette.600" />
+            <Text color="colorPalette.600">Loading...</Text>
+          </VStack>
+        )}
+        {borrowableItems.length > 0 && (
+          <Table.ScrollArea borderWidth="1px" rounded="md" height="160px">
+            <Table.Root size="sm" stickyHeader>
+              <Table.Header>
+                <Table.Row bg="bg.subtle">
+                  <Table.ColumnHeader></Table.ColumnHeader>
+                  <Table.ColumnHeader>Gegenstand</Table.ColumnHeader>
+                </Table.Row>
+              </Table.Header>
+
+              <Table.Body>
+                {borrowableItems.map((item) => (
+                  <Table.Row key={item.id}>
+                    <Table.Cell>
+                      <input type="checkbox" name={item.id} id={item.id} />
+                    </Table.Cell>
+                    <Table.Cell>{item.item_name}</Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table.Root>
+          </Table.ScrollArea>
+        )}
+      </Stack>
     </Container>
   );
 };

FrontendV2/src/states/Atoms.tsx

@@ -3,3 +3,4 @@ import { atom } from "jotai";
 export const testAtom = atom<number>(0);
 export const setIsLoggedInAtom = atom<boolean>(false);
 export const triggerLogoutAtom = atom<boolean>(false);
+export const borrowAbleItemsAtom = atom<any[]>([]);

FrontendV2/src/utils/Fetcher.ts

@@ -0,0 +1,49 @@
+import Cookies from "js-cookie";
+const API_BASE =
+  (import.meta as any).env?.VITE_BACKEND_URL ||
+  import.meta.env.VITE_BACKEND_URL ||
+  "http://localhost:8002";
+
+export const getBorrowableItems = async (
+  startDate: string,
+  endDate: string
+) => {
+  try {
+    const response = await fetch(`${API_BASE}/api/borrowableItems`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({ 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();
+    console.log(data);
+    return {
+      data: data,
+      status: "success",
+      title: null,
+      description: null,
+    };
+  } catch (error) {
+    return {
+      data: null,
+      status: "error",
+      title: "Netzwerkfehler",
+      description:
+        "Es konnte keine Verbindung zum Server hergestellt werden. Bitte überprüfe deine Internetverbindung.",
+    };
+  }
+};