fixed assignments view once again

2025-01-21 09:41:27 +00:00
parent c9fb212386
commit 67a4001883
29 changed files with 695 additions and 449 deletions
--- a/client/src/Zustand.ts
+++ b/client/src/Zustand.ts
@@ -2,11 +2,13 @@

 import { create } from "zustand";
 import { persist } from "zustand/middleware";
+import { Task } from "./lib";
+import { Availability } from "./app/admin/(availabilities)/AvailabilityEditor";

 export interface EventData {
 	id: number;
 	date: string;
-	tasks: Partial<Record<string, string | null>>;
+	tasks: { taskID: number; taskName: string; userName: string | null }[];
 	description: string;
 }

@@ -17,6 +19,9 @@ export interface User {

 interface Zustand {
 	user: User | null;
+	tasks?: Task[];
+	availabilities?: Availability[];
+	patch: (zustand?: Partial<Zustand>) => void;
 	reset: (zustand?: Partial<Zustand>) => void;
 }

@@ -26,19 +31,24 @@ const initialState = {

 const zustand = create<Zustand>()(
 	persist(
-		(set) => ({
+		(set, get) => ({
 			...initialState,
-			reset: (newZustand) =>
+			reset: (newZustand) => {
+				console.debug("reset");
 				set({
 					...initialState,
 					...newZustand,
-				}),
+				});
+			},
+			patch: (patch) => set({ ...get(), ...patch }),
 		}),
 		{
 			name: "golunteer-storage",
 			partialize: (state) =>
 				Object.fromEntries(
-					Object.entries(state).filter(([key]) => ["user"].includes(key)),
+					Object.entries(state).filter(([key]) =>
+						["user", "tasksList", "tasksMap"].includes(key),
+					),
 				),
 		},
 	),
--- a/client/src/app/Main.tsx
+++ b/client/src/app/Main.tsx
@@ -33,7 +33,7 @@ export default function Main({ children }: { children: React.ReactNode }) {
 					const response = await welcomeResult.json();

 					if (response.userName !== undefined && response.userName !== "") {
-						zustand.getState().reset({ user: response });
+						zustand.getState().patch({ user: response });

 						loggedIn = true;
 					}
--- a/client/src/app/admin/(availabilities)/Availabilities.tsx
+++ b/client/src/app/admin/(availabilities)/Availabilities.tsx
@@ -1,10 +1,10 @@
-import { color2Tailwind, colors } from "@/components/Colorselector";
-import { apiCall } from "@/lib";
-import { AddLarge, Edit } from "@carbon/icons-react";
+import { colors } from "@/components/Colorselector";
+import { apiCall, getAvailabilities } from "@/lib";
+import { AddLarge, Edit, TrashCan } from "@carbon/icons-react";
 import {
 	Button,
+	ButtonGroup,
 	Checkbox,
-	Chip,
 	Table,
 	TableBody,
 	TableCell,
@@ -18,26 +18,20 @@ import { useState } from "react";
 import AddAvailability from "./AddAvailability";
 import { Availability } from "./AvailabilityEditor";
 import EditAvailability from "./EditAvailability";
+import DeleteConfirmation from "@/components/DeleteConfirmation";
+import AvailabilityChip from "@/components/AvailabilityChip";
+import zustand from "@/Zustand";

 export default function Availabilities() {
 	const [showAddAvailability, setShowAddAvailability] = useState(false);
 	const [editAvailability, setEditAvailability] = useState<Availability>();
+	const [deleteAvailability, setDeleteAvailability] = useState<Availability>();

 	const availabilities = useAsyncList<Availability>({
 		async load() {
-			const result = await apiCall("GET", "availabilities");
-
-			if (result.ok) {
-				const json = await result.json();
-
-				return {
-					items: json.availabilities,
-				};
-			} else {
-				return {
-					items: [],
-				};
-			}
+			return {
+				items: await getAvailabilities(),
+			};
 		},
 		async sort({ items, sortDescriptor }) {
 			return {
@@ -46,7 +40,7 @@ export default function Availabilities() {

 					switch (sortDescriptor.column) {
 						case "text":
-							cmp = a.text.localeCompare(b.text);
+							cmp = a.name.localeCompare(b.name);
 							break;
 						case "enabled":
 							if (a.enabled && !b.enabled) {
@@ -76,6 +70,26 @@ export default function Availabilities() {
 		},
 	});

+	function reload() {
+		// clear the availabilites in the zustand
+		zustand.getState().patch({ availabilities: undefined });
+
+		// refresh the availabilites
+		availabilities.reload();
+	}
+
+	async function sendDeleteAvailability(id: number | undefined) {
+		if (id !== undefined) {
+			const result = await apiCall("DELETE", "availabilities", { id });
+
+			if (result.ok) {
+				reload();
+
+				setDeleteAvailability(undefined);
+			}
+		}
+	}
+
 	const topContent = (
 		<>
 			<Button
@@ -101,10 +115,7 @@ export default function Availabilities() {
 			>
 				<TableHeader>
 					<TableColumn allowsSorting key="userName">
-						Text
-					</TableColumn>
-					<TableColumn allowsSorting key="color" align="center">
-						Color
+						Name
 					</TableColumn>
 					<TableColumn allowsSorting key="admin" align="center">
 						Enabled
@@ -115,35 +126,36 @@ export default function Availabilities() {
 				</TableHeader>
 				<TableBody items={availabilities.items}>
 					{(availability) => (
-						<TableRow key={availability.text}>
-							<TableCell
-								className={`text-${color2Tailwind(availability.color)}`}
-							>
-								{availability.text}
-							</TableCell>
+						<TableRow key={availability.name}>
 							<TableCell>
-								<Chip
-									classNames={{
-										base: `bg-${color2Tailwind(availability.color)}`,
-									}}
-								>
-									{availability.color}
-								</Chip>
+								<AvailabilityChip availability={availability} />
 							</TableCell>
 							<TableCell>
 								<Checkbox isSelected={availability.enabled} />
 							</TableCell>
 							<TableCell>
-								<Button
-									isIconOnly
-									variant="light"
-									size="sm"
-									onPress={() => setEditAvailability(availability)}
-								>
-									<Tooltip content="Edit availability">
-										<Edit />
-									</Tooltip>
-								</Button>
+								<ButtonGroup>
+									<Button
+										isIconOnly
+										variant="light"
+										size="sm"
+										onPress={() => setEditAvailability(availability)}
+									>
+										<Tooltip content="Edit availability">
+											<Edit />
+										</Tooltip>
+									</Button>
+									<Button
+										isIconOnly
+										variant="light"
+										size="sm"
+										onPress={() => setDeleteAvailability(availability)}
+										color="danger"
+										className="text-danger"
+									>
+										<TrashCan />
+									</Button>
+								</ButtonGroup>
 							</TableCell>
 						</TableRow>
 					)}
@@ -153,7 +165,7 @@ export default function Availabilities() {
 			<AddAvailability
 				isOpen={showAddAvailability}
 				onOpenChange={setShowAddAvailability}
-				onSuccess={availabilities.reload}
+				onSuccess={reload}
 			/>

 			<EditAvailability
@@ -162,8 +174,25 @@ export default function Availabilities() {
 				onOpenChange={(isOpen) =>
 					!isOpen ? setEditAvailability(undefined) : null
 				}
-				onSuccess={availabilities.reload}
+				onSuccess={reload}
 			/>
+
+			<DeleteConfirmation
+				isOpen={!!deleteAvailability}
+				onOpenChange={(isOpen) =>
+					!isOpen ? setDeleteAvailability(undefined) : null
+				}
+				header="Delete Availability"
+				onDelete={() => sendDeleteAvailability(deleteAvailability?.id)}
+			>
+				{!!deleteAvailability ? (
+					<>
+						The availability{" "}
+						<AvailabilityChip availability={deleteAvailability} /> will be
+						deleted.
+					</>
+				) : null}
+			</DeleteConfirmation>
 		</div>
 	);
 }
--- a/client/src/app/admin/(availabilities)/AvailabilityEditor.tsx
+++ b/client/src/app/admin/(availabilities)/AvailabilityEditor.tsx
@@ -9,10 +9,10 @@ import {
 	ModalFooter,
 	ModalHeader,
 } from "@heroui/react";
-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";

 export interface Availability {
-	text: string;
+	name: string;
 	color: string;
 	id: number | undefined;
 	enabled: boolean;
@@ -26,13 +26,22 @@ export default function AvailabilityEditor(props: {
 	onOpenChange?: (isOpen: boolean) => void;
 	onSubmit?: (e: Availability) => void;
 }) {
-	const [text, setText] = useState(props.value?.text ?? "");
+	const [name, setName] = useState(props.value?.name ?? "");
 	const [color, setColor] = useState(props.value?.color ?? "Red");
 	const [enabled, setEnabled] = useState(props.value?.enabled ?? true);

+	// clear the inputs on closing
+	useEffect(() => {
+		if (!props.isOpen) {
+			setName("");
+			setColor("");
+			setEnabled(true);
+		}
+	}, [props.isOpen]);
+
 	function submit(e: FormEvent<HTMLFormElement>) {
 		const formData = Object.fromEntries(new FormData(e.currentTarget)) as {
-			text: string;
+			name: string;
 			color: string;
 			enabled: string;
 		};
@@ -64,10 +73,10 @@ export default function AvailabilityEditor(props: {
 					</ModalHeader>
 					<ModalBody>
 						<Input
-							value={text}
-							onValueChange={setText}
-							name="text"
-							label="Text"
+							value={name}
+							onValueChange={setName}
+							name="name"
+							label="Name"
 							isRequired
 							variant="bordered"
 						/>
--- a/client/src/app/admin/(availabilities)/EditAvailability.tsx
+++ b/client/src/app/admin/(availabilities)/EditAvailability.tsx
@@ -2,6 +2,7 @@ import { apiCall } from "@/lib";
 import AvailabilityEditor, { Availability } from "./AvailabilityEditor";
 import { Button } from "@heroui/react";
 import { Renew } from "@carbon/icons-react";
+import AvailabilityChip from "@/components/AvailabilityChip";

 export default function EditAvailability(props: {
 	value: Availability | undefined;
@@ -24,9 +25,9 @@ export default function EditAvailability(props: {
 			header={
 				<>
 					Edit Availability{" "}
-					<span className="font-numbers font-normal italic">
-						&quot;{props.value?.text}&quot;
-					</span>
+					{!!props.value ? (
+						<AvailabilityChip availability={props.value} className="ms-4" />
+					) : null}
 				</>
 			}
 			footer={
--- a/client/src/app/admin/(tasks)/AddTask.tsx
+++ b/client/src/app/admin/(tasks)/AddTask.tsx
@@ -1,5 +1,5 @@
-import { apiCall } from "@/lib";
-import TaskEditor, { Task } from "./TaskEditor";
+import { apiCall, Task } from "@/lib";
+import TaskEditor from "./TaskEditor";
 import { Button } from "@heroui/react";
 import { AddLarge } from "@carbon/icons-react";

--- a/client/src/app/admin/(tasks)/EditTask.tsx
+++ b/client/src/app/admin/(tasks)/EditTask.tsx
@@ -20,12 +20,12 @@ export default function EditTask(props: {

 	return (
 		<TaskEditor
-			key={props.value?.id}
+			key={props.value?.name}
 			header={
 				<>
 					Edit Task{" "}
 					<span className="font-numbers font-normal italic">
-						&quot;{props.value?.text}&quot;
+						&quot;{props.value?.name}&quot;
 					</span>
 				</>
 			}
--- a/client/src/app/admin/(tasks)/TaskEditor.tsx
+++ b/client/src/app/admin/(tasks)/TaskEditor.tsx
@@ -9,7 +9,7 @@ import {
 	ModalFooter,
 	ModalHeader,
 } from "@heroui/react";
-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";

 export default function TaskEditor(props: {
 	header: React.ReactNode;
@@ -19,13 +19,20 @@ export default function TaskEditor(props: {
 	onOpenChange?: (isOpen: boolean) => void;
 	onSubmit?: (e: Task) => void;
 }) {
-	const [text, setText] = useState(props.value?.text ?? "");
+	const [name, setName] = useState(props.value?.name ?? "");
 	const [enabled, setEnabled] = useState(props.value?.enabled ?? true);

+	// clear the inputs on closing
+	useEffect(() => {
+		if (!props.isOpen) {
+			setName("");
+			setEnabled(true);
+		}
+	}, [props.isOpen]);
+
 	function submit(e: FormEvent<HTMLFormElement>) {
 		const formData = Object.fromEntries(new FormData(e.currentTarget)) as {
-			text: string;
-			color: string;
+			name: string;
 			enabled: string;
 		};

@@ -56,10 +63,10 @@ export default function TaskEditor(props: {
 					</ModalHeader>
 					<ModalBody>
 						<Input
-							value={text}
-							onValueChange={setText}
-							name="text"
-							label="Text"
+							value={name}
+							onValueChange={setName}
+							name="name"
+							label="Name"
 							isRequired
 							variant="bordered"
 						/>
--- a/client/src/app/admin/(tasks)/Tasks.tsx
+++ b/client/src/app/admin/(tasks)/Tasks.tsx
@@ -1,7 +1,8 @@
 import { apiCall, Task } from "@/lib";
-import { AddLarge, Edit } from "@carbon/icons-react";
+import { AddLarge, Edit, TrashCan } from "@carbon/icons-react";
 import {
 	Button,
+	ButtonGroup,
 	Checkbox,
 	Table,
 	TableBody,
@@ -15,20 +16,23 @@ import { useAsyncList } from "@react-stately/data";
 import { useState } from "react";
 import AddTask from "./AddTask";
 import EditTask from "./EditTask";
+import DeleteConfirmation from "@/components/DeleteConfirmation";
+import zustand from "@/Zustand";

 export default function Tasks() {
 	const [showAddTask, setShowAddTask] = useState(false);
 	const [editTask, setEditTask] = useState<Task>();
+	const [deleteTask, setDeleteTask] = useState<Task>();

 	const tasks = useAsyncList<Task>({
 		async load() {
 			const result = await apiCall("GET", "tasks");

 			if (result.ok) {
-				const json = await result.json();
+				const json = (await result.json()) as Task[];

 				return {
-					items: json.tasks,
+					items: json,
 				};
 			} else {
 				return {
@@ -43,7 +47,7 @@ export default function Tasks() {

 					switch (sortDescriptor.column) {
 						case "text":
-							cmp = a.text.localeCompare(b.text);
+							cmp = a.name.localeCompare(b.name);
 							break;
 						case "enabled":
 							if (a.enabled && !b.enabled) {
@@ -64,6 +68,25 @@ export default function Tasks() {
 		},
 	});

+	function reload() {
+		// clear the zustand
+		zustand.getState().patch({ tasks: undefined });
+
+		// reload the tasks
+		tasks.reload();
+	}
+
+	async function sendDeleteTask(id: number | undefined) {
+		if (id !== undefined) {
+			const result = await apiCall("DELETE", "tasks", { id });
+
+			if (result.ok) {
+				tasks.reload();
+				setDeleteTask(undefined);
+			}
+		}
+	}
+
 	const topContent = (
 		<>
 			<Button
@@ -89,7 +112,7 @@ export default function Tasks() {
 			>
 				<TableHeader>
 					<TableColumn allowsSorting key="userName">
-						Text
+						Name
 					</TableColumn>
 					<TableColumn allowsSorting key="admin" align="center">
 						Enabled
@@ -101,21 +124,33 @@ export default function Tasks() {
 				<TableBody items={tasks.items}>
 					{(task) => (
 						<TableRow key={task.id}>
-							<TableCell>{task.text}</TableCell>
+							<TableCell>{task.name}</TableCell>
 							<TableCell>
 								<Checkbox isSelected={task.enabled} />
 							</TableCell>
 							<TableCell>
-								<Button
-									isIconOnly
-									variant="light"
-									size="sm"
-									onPress={() => setEditTask(task)}
-								>
-									<Tooltip content="Edit task">
-										<Edit />
-									</Tooltip>
-								</Button>
+								<ButtonGroup>
+									<Button
+										isIconOnly
+										variant="light"
+										size="sm"
+										onPress={() => setEditTask(task)}
+									>
+										<Tooltip content="Edit task">
+											<Edit />
+										</Tooltip>
+									</Button>
+									<Button
+										isIconOnly
+										variant="light"
+										size="sm"
+										onPress={() => setDeleteTask(task)}
+										color="danger"
+										className="text-danger"
+									>
+										<TrashCan />
+									</Button>
+								</ButtonGroup>
 							</TableCell>
 						</TableRow>
 					)}
@@ -125,15 +160,32 @@ export default function Tasks() {
 			<AddTask
 				isOpen={showAddTask}
 				onOpenChange={setShowAddTask}
-				onSuccess={tasks.reload}
+				onSuccess={reload}
 			/>

 			<EditTask
 				value={editTask}
 				isOpen={!!editTask}
 				onOpenChange={(isOpen) => (!isOpen ? setEditTask(undefined) : null)}
-				onSuccess={tasks.reload}
+				onSuccess={reload}
 			/>
+
+			<DeleteConfirmation
+				isOpen={!!deleteTask}
+				onOpenChange={(isOpen) => (!isOpen ? setDeleteTask(undefined) : null)}
+				header="Delete Task"
+				onDelete={() => sendDeleteTask(deleteTask?.id)}
+			>
+				{!!deleteTask ? (
+					<>
+						The task{" "}
+						<span className="font-numbers text-accent-1">
+							{deleteTask.name}
+						</span>{" "}
+						will be deleted.
+					</>
+				) : null}
+			</DeleteConfirmation>
 		</div>
 	);
 }
--- a/client/src/app/assignments/page.tsx
+++ b/client/src/app/assignments/page.tsx
@@ -1,9 +1,9 @@
 "use client";

 import AddEvent from "@/components/Event/AddEvent";
-import EditEvent, { EventSubmitData } from "@/components/Event/EditEvent";
+import EditEvent from "@/components/Event/EditEvent";
 import LocalDate from "@/components/LocalDate";
-import { apiCall, getTaskMap } from "@/lib";
+import { apiCall, getTasks } from "@/lib";
 import { EventData } from "@/Zustand";
 import {
 	Add,
@@ -31,6 +31,7 @@ import {
 	TableBody,
 	TableCell,
 	TableColumn,
+	TableColumnProps,
 	TableHeader,
 	TableRow,
 	Tooltip,
@@ -46,20 +47,30 @@ export default function AdminPanel() {
 	const [deleteEvent, setDeleteEvent] = useState<EventData | undefined>();

 	// get the available tasks and craft them into the headers
-	const headers = useAsyncList({
+	const headers = useAsyncList<{
+		key: string | number;
+		label: string;
+		align?: string;
+	}>({
 		async load() {
-			const tasks = await getTaskMap();
+			const tasks = await getTasks();

-			return {
+			const headers = {
 				items: [
 					{ key: "date", label: "Date" },
 					{ key: "description", label: "Description" },
-					...Object.values(tasks)
+					...tasks
 						.filter((task) => task.enabled)
-						.map((task) => ({ label: task.text, key: task.text })),
-					{ key: "actions", label: "Action" },
+						.map((task) => ({
+							label: task.name,
+							key: task.id ?? -1,
+							align: "center",
+						})),
+					{ key: "actions", label: "Action", align: "center" },
 				],
 			};
+
+			return headers;
 		},
 	});

@@ -72,7 +83,9 @@ export default function AdminPanel() {
 			);

 			if (result.ok) {
-				return { items: await result.json() };
+				const data = await result.json();
+
+				return { items: data };
 			} else {
 				return { items: [] };
 			}
@@ -145,7 +158,7 @@ export default function AdminPanel() {
 									<Edit />
 								</Tooltip>
 							</Button>
-							<Button>
+							<Button onPress={() => alert("implement")}>
 								<Tooltip content="Duplicate event">
 									<Copy />
 								</Tooltip>
@@ -165,13 +178,13 @@ export default function AdminPanel() {
 				);
 			default:
 				// only show the selector, if the task is needed for the event
-				if (Object.keys(event.tasks).includes(key as string)) {
+				if (event.tasks?.some((t) => t.taskID == key)) {
 					return (
 						<Dropdown>
 							<DropdownTrigger>
-								{!!event.tasks[key as string] ? (
+								{!!event.tasks.find((t) => t.taskID === key)?.userName ? (
 									<Chip onClose={() => alert("implement")}>
-										{event.tasks[key as string]}
+										{event.tasks.find((t) => t.taskID === key)?.taskName}
 									</Chip>
 								) : (
 									<Button isIconOnly size="sm" radius="md" variant="flat">
@@ -203,17 +216,6 @@ export default function AdminPanel() {
 		}
 	}

-	async function updateEvent(data: EventSubmitData) {
-		const result = await apiCall("PATCH", "events", undefined, data);
-
-		if (result.ok) {
-			// clear the selected-event to hide the modal
-			setEditEvent(undefined);
-
-			events.reload();
-		}
-	}
-
 	const topContent = (
 		<div>
 			<Button
@@ -251,7 +253,7 @@ export default function AdminPanel() {
 						<TableColumn
 							allowsSorting={task.key === "date"}
 							key={task.key}
-							className=""
+							align={task.align as TableColumnProps<string>["align"]}
 						>
 							{task.label}
 						</TableColumn>
@@ -277,8 +279,11 @@ export default function AdminPanel() {
 			<EditEvent
 				isOpen={editEvent !== undefined}
 				onOpenChange={(isOpen) => (!isOpen ? setEditEvent(undefined) : null)}
-				onSubmit={updateEvent}
-				initialState={editEvent}
+				onSuccess={() => {
+					setEditEvent(undefined);
+					events.reload();
+				}}
+				value={editEvent}
 				footer={
 					<Button
 						color="primary"
--- a/client/src/components/AvailabilityChip.tsx
+++ b/client/src/components/AvailabilityChip.tsx
@@ -0,0 +1,23 @@
+import { Chip, ChipProps } from "@heroui/react";
+import { color2Tailwind } from "./Colorselector";
+import { Availability } from "@/app/admin/(availabilities)/AvailabilityEditor";
+
+export default function AvailabilityChip({
+	availability,
+	className,
+}: {
+	availability: Availability;
+	className?: string;
+	classNames?: ChipProps["classNames"];
+}) {
+	return (
+		<Chip
+			classNames={{
+				base: `bg-${color2Tailwind(availability.color)}`,
+			}}
+			className={className}
+		>
+			{availability.name}
+		</Chip>
+	);
+}
--- a/client/src/components/DeleteConfirmation.tsx
+++ b/client/src/components/DeleteConfirmation.tsx
@@ -0,0 +1,49 @@
+import {
+	Button,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+} from "@heroui/react";
+import React from "react";
+import { TrashCan } from "@carbon/icons-react";
+
+export default function DeleteConfirmation(props: {
+	isOpen: boolean;
+	onOpenChange: (isOpen: boolean) => void;
+	children: React.ReactNode;
+	header: React.ReactNode;
+	onDelete?: () => void;
+}) {
+	return (
+		<Modal
+			isOpen={props.isOpen}
+			onOpenChange={(isOpen) => {
+				props.onOpenChange(isOpen);
+			}}
+			shadow={"none" as "sm"}
+			backdrop="blur"
+			className="bg-accent-5"
+		>
+			<ModalContent>
+				<ModalHeader>
+					<h1 className="text-2xl">{props.header}</h1>
+				</ModalHeader>
+				<ModalBody>{props.children}</ModalBody>
+				<ModalFooter>
+					<Button variant="bordered" onPress={() => props.onOpenChange(false)}>
+						Cancel
+					</Button>
+					<Button
+						startContent={<TrashCan />}
+						color="danger"
+						onPress={() => props.onDelete?.()}
+					>
+						Delete event
+					</Button>
+				</ModalFooter>
+			</ModalContent>
+		</Modal>
+	);
+}
--- a/client/src/components/Event/AddEvent.tsx
+++ b/client/src/components/Event/AddEvent.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@heroui/react";
-import EditEvent, { EventSubmitData } from "./EditEvent";
 import { apiCall } from "@/lib";
 import { AddLarge } from "@carbon/icons-react";
+import EventEditor, { EventSubmitData } from "./EventEditor";

 export default function AddEvent(props: {
 	className?: string;
@@ -20,8 +20,9 @@ export default function AddEvent(props: {
 	}

 	return (
-		<EditEvent
+		<EventEditor
 			{...props}
+			header="Add Event"
 			onSubmit={(data) => void addEvent(data)}
 			footer={
 				<Button
@@ -33,8 +34,6 @@ export default function AddEvent(props: {
 					Add
 				</Button>
 			}
-		>
-			Add Event
-		</EditEvent>
+		/>
 	);
 }
--- a/client/src/components/Event/EditEvent.tsx
+++ b/client/src/components/Event/EditEvent.tsx
@@ -1,202 +1,35 @@
-import React, { useEffect, useReducer, useState } from "react";
-import {
-	getLocalTimeZone,
-	now,
-	parseDateTime,
-	toZoned,
-	ZonedDateTime,
-} from "@internationalized/date";
-import {
-	Checkbox,
-	CheckboxGroup,
-	DatePicker,
-	Form,
-	Modal,
-	ModalBody,
-	ModalContent,
-	ModalFooter,
-	ModalHeader,
-	Spinner,
-	Textarea,
-} from "@heroui/react";
-import { getTaskMap, Task } from "@/lib";
+import React from "react";
+import { apiCall } from "@/lib";
 import { EventData } from "@/Zustand";
-
-export interface EventSubmitData {
-	id: number;
-	date: string;
-	description: string;
-	tasks: number[];
-}
-
-interface State {
-	date: ZonedDateTime;
-	description: string;
-	tasks: string[];
-}
+import EventEditor, { EventSubmitData } from "./EventEditor";

 export default function EditEvent(props: {
 	children: React.ReactNode;
 	footer: React.ReactNode;
-	initialState?: EventData;
+	value?: EventData;
 	className?: string;
 	isOpen: boolean;
 	onOpenChange: (isOpen: boolean) => void;
-	onSubmit?: (data: EventSubmitData) => void;
+	onSuccess?: () => void;
 }) {
-	const [reverseTasksMap, setReverseTasksMap] = useState<
-		Record<string, string>
-	>({});
-	const [state, dispatchState] = useReducer(
-		dispatchStateHandler,
-		dispatchStateHandler({} as State, { action: "reset" }),
-	);
-	const [tasksMap, setTasksMap] = useState<Record<number, Task>>({});
-
-	// initialize the state
-	function initialState(): State {
-		if (props.initialState !== undefined && reverseTasksMap !== undefined) {
-			const { description, date, tasks } = props.initialState;
-
-			return {
-				description,
-				date: toZoned(parseDateTime(date), getLocalTimeZone()),
-				tasks: Object.keys(tasks).map((task) => reverseTasksMap[task]),
-			};
-		} else {
-			return {
-				date: now(getLocalTimeZone()),
-				description: "",
-				tasks: [],
-			};
-		}
-	}
-
-	// update the state if the initialState-prop changes
-	useEffect(() => {
-		if (props.initialState !== undefined) {
-			dispatchState({ action: "reset" });
-		}
-	}, [props.initialState]);
-
-	// handle dispatch-calls
-	function dispatchStateHandler(
-		state: State,
-		args: { action: "patch" | "reset"; value?: Partial<State> },
-	): State {
-		if (args.action === "reset") {
-			return initialState();
-		} else {
-			return {
-				...state,
-				...args.value,
-			};
-		}
-	}
-
-	// shortcut for patching the state
-	function patchState(values: Partial<State>) {
-		dispatchState({ action: "patch", value: values });
-	}
-
-	// handle state dispatches
-	// get the available tasks and initialize the state with them
-	useEffect(() => {
-		(async () => {
-			const tasks = await getTaskMap();
-
-			setTasksMap(tasks);
-
-			setReverseTasksMap(
-				Object.fromEntries(
-					Object.entries(tasks).map(([id, task]) => {
-						return [task.text, id];
-					}),
-				),
-			);
-		})();
-	}, []);
-
 	// sends the patch-event-request to the backend
-	function patchEvent() {
-		if (props.initialState !== undefined) {
-			const { description, tasks, date } = state;
+	async function patchEvent(data: EventSubmitData) {
+		const result = await apiCall("PATCH", "events", undefined, data);

-			const data: EventSubmitData = {
-				id: props.initialState?.id,
-				description,
-				tasks: tasks.map((task) => parseInt(task)),
-				date: date.toAbsoluteString().slice(0, -1),
-			};
-
-			props.onSubmit?.(data);
+		if (result.ok) {
+			props.onSuccess?.();
 		}
 	}

 	return (
-		<Modal
+		<EventEditor
+			value={props.value}
+			key={props.value?.id}
+			header="Edit Event"
 			isOpen={props.isOpen}
-			shadow={"none" as "sm"} // somehow "none" isn't allowed
 			onOpenChange={props.onOpenChange}
-			backdrop="blur"
-			classNames={{
-				base: "bg-accent-5 ",
-			}}
-		>
-			<Form
-				validationBehavior="native"
-				onSubmit={(e) => {
-					e.preventDefault();
-					void patchEvent();
-				}}
-			>
-				<ModalContent>
-					<ModalHeader>
-						<h1 className="text-center text-2xl">{props.children}</h1>
-					</ModalHeader>
-
-					<ModalBody>
-						<DatePicker
-							isRequired
-							label="Event date"
-							name="date"
-							variant="bordered"
-							hideTimeZone
-							granularity="minute"
-							value={state.date}
-							onChange={(date) => (!!date ? patchState({ date }) : null)}
-						/>
-						<Textarea
-							variant="bordered"
-							placeholder="Description"
-							name="description"
-							value={state.description}
-							onValueChange={(description) => patchState({ description })}
-						/>
-						<CheckboxGroup
-							name="tasks"
-							value={state.tasks}
-							onValueChange={(tasks) => patchState({ tasks })}
-							validate={(value) =>
-								value.length > 0 ? true : "Atleast one task must be selected"
-							}
-						>
-							{tasksMap !== undefined ? (
-								Object.entries(tasksMap)
-									.filter(([, task]) => task.enabled)
-									.map(([id, task]) => (
-										<div key={id}>
-											<Checkbox value={id}>{task.text}</Checkbox>
-										</div>
-									))
-							) : (
-								<Spinner label="Loading" />
-							)}
-						</CheckboxGroup>
-					</ModalBody>
-					<ModalFooter>{props.footer}</ModalFooter>
-				</ModalContent>
-			</Form>
-		</Modal>
+			footer={props.footer}
+			onSubmit={patchEvent}
+		/>
 	);
 }
--- a/client/src/components/Event/EventEditor.tsx
+++ b/client/src/components/Event/EventEditor.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from "react";
+import {
+	getLocalTimeZone,
+	now,
+	parseAbsoluteToLocal,
+} from "@internationalized/date";
+import {
+	Checkbox,
+	CheckboxGroup,
+	DatePicker,
+	DateValue,
+	Form,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	Spinner,
+	Textarea,
+} from "@heroui/react";
+import zustand, { EventData } from "@/Zustand";
+
+export interface EventSubmitData {
+	id: number;
+	date: string;
+	description: string;
+	tasks: number[];
+}
+
+export default function EventEditor(props: {
+	header: React.ReactNode;
+	footer: React.ReactNode;
+	value?: EventData;
+	className?: string;
+	isOpen: boolean;
+	onOpenChange: (isOpen: boolean) => void;
+	onSubmit?: (data: EventSubmitData) => void;
+}) {
+	const [date, setDate] = useState<DateValue>(
+		!!props.value?.date
+			? parseAbsoluteToLocal(props.value?.date)
+			: now(getLocalTimeZone()),
+	);
+	const [description, setDescription] = useState(
+		props.value?.description ?? "",
+	);
+	const [eventTasks, setEventTasks] = useState<string[]>(
+		props.value?.tasks.map((k) => k.taskID.toString()) ?? [],
+	);
+	const tasks = zustand((state) => state.tasks);
+
+	function onSubmit() {
+		if (!!props.onSubmit) {
+			props.onSubmit({
+				id: props.value?.id ?? -1,
+				date: date.toAbsoluteString(),
+				description,
+				tasks: eventTasks.map((t) => parseInt(t)),
+			});
+		}
+	}
+
+	return (
+		<Modal
+			isOpen={props.isOpen}
+			shadow={"none" as "sm"} // somehow "none" isn't allowed
+			onOpenChange={props.onOpenChange}
+			backdrop="blur"
+			classNames={{
+				base: "bg-accent-5 ",
+			}}
+		>
+			<Form
+				validationBehavior="native"
+				onSubmit={(e) => {
+					e.preventDefault();
+					onSubmit();
+				}}
+			>
+				<ModalContent>
+					<ModalHeader>
+						<h1 className="text-center text-2xl">{props.header}</h1>
+					</ModalHeader>
+
+					<ModalBody>
+						<DatePicker
+							isRequired
+							label="Event date"
+							name="date"
+							variant="bordered"
+							hideTimeZone
+							granularity="minute"
+							value={date}
+							onChange={setDate}
+						/>
+						<Textarea
+							variant="bordered"
+							placeholder="Description"
+							name="description"
+							value={description}
+							onValueChange={setDescription}
+						/>
+						<CheckboxGroup
+							name="tasks"
+							value={eventTasks}
+							onValueChange={setEventTasks}
+							validate={(value) =>
+								value.length > 0 ? true : "Atleast one task must be selected"
+							}
+						>
+							{!!tasks ? (
+								tasks
+									?.filter((task) => task.enabled)
+									.map((task) => (
+										<div key={task.id}>
+											<Checkbox value={task.id?.toString()}>
+												{task.name}
+											</Checkbox>
+										</div>
+									))
+							) : (
+								<Spinner label="Loading" />
+							)}
+						</CheckboxGroup>
+					</ModalBody>
+					<ModalFooter>{props.footer}</ModalFooter>
+				</ModalContent>
+			</Form>
+		</Modal>
+	);
+}
--- a/client/src/components/LocalDate.tsx
+++ b/client/src/components/LocalDate.tsx
@@ -1,7 +1,7 @@
 "use local";

 import { DateFormatter } from "@/lib";
-import { getLocalTimeZone, parseDateTime } from "@internationalized/date";
+import { parseAbsoluteToLocal } from "@internationalized/date";
 import { useLocale } from "@react-aria/i18n";

 export default function LocalDate(props: {
@@ -14,9 +14,7 @@ export default function LocalDate(props: {
 	return (
 		<span className={props.className}>
 			{props.children !== undefined
-				? formatter.format(
-						parseDateTime(props.children).toDate(getLocalTimeZone()),
-					)
+				? formatter.format(parseAbsoluteToLocal(props.children).toDate())
 				: ""}
 		</span>
 	);
--- a/client/src/lib.ts
+++ b/client/src/lib.ts
@@ -1,4 +1,6 @@
 import { DateFormatter as IntlDateFormatter } from "@internationalized/date";
+import zustand from "./Zustand";
+import { Availability } from "./app/admin/(availabilities)/AvailabilityEditor";

 type QueryParams = Record<string, string | { toString(): string }>;

@@ -95,18 +97,55 @@ export function vaidatePassword(password: string): string[] {

 export interface Task {
 	id: number | undefined;
-	text: string;
+	name: string;
 	enabled: boolean;
 }

-export async function getTaskMap(): Promise<Record<number, Task>> {
-	const result = await apiCall<Task[]>("GET", "tasks", { map: true });
+export async function getTask(name: string): Promise<Task | undefined> {
+	// get the tasks
+	const tasks = await getTasks();

-	if (result.ok) {
-		const tasks = await result.json();
+	return tasks.find((t) => t.name === name);
+}

-		return tasks;
+export async function getTasks(): Promise<Task[]> {
+	// check wether it is cached in zustand
+	const state = zustand.getState();
+
+	if (!!state.tasks) {
+		return state.tasks;
 	} else {
-		return {};
+		const result = await apiCall<Task[]>("GET", "tasks");
+
+		if (result.ok) {
+			const tasks = (await result.json()) as Task[];
+
+			state.patch({ tasks: tasks });
+
+			return tasks;
+		} else {
+			return [];
+		}
+	}
+}
+
+export async function getAvailabilities(): Promise<Availability[]> {
+	// check wether it is cached in zustand
+	const state = zustand.getState();
+
+	if (!!state.availabilities) {
+		return state.availabilities;
+	} else {
+		const result = await apiCall<Task[]>("GET", "availabilities");
+
+		if (result.ok) {
+			const tasks = await result.json();
+
+			state.patch({ availabilities: tasks });
+
+			return tasks;
+		} else {
+			return [];
+		}
 	}
 }