fixed events view

client/src/Zustand.ts

@@ -8,10 +8,16 @@ import { Availability } from "./app/admin/(availabilities)/AvailabilityEditor";
 export interface EventData {
 	id: number;
 	date: string;
-	tasks: { taskID: number; taskName: string; userName: string | null }[];
+	tasks: TaskAssignment[];
 	description: string;
 }
 
+interface TaskAssignment {
+	taskID: number;
+	taskName: string;
+	userName: string | null;
+}
+
 export interface User {
 	userName: string;
 	admin: boolean;

client/src/app/events/page.tsx

@@ -6,32 +6,38 @@ import { apiCall } from "@/lib";
 import zustand, { EventData } from "@/Zustand";
 import { Add } from "@carbon/icons-react";
 import { Button } from "@heroui/react";
-import { useEffect, useState } from "react";
+import { useAsyncList } from "@react-stately/data";
+import { useState } from "react";
 
 export default function Events() {
 	const [showAddItemDialogue, setShowAddItemDialogue] = useState(false);
-	const events = zustand((state) => state.events);
 	const admin = zustand((state) => state.user?.admin);
 
-	useEffect(() => {
+	const events = useAsyncList<EventData>({
-		(async () => {
+		async load() {
-			const data = await apiCall<EventData[]>("GET", "events/assignments");
+			const result = await apiCall("GET", "events/assignments");
 
-			if (data.ok) {
+			if (result.ok) {
-				zustand.getState().setEvents(await data.json());
+				const data = await result.json();
+
+				console.debug(data);
+
+				return {
+					items: data,
+				};
 			}
 
 			return {
 				items: [],
 			};
-		})();
+		},
-	}, []);
+	});
 
 	return (
 		<div className="relative flex-1">
 			<h2 className="mb-4 text-center text-4xl">Upcoming Events</h2>
 			<div className="flex flex-wrap justify-center gap-4">
-				{events.map((ee, ii) => (
+				{events.items.map((ee, ii) => (
 					<Event key={ii} event={ee}>
 						<div className="mt-auto">
 							<AssignmentTable tasks={ee.tasks} />

client/src/components/Event/AssignmentTable.tsx

@@ -8,11 +8,13 @@ export default function AssignmentTable({
 	return (
 		<table>
 			<tbody>
-				{Object.entries(tasks).map(([task, person]) => (
+				{tasks.map((task) => (
-					<tr key={task}>
+					<tr key={task.taskID}>
-						<th className="pr-4 text-left">{task}</th>
+						<th className="pr-4 text-left">{task.taskName}</th>
 						<td>
-							{person ?? <span className="italic text-highlight">missing</span>}
+							{task.userName ?? (
+								<span className="italic text-highlight">missing</span>
+							)}
 						</td>
 					</tr>
 				))}