Dev

src/app/classes/[id]/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import ClassScreen from '@/components/screens/ClassScreen';
+import ClassroomScreen from '@/components/screens/ClassroomScreen';
 import { useParams } from 'next/navigation';
 
 export default function ClassPage() {
 	const { id } = useParams<{ id: string }>();
-	return <ClassScreen id={id} />;
+	return <ClassroomScreen id={id} />;
 }

src/app/classes/page.tsx

@@ -1,5 +1,5 @@
-import ClassesScreen from '@/components/screens/ClassesScreen';
+import ClasroomsScreen from '@/components/screens/ClassroomsScreen';
 
 export default function ClassesPage() {
-	return <ClassesScreen />;
+	return <ClasroomsScreen />;
 }

src/components/providers/AuthProvider.tsx

@@ -1,11 +1,14 @@
 'use client';
 
+import { api } from '@/api/api';
 import { authAtom, loadUser } from '@/store/auth';
+import { classroomsAtom } from '@/store/classrooms';
 import { useAtom } from 'jotai';
 import { useEffect } from 'react';
 
 export default function AuthProvider({ children }: Readonly<{ children: React.ReactNode }>) {
 	const [auth, setAuth] = useAtom(authAtom);
+	const [, setClassrooms] = useAtom(classroomsAtom);
 
 	useEffect(() => {
 		const initAuth = async () => {
@@ -19,7 +22,19 @@ export default function AuthProvider({ children }: Readonly<{ children: React.Re
 		};
 
 		initAuth();
-	}, [auth.token, setAuth]);
+
+		const fetchClassrooms = async () => {
+			try {
+				const data = await api.classroom.getAll();
+				setClassrooms(data);
+			} catch (error) {
+				console.error('Failed to fetch classrooms:', error);
+				setClassrooms([]);
+			}
+		};
+
+		fetchClassrooms();
+	}, [auth.token, setAuth, setClassrooms]);
 
 	return <>{children}</>;
 }

src/components/screens/ActivityScreen.tsx

@@ -194,7 +194,7 @@ export default function ActivityScreen({
 								>
 									{activityTypeInfo[activity.type].label}
 								</Badge>
-								<Text color='gray.400'>{classroom.name}</Text>
+								<Link color='gray.400'>{classroom.name}</Link>
 							</Flex>
 							<Heading
 								as='h1'

src/components/screens/ClassScreen.tsx → src/components/screens/ClassroomScreen.tsx

@@ -35,7 +35,7 @@ import { FiCode, FiFileText, FiPlus, FiUsers } from 'react-icons/fi';
 import ActivityCard from '../general/ActivityCard';
 import CreateActivityModal from '../modals/CreateActivityModal';
 
-export default function ClassScreen({ id }: Readonly<{ id: string }>) {
+export default function ClassroomScreen({ id }: Readonly<{ id: string }>) {
 	const [classroom, setClassroom] = useState<IClassroom | null>(null);
 	const [isLoading, setIsLoading] = useState(true);
 	const router = useRouter();

src/components/screens/ClassesScreen.tsx → src/components/screens/ClassroomsScreen.tsx

@@ -20,7 +20,7 @@ import ClassroomCard from '../general/ClassroomCard';
 import CreateClassModal from '../modals/CreateClassModal';
 import JoinClassModal from '../modals/JoinClassModal';
 
-export default function ClassesScreen() {
+export default function ClasroomsScreen() {
 	const { isOpen: isCreateOpen, onOpen: onCreateOpen, onClose: onCreateClose } = useDisclosure();
 	const { isOpen: isJoinOpen, onOpen: onJoinOpen, onClose: onJoinClose } = useDisclosure();
 	const [classrooms, setClassrooms] = useState<IClassroom[]>([]);

src/components/screens/IndexScreen.tsx

@@ -1,32 +1,15 @@
 'use client';
 
-import { api } from '@/api/api';
-import type { IClassroom } from '@/types/IClassroomCard';
+import { classroomsAtom } from '@/store/classrooms';
 import { Box, Button, Container, Flex, Heading, SimpleGrid, Spinner, Text } from '@chakra-ui/react';
+import { useAtom } from 'jotai';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
 import { FiBookOpen } from 'react-icons/fi';
 import ClassroomCard from '../general/ClassroomCard';
 
 export default function IndexScreen() {
 	const router = useRouter();
-	const [classrooms, setClassrooms] = useState<IClassroom[]>([]);
-	const [isLoading, setIsLoading] = useState(true);
-
-	useEffect(() => {
-		const fetchClassrooms = async () => {
-			try {
-				const data = await api.classroom.getAll();
-				setClassrooms(data);
-			} catch (error) {
-				console.error('Failed to fetch classrooms:', error);
-			} finally {
-				setIsLoading(false);
-			}
-		};
-
-		fetchClassrooms();
-	}, []);
+	const [classrooms] = useAtom(classroomsAtom);
 
 	return (
 		<Box as='main' className='animate-fade-in'>
@@ -83,7 +66,7 @@ export default function IndexScreen() {
 					<Heading size='lg' mb={6}>
 						Clases Destacadas
 					</Heading>
-					{isLoading ? (
+					{classrooms === null ? (
 						<Flex h='200px' align='center' justify='center'>
 							<Spinner size='xl' borderWidth='4px' />
 						</Flex>

src/store/classrooms.ts

@@ -0,0 +1,4 @@
+import type { IClassroom } from '@/types/IClassroomCard';
+import { atom } from 'jotai';
+
+export const classroomsAtom = atom<IClassroom[] | null>(null);