adjusted events view to only show the availability selector, when a user can do at least one task of the event

client/src/Zustand.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { create } from "zustand";
-import { Task } from "./lib";
+import { Task, TaskID } from "./lib";
 import { Availability } from "./app/admin/(availabilities)/AvailabilityEditor";
 
 export interface BaseEvent {
@@ -41,6 +41,7 @@ export type UserAddModify = User & {
 
 interface Zustand {
 	user: StateUser | null;
+	userTasks?: TaskID[];
 	tasks?: Task[];
 	availabilities?: Availability[];
 	users?: User[];

client/src/app/events/page.tsx

@@ -2,7 +2,7 @@
 import AddEvent from "@/components/Event/AddEvent";
 import AssignmentTable from "@/components/Event/AssignmentTable";
 import Event from "@/components/Event/Event";
-import { apiCall } from "@/lib";
+import { apiCall, getUserTasks } from "@/lib";
 import zustand, { EventDataWithAvailability } from "@/Zustand";
 import { Add } from "@carbon/icons-react";
 import { Button, Tab, Tabs } from "@heroui/react";
@@ -37,6 +37,14 @@ export default function Events() {
 		},
 	});
 
+	const userTasks = useAsyncList({
+		async load() {
+			return {
+				items: await getUserTasks(),
+			};
+		},
+	});
+
 	function showEvent(event: EventDataWithAvailability): boolean {
 		switch (filter) {
 			case "assigned":
@@ -45,13 +53,17 @@ export default function Events() {
 				});
 
 			case "pending":
-				return event.availability === null;
+				return event.availability === null && showAvailabilitySelector(event);
 
 			default:
 				return true;
 		}
 	}
 
+	function showAvailabilitySelector(event: EventDataWithAvailability): boolean {
+		return event.tasks.some((t) => userTasks.items.includes(t.taskID));
+	}
+
 	return (
 		<div className="relative flex flex-1 flex-col gap-4">
 			<h2 className="text-center text-4xl">Upcoming Events</h2>
@@ -75,7 +87,9 @@ export default function Events() {
 							tasks={e.tasks}
 							className="mt-auto"
 						/>
-						<AvailabilitySelector event={e} startSelection={e.availability} />
+						{showAvailabilitySelector(e) ? (
+							<AvailabilitySelector event={e} startSelection={e.availability} />
+						) : undefined}
 					</Event>
 				))}
 			</div>

client/src/app/layout.tsx

@@ -7,8 +7,8 @@ import Header from "./Header";
 import Main from "./Main";
 
 export const metadata: Metadata = {
-	title: "Create Next App",
-	description: "Generated by create next app",
+	title: "Golunteer",
+	description: "Volunteeer coordination",
 };
 
 export interface SiteLink {

client/src/components/Event/Event.tsx

@@ -43,7 +43,7 @@ export default function Event({
 
 				{Array.isArray(children) ? children[0] : children}
 			</CardBody>
-			{Array.isArray(children) ? (
+			{Array.isArray(children) && !!children[1] ? (
 				<>
 					<Divider />
 					<CardFooter>{children[1]}</CardFooter>

client/src/lib.ts

@@ -144,8 +144,10 @@ export function validatePassword(password: string): string[] {
 	return errors;
 }
 
+export type TaskID = number;
+
 export interface Task {
-	taskID: number | undefined;
+	taskID: TaskID | undefined;
 	taskName: string;
 	enabled: boolean;
 }
@@ -219,3 +221,24 @@ export async function getUsers(): Promise<User[]> {
 		}
 	}
 }
+
+export async function getUserTasks(): Promise<TaskID[]> {
+	// check wether it is cached in zustand
+	const state = zustand.getState();
+
+	if (!!state.userTasks) {
+		return state.userTasks;
+	} else {
+		const result = await apiCall<TaskID[]>("GET", "user/tasks");
+
+		if (result.ok) {
+			const userTasks = await result.json();
+
+			state.patch({ userTasks });
+
+			return userTasks;
+		} else {
+			return [];
+		}
+	}
+}