feat: enhance class and room handling by updating fetchClass return type and improving null checks in components

src/app/components/Header/index.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useClassStore } from "@/app/stores/classStore";
 import { User } from "@/app/types/next-auth";
 import {
 	Autocomplete,
@@ -15,9 +16,8 @@ import {
 	NavbarItem,
 } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
-import { useClassStore } from "@/app/stores/classStore";
-import { useEffect, useRef } from "react";
 
 const getInitials = (name: string) => {
 	if (!name) return "";
@@ -37,16 +37,14 @@ 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]);
+		fetchClass().then((classesFetched) => {
+			setSelectedClass(classesFetched[0]);
 		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [fetchClass, setSelectedClass]);
 
 	return (
 		<Navbar className="mb-2">
@@ -56,10 +54,10 @@ export const Header = ({ user }: { user?: User }) => {
 
 			<NavbarContent as="div" justify="center">
 				<Autocomplete
-					ref={listClassesRef}
 					size="sm"
 					label="Select an class"
 					value={selectedClass?.name}
+					selectedKey={selectedClass?.id}
 					onSelectionChange={(selectedId) => {
 						console.log(selectedId);
 						const inputSelectedClass = classes.find(

src/app/components/Room/List.tsx

@@ -4,7 +4,7 @@ import { RoomCard } from "./Card";
 import { Room } from "./Room";
 import { SkeletonRoomCard } from "./SkeletonRoomCard";
 
-export const RoomList = ({ rooms }: { rooms: Room[] }) => {
+export const RoomList = ({ rooms }: { rooms: Room[] | null }) => {
 	const scrollContainerRef = useRef<HTMLUListElement>(null);
 
 	const handleWheel = (event: WheelEvent) => {
@@ -47,12 +47,18 @@ export const RoomList = ({ rooms }: { rooms: Room[] }) => {
 		};
 	}, []);
 
+	if (rooms?.length == 0) return (
+		<div className="flex gap-2 rounded-xl bg-default-100 p-4">
+			<p className="text-default-500 text-center w-full">No rooms found</p>
+		</div>
+	)
+
 	return (
 		<ul
 			ref={scrollContainerRef}
 			className="flex gap-2 overflow-x-auto scrollbar-hide rounded-xl bg-default-100 p-1"
 		>
-			{rooms.length > 0 ? (
+			{rooms ? (
 				rooms.map((room) => (
 					<li key={room.id}>
 						<RoomCard

src/app/stores/classStore.tsx

@@ -10,7 +10,7 @@ type ClassStoreState = {
 
 type ClassStoreActions = {
 	_setClass: (classes: Class[]) => void;
-	fetchClass: () => Promise<void>;
+	fetchClass: () => Promise<Class[]>;
 	setSelectedClass: (selectedClass: Class | undefined | null) => void;
 };
 
@@ -36,5 +36,6 @@ export const useClassStore = create<ClassStore>()((set) => ({
 	fetchClass: async () => {
 		const classResponse = await axiosInstance.get<Class[]>("/@me/class");
 		useClassStore.getState()._setClass(classResponse.data);
+		return classResponse.data;
 	},
 }));

src/app/stores/roomStore.tsx

@@ -5,9 +5,9 @@ import { axiosInstance } from "../lib/axios";
 import { useClassStore } from "./classStore";
 
 type RoomStoreState = {
-	future: Room[];
-	actual: Room[];
-	past: Room[];
+	future: Room[] | null;
+	actual: Room[] | null;
+	past: Room[] | null;
 };
 
 type RoomStoreActions = {
@@ -18,9 +18,9 @@ type RoomStoreActions = {
 type RoomStore = RoomStoreState & RoomStoreActions;
 
 const defaultState: RoomStoreState = {
-	future: [],
-	actual: [],
-	past: [],
+	future: null,
+	actual: null,
+	past: null,
 };
 
 export const useRoomStore = create<RoomStore>()((set) => ({