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>
   );
 };