Dev

next.config.js

@@ -28,7 +28,7 @@ const withBundleAnalyzer = nextBundleAnalyzer({
 
 let configExport = nextConfig;
 
-if (process.env.NODE_ENV === 'production') {
+if (process.env['NODE_ENV'] === 'production') {
 	console.log('Loaded production config');
 	configExport = million.next(nextConfig, { auto: true });
 }

src/api/api.ts

@@ -39,10 +39,20 @@ export const api = {
 				}
 			});
 
-			if (!res.ok) throw new Error('Failed to fetch classroom');
+			if (!res.ok) throw new Error('Failed to fetch classroom members');
 			return res.json();
 		},
 
+		getProfessor: async (id: string): Promise<IUser> => {
+			const res = await fetch(`${API_URL}/classrooms/${encodeURIComponent(id)}/professor`, {
+				headers: {
+					...getAuthHeaders()
+				}
+			});
+
+			if (!res.ok) throw new Error('Failed to fetch classroom professor');
+			return res.json();
+		},
 
 		create: async (data: {
 			name: string;

src/components/general/ClassroomCard.tsx

@@ -48,7 +48,7 @@ export default function ClassroomCard({ item }: Readonly<{ item: IClassroom }>)
 					<Flex justify='space-between' align='center'>
 						<Flex align='center' gap={2}>
 							<FiUsers />
-							<Text fontSize='sm'>24 estudiantes</Text>
+							<Text fontSize='sm'>{item.memberCount} estudiantes</Text>
 						</Flex>
 						<Button
 							size='sm'

src/components/modals/CreateActivityModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { api } from '@/api/api';
+import { authAtom } from '@/store/auth';
 import type { IActivity } from '@/types/IActivity';
 import {
 	Button,
@@ -21,6 +22,7 @@ import {
 	VStack,
 	useToast
 } from '@chakra-ui/react';
+import { useAtom } from 'jotai';
 import { useState } from 'react';
 import { FiPlus, FiTrash } from 'react-icons/fi';
 
@@ -37,6 +39,7 @@ export default function CreateActivityModal({
 	classroomId,
 	onActivityCreated
 }: Readonly<CreateActivityModalProps>) {
+	const [auth] = useAtom(authAtom);
 	const [isLoading, setIsLoading] = useState(false);
 	const [formData, setFormData] = useState({
 		title: '',
@@ -71,7 +74,7 @@ export default function CreateActivityModal({
 				id,
 				...formData,
 				classroomId,
-				owner: 'Ángel',
+				owner: auth.user?.id ?? '',
 				createdAt: new Date().toISOString()
 			};
 

src/components/modals/CreateClassModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { api } from '@/api/api';
+import { authAtom } from '@/store/auth';
 import type { IClassroom } from '@/types/IClassroomCard';
 import {
 	Button,
@@ -19,6 +20,7 @@ import {
 	VStack,
 	useToast
 } from '@chakra-ui/react';
+import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 
 interface CreateClassModalProps {
@@ -34,6 +36,8 @@ export default function CreateClassModal({ isOpen, onClose, onClassroomCreated }
 		description: '',
 		thumbnailId: 1
 	});
+	const [auth] = useAtom(authAtom);
+
 	const toast = useToast();
 
 	useEffect(() => {
@@ -67,7 +71,8 @@ export default function CreateClassModal({ isOpen, onClose, onClassroomCreated }
 				id,
 				...formData,
 				code: id.slice(0, 6).toUpperCase(),
-				owner: 'Ángel'
+				owner: auth.user?.id ?? '',
+				memberCount: 1
 			};
 
 			onClassroomCreated?.([newClassroom]);

src/components/screens/ClassScreen.tsx

@@ -4,6 +4,7 @@ import { api } from '@/api/api';
 import { CDN_URL } from '@/constants/constants';
 import type { IActivity } from '@/types/IActivity';
 import type { IClassroom } from '@/types/IClassroomCard';
+import type { IUser } from '@/types/IUser';
 import {
 	Avatar,
 	Box,
@@ -31,28 +32,30 @@ import { useEffect, useState } from 'react';
 import { FiCode, FiFileText, FiPlus, FiUsers } from 'react-icons/fi';
 import ActivityCard from '../general/ActivityCard';
 import CreateActivityModal from '../modals/CreateActivityModal';
-import type { IUser } from '@/types/IUser';
 
 export default function ClassScreen({ id }: Readonly<{ id: string }>) {
 	const [classroom, setClassroom] = useState<IClassroom | null>(null);
 	const [isLoading, setIsLoading] = useState(true);
 	const router = useRouter();
 	const [classActivities, setClassActivities] = useState<IActivity[]>([]);
 	const [classMembers, setClassMembers] = useState<IUser[]>([]);
+	const [professor, setProfessor] = useState<IUser | null>(null);
 	const [isMembersLoading, setIsMembersLoading] = useState(false);
 	const { isOpen, onOpen, onClose } = useDisclosure();
 	const toast = useToast();
 
 	useEffect(() => {
 		const fetchData = async () => {
 			try {
-				const [classroomData, activitiesData] = await Promise.all([
+				const [classroomData, activitiesData, professorData] = await Promise.all([
 					api.classroom.getById(id),
-					api.activities.getByClassroom(id)
+					api.activities.getByClassroom(id),
+					api.classroom.getProfessor(id)
 				]);
 
 				setClassroom(classroomData);
 				setClassActivities(activitiesData);
+				setProfessor(professorData);
 			} catch (error) {
 				toast({
 					title: 'Error',
@@ -76,7 +79,6 @@ export default function ClassScreen({ id }: Readonly<{ id: string }>) {
 	};
 
 	const handleTabChange = async (index: number) => {
-		// Index 1 is the "Estudiantes" tab
 		if (index === 1 && classMembers.length === 0) {
 			setIsMembersLoading(true);
 			try {
@@ -150,7 +152,7 @@ export default function ClassScreen({ id }: Readonly<{ id: string }>) {
 							<Flex gap={6} color='gray.400'>
 								<Flex align='center' gap={2}>
 									<Icon as={FiUsers} />
-									<Text>{classMembers.length || '...'} estudiantes</Text>
+									<Text>{classroom.memberCount} estudiantes</Text>
 								</Flex>
 								<Flex align='center' gap={2}>
 									<Icon as={FiCode} />
@@ -160,12 +162,8 @@ export default function ClassScreen({ id }: Readonly<{ id: string }>) {
 						</Stack>
 
 						<VStack spacing={2} align='center'>
-							<Avatar
-								size='xl'
-								name={classroom.owner}
-								src='https://avatars.githubusercontent.com/u/57068341?v=4'
-							/>
-							<Text color='gray.300'>Ángel</Text>
+							<Avatar size='xl' name={professor?.username} src={professor?.avatar ?? ''} />
+							<Text color='gray.300'>{professor?.username}</Text>
 						</VStack>
 					</Grid>
 				</Container>

src/constants/constants.ts

@@ -1,3 +1,3 @@
 export const CDN_URL = 'https://evogd-cdn.tnfangel.com';
 export const API_URL =
-	process.env.NODE_ENV === 'development' ? 'http://localhost:4000' : 'https://evogd-api.tnfangel.com';
+	process.env['NODE_ENV'] === 'development' ? 'http://localhost:4000' : 'https://evogd-api.tnfangel.com';

src/types/IClassroomCard.ts

@@ -5,4 +5,5 @@ export interface IClassroom {
 	thumbnailId: number;
 	code: string;
 	owner: string;
+	memberCount: number;
 }