feat: add class selection functionality to header and room table components

src/app/components/Header/index.tsx

@@ -1,6 +1,8 @@
 "use client";
 import { User } from "@/app/types/next-auth";
 import {
+	Autocomplete,
+	AutocompleteItem,
 	Avatar,
 	Button,
 	Dropdown,
@@ -14,6 +16,8 @@ import {
 } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
+import { useClassStore } from "@/app/stores/classStore";
+import { useEffect, useRef } from "react";
 
 const getInitials = (name: string) => {
 	if (!name) return "";
@@ -31,15 +35,46 @@ const getInitials = (name: string) => {
 
 export const Header = ({ user }: { user?: User }) => {
 	const router = useRouter();
+	const { classes, selectedClass, setSelectedClass, fetchClass } =
+		useClassStore();
+	const listClassesRef = useRef<HTMLInputElement>(null);
 
 	const initials = user?.name ? getInitials(user.name) : "";
 
+	useEffect(() => {
+		fetchClass().then(() => {
+			if (selectedClass) setSelectedClass(classes[0]);
+		});
+	}, []);
+
 	return (
 		<Navbar className="mb-2">
 			<NavbarBrand>
 				<p className="font-bold text-inherit">Toogether</p>
 			</NavbarBrand>
 
+			<NavbarContent as="div" justify="center">
+				<Autocomplete
+					ref={listClassesRef}
+					size="sm"
+					label="Select an class"
+					value={selectedClass?.name}
+					onSelectionChange={(selectedId) => {
+						console.log(selectedId);
+						const inputSelectedClass = classes.find(
+							(Class) => Class.id === selectedId,
+						);
+						setSelectedClass(inputSelectedClass);
+					}}
+				>
+					{classes.map((Class) => (
+						<AutocompleteItem key={Class.id} isSelected>
+							{Class.name}
+						</AutocompleteItem>
+					))}
+				</Autocomplete>
+			</NavbarContent>
+
 			<NavbarContent as="div" justify="end">
 				{user?.roles.includes("admin") ? (
 					<NavbarItem>
@@ -53,7 +88,7 @@ export const Header = ({ user }: { user?: User }) => {
 						</Button>
 					</NavbarItem>
 				) : null}
-				
+
 				<NavbarItem>
 					<ThemeSwitcher />
 				</NavbarItem>

src/app/components/Room/Table.tsx

@@ -2,13 +2,15 @@
 import { useRoomStore } from "@/app/stores/roomStore";
 import { useEffect } from "react";
 import { RoomList } from "./List";
+import { useClassStore } from "@/app/stores/classStore";
 
 export const RoomTable = () => {
 	const { fetchRooms, actual, future, past } = useRoomStore();
+	const { selectedClass } = useClassStore();
 
 	useEffect(() => {
 		fetchRooms();
-	}, []);
+	}, [selectedClass]);
 
 	return (
 		<div className="flex flex-col gap-4">

src/app/stores/classStore.tsx

@@ -0,0 +1,40 @@
+import { create } from "zustand";
+import { axiosInstance } from "../lib/axios";
+
+type Class = { id: string; name: string; createdAt: string };
+
+type ClassStoreState = {
+	classes: Class[];
+	selectedClass: Class | undefined | null;
+};
+
+type ClassStoreActions = {
+	_setClass: (classes: Class[]) => void;
+	fetchClass: () => Promise<void>;
+	setSelectedClass: (selectedClass: Class | undefined | null) => void;
+};
+
+type ClassStore = ClassStoreState & ClassStoreActions;
+
+const defaultState: ClassStoreState = {
+	classes: [],
+	selectedClass: null,
+};
+
+export const useClassStore = create<ClassStore>()((set) => ({
+	...defaultState,
+	_setClass: (classes: Class[]) => {
+		set(() => ({
+			classes: classes,
+		}));
+	},
+	setSelectedClass: (selectedClass: Class | undefined | null) => {
+		set(() => ({
+			selectedClass: selectedClass,
+		}));
+	},
+	fetchClass: async () => {
+		const classResponse = await axiosInstance.get<Class[]>("/@me/class");
+		useClassStore.getState()._setClass(classResponse.data);
+	},
+}));

src/app/stores/roomStore.tsx

@@ -2,6 +2,7 @@ import moment from "moment";
 import { create } from "zustand";
 import { Room } from "../components/Room/Room";
 import { axiosInstance } from "../lib/axios";
+import { useClassStore } from "./classStore";
 
 type RoomStoreState = {
 	future: Room[];
@@ -37,19 +38,13 @@ export const useRoomStore = create<RoomStore>()((set) => ({
 		set({ future, actual, past });
 	},
 	fetchRooms: () => {
+		const classSelected = useClassStore.getState().selectedClass;
+		if (!classSelected) return;
+
 		axiosInstance
-			.get<
-				{ id: string; name: string; createdAt: string }[]
-			>("/@me/class")
-			.then((classResponse) => {
-				if (classResponse.data.length)
-					axiosInstance
-						.get<
-							Room[]
-						>(`/@me/class/${classResponse.data[0].id}/rooms`)
-						.then((classes) => {
-							useRoomStore.getState()._setRooms(classes.data);
-						});
+			.get<Room[]>(`/@me/class/${classSelected.id}/rooms`)
+			.then((classes) => {
+				useRoomStore.getState()._setRooms(classes.data);
 			});
 	},
 }));