EVOGD-Project · tnfAngel · Jun 10, 2025 · Jun 10, 2025
diff --git a/src/app/classes/page.tsx b/src/app/classes/page.tsx
@@ -1,5 +1,5 @@
-import ClasroomsScreen from '@/components/screens/ClassroomsScreen';
+import ClassroomsScreen from '@/components/screens/ClassroomsScreen';
 
 export default function ClassesPage() {
-	return <ClasroomsScreen />;
+	return <ClassroomsScreen />;
 }
diff --git a/src/components/modals/CreateClassModal.tsx b/src/components/modals/CreateClassModal.tsx
@@ -2,6 +2,7 @@
 
 import { api } from '@/api/api';
 import { authAtom } from '@/store/auth';
+import { classroomsAtom } from '@/store/classrooms';
 import type { IClassroom } from '@/types/IClassroomCard';
 import {
 	Button,
@@ -26,17 +27,16 @@ import { useEffect, useState } from 'react';
 interface CreateClassModalProps {
 	isOpen: boolean;
 	onClose: () => void;
-	onClassroomCreated?: (classrooms: IClassroom[]) => void;
 }
 
-export default function CreateClassModal({ isOpen, onClose, onClassroomCreated }: Readonly<CreateClassModalProps>) {
+export default function CreateClassModal({ isOpen, onClose }: Readonly<CreateClassModalProps>) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [formData, setFormData] = useState({
 		name: '',
 		description: '',
 		thumbnailId: 1
 	});
-	const [auth] = useAtom(authAtom);
+	const [, setClassrooms] = useAtom(classroomsAtom);
 
 	const toast = useToast();
 
@@ -65,18 +65,14 @@ export default function CreateClassModal({ isOpen, onClose, onClassroomCreated }
 
 		setIsLoading(true);
 		try {
-			const { id } = await api.classroom.create(formData);
-
-			const newClassroom: IClassroom = {
-				id,
-				...formData,
-				code: id.slice(0, 6).toUpperCase(),
-				owner: auth.user?.id ?? '',
-				memberCount: 1
-			};
-
-			onClassroomCreated?.([newClassroom]);
+			await api.classroom.create(formData);
 
+			try {
+				const data = await api.classroom.getAll();
+				setClassrooms(data);
+			} catch (error) {
+				console.error('Failed to fetch classrooms:', error);
+			}
 			toast({
 				title: 'Clase creada',
 				description: 'La clase se ha creado exitosamente',

diff --git a/src/components/modals/JoinClassModal.tsx b/src/components/modals/JoinClassModal.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { api } from '@/api/api';
+import { classroomsAtom } from '@/store/classrooms';
 import type { IClassroom } from '@/types/IClassroomCard';
 import {
 	Button,
@@ -17,17 +18,19 @@ import {
 	VStack,
 	useToast
 } from '@chakra-ui/react';
+import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 
 interface JoinClassModalProps {
 	isOpen: boolean;
 	onClose: () => void;
-	onClassroomJoined?: (classrooms: IClassroom[]) => void;
 }
 
-export default function JoinClassModal({ isOpen, onClose, onClassroomJoined }: Readonly<JoinClassModalProps>) {
+export default function JoinClassModal({ isOpen, onClose }: Readonly<JoinClassModalProps>) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [code, setCode] = useState('');
+	const [, setClassrooms] = useAtom(classroomsAtom);
+
 	const toast = useToast();
 
 	useEffect(() => {
@@ -52,8 +55,13 @@ export default function JoinClassModal({ isOpen, onClose, onClassroomJoined }: R
 		setIsLoading(true);
 		try {
 			await api.classroom.join(code);
-			const updatedClassrooms = await api.classroom.getAll();
-			onClassroomJoined?.(updatedClassrooms);
+
+			try {
+				const data = await api.classroom.getAll();
+				setClassrooms(data);
+			} catch (error) {
+				console.error('Failed to fetch classrooms:', error);
+			}
 
 			toast({
 				title: 'Éxito',

diff --git a/src/components/screens/ClassroomScreen.tsx b/src/components/screens/ClassroomScreen.tsx
@@ -321,7 +321,7 @@ export default function ClassroomScreen({ id }: Readonly<{ id: string }>) {
 															/>
 															<Box>
 																<Text fontWeight='bold'>{professor.username}</Text>
-																<Text fontSize='sm' color='brand.400'>
+																<Text fontSize='sm' color='brand.primary.300'>
 																	Profesor
 																</Text>
 															</Box>

diff --git a/src/components/screens/ClassroomsScreen.tsx b/src/components/screens/ClassroomsScreen.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { api } from '@/api/api';
-import type { IClassroom } from '@/types/IClassroomCard';
+import { classroomsAtom } from '@/store/classrooms';
 import {
 	Box,
 	Button,
@@ -14,32 +13,17 @@ import {
 	Text,
 	useDisclosure
 } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { useAtom } from 'jotai';
+import {} from 'react';
 import { FiPlus, FiUsers } from 'react-icons/fi';
 import ClassroomCard from '../general/ClassroomCard';
 import CreateClassModal from '../modals/CreateClassModal';
 import JoinClassModal from '../modals/JoinClassModal';
 
-export default function ClasroomsScreen() {
+export default function ClassroomsScreen() {
 	const { isOpen: isCreateOpen, onOpen: onCreateOpen, onClose: onCreateClose } = useDisclosure();
 	const { isOpen: isJoinOpen, onOpen: onJoinOpen, onClose: onJoinClose } = useDisclosure();
-	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('Error al obtener las clases:', error);
-			} finally {
-				setIsLoading(false);
-			}
-		};
-
-		fetchClassrooms();
-	}, []);
+	const [classrooms] = useAtom(classroomsAtom);
 
 	return (
 		<Box as='main' className='animate-fade-in'>
@@ -70,7 +54,7 @@ export default function ClasroomsScreen() {
 			</Box>
 
 			<Container maxW='container.xl' py={8}>
-				{isLoading ? (
+				{classrooms === null ? (
 					<Flex h='200px' align='center' justify='center'>
 						<Spinner size='xl' borderWidth='4px' />
 					</Flex>
@@ -101,8 +85,8 @@ export default function ClasroomsScreen() {
 					</Flex>
 				)}
 			</Container>
-			<CreateClassModal isOpen={isCreateOpen} onClose={onCreateClose} onClassroomCreated={setClassrooms} />
-			<JoinClassModal isOpen={isJoinOpen} onClose={onJoinClose} onClassroomJoined={setClassrooms} />
+			<CreateClassModal isOpen={isCreateOpen} onClose={onCreateClose} />
+			<JoinClassModal isOpen={isJoinOpen} onClose={onJoinClose} />
 		</Box>
 	);
 }
diff --git a/src/components/screens/ProfileScreen.tsx b/src/components/screens/ProfileScreen.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import { api } from '@/api/api';
+import { CDN_URL } from '@/constants/constants';
 import { authAtom } from '@/store/auth';
+import { classroomsAtom } from '@/store/classrooms';
 import type { IClassroom } from '@/types/IClassroomCard';
 import {
 	Avatar,
@@ -18,39 +20,19 @@ import {
 	useDisclosure
 } from '@chakra-ui/react';
 import { useAtom } from 'jotai';
-import { useEffect, useState } from 'react';
 import { FiPlus, FiUsers } from 'react-icons/fi';
 import ClassroomCard from '../general/ClassroomCard';
 import CreateClassModal from '../modals/CreateClassModal';
 import EditAccountModal from '../modals/EditAccountModal';
-import { CDN_URL } from '@/constants/constants';
 
 export default function ProfileScreen() {
 	const [auth] = useAtom(authAtom);
+	const [classrooms] = useAtom(classroomsAtom);
 	const { isOpen: isCreateOpen, onOpen: onCreateOpen, onClose: onCreateClose } = useDisclosure();
 	const { isOpen: isEditOpen, onOpen: onEditOpen, onClose: onEditClose } = useDisclosure();
-	const [classrooms, setClassrooms] = useState<IClassroom[]>([]);
-	const [isLoading, setIsLoading] = useState(true);
 
 	const { user } = auth;
 
-	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);
-			}
-		};
-
-		if (user) {
-			fetchClassrooms();
-		}
-	}, [user]);
-
 	if (typeof location !== 'undefined' && !user && !auth.isLoading) location.href = '/';
 
 	return user ? (
@@ -92,7 +74,7 @@ export default function ProfileScreen() {
 						<Heading size='lg' mb={6}>
 							Clases Destacadas
 						</Heading>
-						{isLoading ? (
+						{classrooms === null ? (
 							<Flex h='200px' align='center' justify='center'>
 								<Spinner size='lg' />
 							</Flex>
@@ -126,7 +108,7 @@ export default function ProfileScreen() {
 				</VStack>
 			</Container>
 
-			<CreateClassModal isOpen={isCreateOpen} onClose={onCreateClose} onClassroomCreated={setClassrooms} />
+			<CreateClassModal isOpen={isCreateOpen} onClose={onCreateClose} />
 			<EditAccountModal isOpen={isEditOpen} onClose={onEditClose} />
 		</Box>
 	) : (