refactored some database retrievle stuff

client/src/Zustand.ts

@@ -43,6 +43,7 @@ interface Zustand {
 	user: StateUser | null;
 	tasks?: Task[];
 	availabilities?: Availability[];
+	users?: User[];
 	patch: (zustand?: Partial<Zustand>) => void;
 	reset: (zustand?: Partial<Zustand>) => void;
 }

client/src/app/admin/(users)/Users.tsx

@@ -1,4 +1,4 @@
-import { apiCall } from "@/lib";
+import { apiCall, getUsers } from "@/lib";
 import zustand, { User } from "@/Zustand";
 import {
 	Button,
@@ -27,19 +27,9 @@ export default function Users() {
 
 	const users = useAsyncList<User>({
 		async load() {
-			const result = await apiCall("GET", "users");
-
-			if (result.ok) {
-				const users = (await result.json()) as User[];
-
-				return {
-					items: users,
-				};
-			} else {
-				return {
-					items: [],
-				};
-			}
+			return {
+				items: await getUsers(),
+			};
 		},
 		async sort({ items, sortDescriptor }) {
 			return {

client/src/app/assignments/VolunteerSelector.tsx

@@ -11,9 +11,10 @@ import {
 	DropdownTrigger,
 } from "@heroui/react";
 import { EventWithAvailabilities } from "./page";
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { Availability } from "../admin/(availabilities)/AvailabilityEditor";
-import { apiCall, classNames } from "@/lib";
+import { apiCall, classNames, getUsers } from "@/lib";
+import { useAsyncList } from "@react-stately/data";
 
 export default function VolunteerSelector({
 	event,
@@ -26,6 +27,46 @@ export default function VolunteerSelector({
 	getAvailabilityById: (availabilityID: number) => Availability;
 	onReloadRequest: () => void;
 }) {
+	const [selectableUsers, setSelectableUsers] = useState<[string, string[]][]>(
+		[],
+	);
+
+	const users = useAsyncList({
+		async load() {
+			return {
+				items: await getUsers(),
+			};
+		},
+	});
+
+	useEffect(() => {
+		// create a set with all the users that can be assigned to this task
+		const validUsers = new Set(
+			users.items
+				.filter((user) => user.possibleTasks.includes(task.taskID))
+				.map((user) => user.userName),
+		);
+
+		setSelectableUsers(
+			Object.entries(event.availabilities)
+				.map(
+					([availabilityID, availabilityUsers]):
+						| [string, string[]]
+						| undefined => {
+						const thisUsers = availabilityUsers.filter((userName) =>
+							validUsers.has(userName),
+						);
+
+						// if there is at least one user over, return it
+						if (thisUsers.length > 0) {
+							return [availabilityID, thisUsers];
+						}
+					},
+				)
+				.filter((i) => !!i),
+		);
+	}, [event.availabilities, users.items, task.taskID]);
+
 	async function sendVolunteerAssignment(
 		eventID: number,
 		taskID: number,
@@ -77,7 +118,7 @@ export default function VolunteerSelector({
 					sendVolunteerAssignment(event.eventID, task.taskID, a as string)
 				}
 			>
-				{Object.entries(event.availabilities).map(
+				{selectableUsers.map(
 					([availabilityId, volunteers], iAvailability, aAvailabilities) => (
 						<DropdownSection
 							key={availabilityId}

client/src/lib.ts

@@ -1,5 +1,5 @@
 import { DateFormatter as IntlDateFormatter } from "@internationalized/date";
-import zustand from "./Zustand";
+import zustand, { User } from "./Zustand";
 import { Availability } from "./app/admin/(availabilities)/AvailabilityEditor";
 
 export type AllString<T> = { [K in keyof T]: string };
@@ -190,7 +190,7 @@ export async function getAvailabilities(): Promise<Availability[]> {
 		if (result.ok) {
 			const availabilities = await result.json();
 
-			state.patch({ availabilities: availabilities });
+			state.patch({ availabilities });
 
 			return availabilities;
 		} else {
@@ -198,3 +198,24 @@ export async function getAvailabilities(): Promise<Availability[]> {
 		}
 	}
 }
+
+export async function getUsers(): Promise<User[]> {
+	// check wether it is cached in zustand
+	const state = zustand.getState();
+
+	if (!!state.users) {
+		return state.users;
+	} else {
+		const result = await apiCall<User[]>("GET", "users");
+
+		if (result.ok) {
+			const users = await result.json();
+
+			state.patch({ users });
+
+			return users;
+		} else {
+			return [];
+		}
+	}
+}