fix spinners + fix join HTTP method

Author: tnfAngel

src/api/api.ts

@@ -21,7 +21,7 @@ export const api = {
 		},
 
 		getById: async (id: string): Promise<IClassroom> => {
-			const res = await fetch(`${API_URL}/classrooms/${id}`, {
+			const res = await fetch(`${API_URL}/classrooms/${encodeURIComponent(id)}`, {
 				headers: {
 					...getAuthHeaders()
 				}
@@ -57,7 +57,7 @@ export const api = {
 				thumbnailId: number;
 			}
 		): Promise<{ id: string }> => {
-			const res = await fetch(`${API_URL}/classrooms/${id}`, {
+			const res = await fetch(`${API_URL}/classrooms/${encodeURIComponent(id)}`, {
 				method: 'PUT',
 				headers: {
 					'Content-Type': 'application/json',
@@ -71,7 +71,8 @@ export const api = {
 		},
 
 		join: async (code: string): Promise<IClassroom> => {
-			const res = await fetch(`${API_URL}/classrooms/join/${code}`, {
+			const res = await fetch(`${API_URL}/classrooms/join/${encodeURIComponent(code)}`, {
+				method: 'POST',
 				headers: {
 					...getAuthHeaders()
 				}
@@ -84,7 +85,7 @@ export const api = {
 
 	activities: {
 		getByClassroom: async (classroomId: string): Promise<IActivity[]> => {
-			const res = await fetch(`${API_URL}/classrooms/${classroomId}/activities`, {
+			const res = await fetch(`${API_URL}/classrooms/${encodeURIComponent(classroomId)}/activities`, {
 				headers: {
 					...getAuthHeaders()
 				}
@@ -95,11 +96,14 @@ export const api = {
 		},
 
 		getById: async (classroomId: string, activityId: string): Promise<IActivity> => {
-			const res = await fetch(`${API_URL}/classrooms/${classroomId}/activities/${activityId}`, {
-				headers: {
-					...getAuthHeaders()
+			const res = await fetch(
+				`${API_URL}/classrooms/${encodeURIComponent(classroomId)}/activities/${encodeURIComponent(activityId)}`,
+				{
+					headers: {
+						...getAuthHeaders()
+					}
 				}
-			});
+			);
 
 			if (!res.ok) throw new Error('Failed to fetch activity');
 			return res.json();
@@ -122,7 +126,7 @@ export const api = {
 				};
 			}
 		): Promise<{ id: string }> => {
-			const res = await fetch(`${API_URL}/classrooms/${classroomId}/activities`, {
+			const res = await fetch(`${API_URL}/classrooms/${encodeURIComponent(classroomId)}/activities`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json',
@@ -153,14 +157,17 @@ export const api = {
 				};
 			}
 		): Promise<IActivity> => {
-			const res = await fetch(`${API_URL}/classrooms/${classroomId}/activities/${activityId}`, {
-				method: 'PUT',
-				headers: {
-					'Content-Type': 'application/json',
-					...getAuthHeaders()
-				},
-				body: JSON.stringify(data)
-			});
+			const res = await fetch(
+				`${API_URL}/classrooms/${encodeURIComponent(classroomId)}/activities/${encodeURIComponent(activityId)}`,
+				{
+					method: 'PUT',
+					headers: {
+						'Content-Type': 'application/json',
+						...getAuthHeaders()
+					},
+					body: JSON.stringify(data)
+				}
+			);
 
 			if (!res.ok) throw new Error('Failed to update activity');
 			return res.json();

src/components/screens/ActivityScreen.tsx

@@ -17,6 +17,7 @@ import {
 	Link,
 	ListItem,
 	OrderedList,
+	Spinner,
 	Text,
 	UnorderedList,
 	VStack,
@@ -79,7 +80,7 @@ export default function ActivityScreen({
 	if (isLoading) {
 		return (
 			<Flex h='100%' align='center' justify='center'>
-				<Text>Cargando...</Text>
+				<Spinner size='xl' borderWidth='4px' />
 			</Flex>
 		);
 	}

src/components/screens/ClassScreen.tsx

@@ -75,7 +75,7 @@ export default function ClassScreen({ id }: Readonly<{ id: string }>) {
 	if (isLoading) {
 		return (
 			<Flex h='100%' align='center' justify='center'>
-				<Spinner size='lg' />
+				<Spinner size='xl' borderWidth='4px' />
 			</Flex>
 		);
 	}

src/components/screens/ClassesScreen.tsx

@@ -2,7 +2,18 @@
 
 import { api } from '@/api/api';
 import type { IClassroom } from '@/types/IClassroomCard';
-import { Box, Button, Container, Flex, Grid, Heading, SimpleGrid, Text, useDisclosure } from '@chakra-ui/react';
+import {
+	Box,
+	Button,
+	Container,
+	Flex,
+	Grid,
+	Heading,
+	SimpleGrid,
+	Spinner,
+	Text,
+	useDisclosure
+} from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { FiPlus, FiUsers } from 'react-icons/fi';
 import ClassroomCard from '../general/ClassroomCard';
@@ -61,7 +72,7 @@ export default function ClassesScreen() {
 			<Container maxW='container.xl' py={8}>
 				{isLoading ? (
 					<Flex h='200px' align='center' justify='center'>
-						<Text>Cargando...</Text>
+						<Spinner size='xl' borderWidth='4px' />
 					</Flex>
 				) : classrooms.length > 0 ? (
 					<SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={6}>

src/components/screens/IndexScreen.tsx

@@ -85,7 +85,7 @@ export default function IndexScreen() {
 					</Heading>
 					{isLoading ? (
 						<Flex h='200px' align='center' justify='center'>
-							<Spinner size='lg' />
+							<Spinner size='xl' borderWidth='4px' />
 						</Flex>
 					) : classrooms.length > 0 ? (
 						<SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={6}>