started working on the backend

client/src/app/Overview.tsx

@@ -7,10 +7,25 @@ import AddEvent from "../components/Event/AddEvent";
 import zustand from "../Zustand";
 import { Button } from "@nextui-org/button";
 import AssignmentTable from "@/components/Event/AssignmentTable";
+import { useAsyncList } from "@react-stately/data";
+import { apiCall } from "@/lib";
 
 export default function EventVolunteer() {
 	const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);
 
+	// fetch the events from the server
+	useAsyncList({
+		load: async () => {
+			const data = await apiCall("GET", "events");
+
+			console.debug(await data.json());
+
+			return {
+				items: [],
+			};
+		},
+	});
+
 	return (
 		<div className="relative flex-1 p-4">
 			<h2 className="mb-4 text-center text-4xl">Overview</h2>

client/src/app/globals.css

@@ -40,8 +40,4 @@
 	h6 {
 		@apply font-headline text-highlight;
 	}
-
-	input {
-		@apply border-2 border-accent-1 bg-transparent;
-	}
 }

client/src/app/page.tsx

@@ -1,5 +1,54 @@
-import EventVolunteer from "./Overview";
+"use client";
+
+import { Input } from "@nextui-org/input";
+import { useState } from "react";
+import { ViewFilled, ViewOffFilled } from "@carbon/icons-react";
+import { Switch } from "@nextui-org/switch";
+import { Button } from "@nextui-org/button";
+import { Form } from "@nextui-org/form";
 
 export default function Home() {
-	return <EventVolunteer />;
+	const [visibility, setVisibility] = useState(false);
+
+	// return <EventVolunteer />;
+	return (
+		<div>
+			<h2 className="mb-4 text-center text-4xl">Login</h2>
+			<Form
+				validationBehavior="native"
+				className="flex flex-col items-center gap-2"
+				onSubmit={(e) => e.preventDefault()}
+			>
+				<Input
+					isRequired
+					type="user"
+					label="Name"
+					name="username"
+					variant="bordered"
+					className="max-w-xs"
+				/>
+				<Input
+					isRequired
+					label="Password"
+					name="password"
+					autoComplete="current-password"
+					endContent={
+						<Switch
+							className="my-auto"
+							startContent={<ViewFilled />}
+							endContent={<ViewOffFilled />}
+							onValueChange={setVisibility}
+							isSelected={visibility}
+						/>
+					}
+					type={visibility ? "text" : "password"}
+					variant="bordered"
+					className="max-w-xs"
+				/>
+				<Button className="w-full max-w-xs" color="primary" type="submit">
+					Login
+				</Button>
+			</Form>
+		</div>
+	);
 }

client/src/lib.ts

@@ -0,0 +1,56 @@
+type QueryParams = Record<string, string | { toString(): string }>;
+
+export type APICallResult<T extends object> = Response & { json: () => Promise<T> };
+
+export async function apiCall<K extends object>(
+	method: "GET",
+	api: string,
+	params?: QueryParams
+): Promise<APICallResult<K>>;
+export async function apiCall<K extends object>(
+	method: "POST" | "PATCH",
+	api: string,
+	params?: QueryParams,
+	body?: object
+): Promise<APICallResult<K>>;
+export async function apiCall<K extends object>(
+	method: "DELETE",
+	api: string,
+	params?: QueryParams,
+	body?: object
+): Promise<APICallResult<K>>;
+export async function apiCall<K extends object>(
+	method: "GET" | "POST" | "PATCH" | "DELETE",
+	api: string,
+	params?: QueryParams,
+	body?: object
+): Promise<APICallResult<K>> {
+	let url = window.origin + "/api/" + api;
+
+	if (params) {
+		const urlsearchparams = new URLSearchParams(
+			Object.fromEntries(
+				Object.entries(params).map(([key, value]): [string, string] => {
+					if (typeof value !== "string") {
+						return [key, value.toString()];
+					} else {
+						return [key, value];
+					}
+				})
+			)
+		);
+
+		url += "?" + urlsearchparams.toString();
+	}
+
+	const response = await fetch(url, {
+		headers: {
+			"Content-Type": "application/json; charset=UTF-8"
+		},
+		credentials: "include",
+		method,
+		body: body !== undefined ? JSON.stringify(body) : undefined
+	});
+
+	return response;
+}