added zustand for state managing

client/src/app/components/Event/AddEvent.tsx

@@ -1,25 +1,26 @@
 import { useState } from "react";
 import CheckBox from "../CheckBox";
-import { Task } from "./Event";
 import { AddLarge } from "@carbon/icons-react";
 import Button from "../Button";
+import zustand, { EventData, ISODate, Task, Tasks } from "../Zustand";
 
 interface state {
-	date: Date;
+	date: string;
 	description: string;
-	tasks: string[];
+	tasks: Task[];
 }
 
-export default function AddEvent(props: { className?: string }) {
-	const availableTasks = Object.keys(Task).filter((tt) => isNaN(Number(tt)));
-
+export default function AddEvent(props: {
+	className?: string;
+	onClose: () => void;
+}) {
 	const [state, setState] = useState<state>({
-		date: new Date(),
+		date: ISODate(new Date()),
 		description: "",
 		tasks: [],
 	});
 
-	function toggleTask(task: string) {
+	function toggleTask(task: Task) {
 		const new_tasks = state.tasks.slice();
 
 		const index = new_tasks.indexOf(task);
@@ -36,26 +37,54 @@ export default function AddEvent(props: { className?: string }) {
 		});
 	}
 
+	function addEvent() {
+		const eventData: EventData = {
+			date: state.date,
+			description: state.description,
+			id: zustand.getState().events.slice(-1)[0].id + 1,
+			tasks: {},
+		};
+
+		// add all the tasks
+		state.tasks.forEach((task) => {
+			eventData.tasks[task] = undefined;
+		});
+
+		zustand.getState().addEvent(eventData);
+
+		props.onClose();
+	}
+
 	return (
 		<div
 			className={`${props.className ?? ""} flex w-64 flex-col gap-2 rounded-xl bg-accent-5 p-4`}
 		>
 			<h1 className="text-2xl">Add Event</h1>
-			<input type="date" />
-			<input type="text" placeholder="Description" />
-			{availableTasks.map((tt, ii) => (
-				<div key={ii}>
-					<label className="flex items-center gap-2">
-						<input type="checkbox" className="hidden" />
-						<CheckBox
-							state={state.tasks.includes(tt)}
-							onClick={() => toggleTask(tt)}
-						/>
-						{tt}
-					</label>
+			<input
+				type="date"
+				value={state.date}
+				onChange={(e) => console.log(e.target.value)}
+			/>
+			<input
+				type="text"
+				placeholder="Description"
+				value={state.description}
+				onChange={(e) => setState({ ...state, description: e.target.value })}
+			/>
+			{Tasks.map((task, ii) => (
+				<div
+					key={ii}
+					onClick={() => toggleTask(task)}
+					className="flex cursor-default items-center gap-2"
+				>
+					<CheckBox state={state.tasks.includes(task)} />
+					{task}
 				</div>
 			))}
-			<Button className="ml-auto flex w-fit items-center justify-center gap-2 pr-4">
+			<Button
+				className="ml-auto flex w-fit items-center justify-center gap-2 pr-4"
+				onClick={addEvent}
+			>
 				<AddLarge size={32} />
 				Add
 			</Button>

client/src/app/components/Event/Event.tsx

@@ -1,30 +1,22 @@
-export enum Task {
-	Audio,
-	Livestream,
-	Camera,
-	Light,
-	StreamAudio,
-}
-
-export interface EventData {
-	id: number;
-	date: Date;
-	tasks: Partial<Record<Task, string | undefined>>;
-	description: string;
-}
+import { EventData } from "../Zustand";
 
 export default function Event(props: EventData) {
 	return (
-		<div key={props.id} className="w-64 rounded-xl bg-accent-5 p-4">
-			<h3 className="bold mb-1 text-2xl">{props.date.toLocaleDateString()}</h3>
-			{props.description !== undefined ? <div>{props.description}</div> : null}
-			<table className="mt-4">
+		<div
+			key={props.id}
+			className="flex w-64 flex-col gap-2 rounded-xl bg-accent-5 p-4"
+		>
+			<h3 className="bold mb-1 text-2xl">{props.date}</h3>
+			<div>{props.description}</div>
+
+			<table>
+				<caption>
+					<h4>Task assignment</h4>
+				</caption>
 				<tbody>
 					{Object.entries(props.tasks).map(([task, person], ii) => (
 						<tr key={ii}>
-							<th className="pr-4 text-left">
-								{Task[task as unknown as Task]}
-							</th>
+							<th className="pr-4 text-left">{task}</th>
 							<td>{person ?? <span className="text-primary">missing</span>}</td>
 						</tr>
 					))}

client/src/app/components/Overview.tsx

@@ -1,39 +1,20 @@
 "use client";
 
 import { AddLarge, CloseLarge } from "@carbon/icons-react";
-import Event, { EventData } from "./Event/Event";
+import Event from "./Event/Event";
 import { useState } from "react";
 import AddEvent from "./Event/AddEvent";
 import Button from "./Button";
+import zustand from "./Zustand";
 
 export default function EventVolunteer() {
-	const events: EventData[] = [
-		{
-			id: 0,
-			date: new Date("2025-01-05"),
-			tasks: {
-				"0": "Mark",
-			},
-			description: "neuer Prädikant",
-		},
-		{
-			id: 1,
-			date: new Date("2025-01-12"),
-			tasks: {
-				"0": "Mark",
-				"1": undefined,
-			},
-			description: "",
-		},
-	];
-
-	const [showAddItemDialogue, setShowAddItemDialogue] = useState(true);
+	const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);
 
 	return (
 		<div className="relative flex-1 p-4">
 			<h2 className="mb-4 text-center text-4xl">Overview</h2>
 			<div className="flex flex-wrap justify-center gap-4">
-				{events.map((ee) => Event(ee))}
+				{zustand.getState().events.map((ee) => Event(ee))}
 			</div>
 
 			<Button
@@ -54,7 +35,10 @@ export default function EventVolunteer() {
 					}}
 				>
 					<div className="relative">
-						<AddEvent className="border-2 border-accent-3" />
+						<AddEvent
+							className="border-2 border-accent-3"
+							onClose={() => setShowAddItemDialogue(false)}
+						/>
 						<Button
 							className="absolute right-2 top-2 aspect-square"
 							onClick={() => setShowAddItemDialogue(false)}

client/src/app/components/Zustand.ts

@@ -0,0 +1,68 @@
+import { create } from "zustand";
+
+export enum Task {
+	Audio = "Audio",
+	Livestream = "Livestream",
+	Camera = "Camera",
+	Light = "Light",
+	StreamAudio = "Stream Audio",
+}
+
+export type TaskKey = keyof typeof Task;
+export const Tasks = Object.values(Task) as Task[];
+
+export interface EventData {
+	id: number;
+	date: string;
+	tasks: Partial<Record<Task, string | undefined>>;
+	description: string;
+}
+
+interface Zustand {
+	events: EventData[];
+	addEvent: (event: EventData) => void;
+}
+
+const zustand = create<Zustand>()((set) => ({
+	events: [
+		{
+			id: 0,
+			date: "2025-01-05",
+			tasks: {
+				Audio: "Mark",
+				Livestream: undefined,
+				"Stream Audio": undefined,
+			},
+			description: "neuer Prädikant",
+		},
+		{
+			id: 1,
+			date: "2025-01-12",
+			tasks: {
+				Audio: "Mark",
+				Livestream: undefined,
+			},
+			description: "",
+		},
+	],
+	addEvent: (event: EventData) =>
+		set((state) => ({ events: state.events.toSpliced(-1, 0, event) })),
+}));
+
+export function ISODate(dt: string | Date): string {
+	if (typeof dt === "string") {
+		dt = new Date(dt);
+	}
+
+	const year = String(dt.getFullYear()).padStart(4, "0");
+	const month = String(dt.getMonth() + 1).padStart(2, "0");
+	const day = String(dt.getDate()).padStart(2, "0");
+
+	const date = `${year}-${month}-${day}`;
+
+	console.debug(date);
+
+	return date;
+}
+
+export default zustand;