From c41f53b003402c3c676371bd540a4053d3648b59 Mon Sep 17 00:00:00 2001 From: tnfAngel <57068341+tnfAngel@users.noreply.github.com> Date: Tue, 10 Jun 2025 10:09:34 +0100 Subject: [PATCH] fix classroom fetching --- src/app/classes/page.tsx | 4 +-- src/components/modals/CreateClassModal.tsx | 24 +++++++--------- src/components/modals/JoinClassModal.tsx | 16 ++++++++--- src/components/screens/ClassroomScreen.tsx | 2 +- src/components/screens/ClassroomsScreen.tsx | 32 ++++++--------------- src/components/screens/ProfileScreen.tsx | 28 ++++-------------- 6 files changed, 38 insertions(+), 68 deletions(-) diff --git a/src/app/classes/page.tsx b/src/app/classes/page.tsx index a680d75..451da09 100644 --- 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 ; + return ; } diff --git a/src/components/modals/CreateClassModal.tsx b/src/components/modals/CreateClassModal.tsx index 13b8f9a..de779da 100644 --- 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) { +export default function CreateClassModal({ isOpen, onClose }: Readonly) { 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 index f6f98b0..fc10365 100644 --- 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) { +export default function JoinClassModal({ isOpen, onClose }: Readonly) { 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 index f7da9e9..a20c554 100644 --- a/src/components/screens/ClassroomScreen.tsx +++ b/src/components/screens/ClassroomScreen.tsx @@ -321,7 +321,7 @@ export default function ClassroomScreen({ id }: Readonly<{ id: string }>) { /> {professor.username} - + Profesor diff --git a/src/components/screens/ClassroomsScreen.tsx b/src/components/screens/ClassroomsScreen.tsx index cfea5b5..75e4b23 100644 --- 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([]); - 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 ( @@ -70,7 +54,7 @@ export default function ClasroomsScreen() { - {isLoading ? ( + {classrooms === null ? ( @@ -101,8 +85,8 @@ export default function ClasroomsScreen() { )} - - + + ); } diff --git a/src/components/screens/ProfileScreen.tsx b/src/components/screens/ProfileScreen.tsx index ddd8323..c71f7ec 100644 --- 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([]); - 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() { Clases Destacadas - {isLoading ? ( + {classrooms === null ? ( @@ -126,7 +108,7 @@ export default function ProfileScreen() { - + ) : (