diff --git a/src/App.css b/src/App.css index 7402247..d61ddc1 100644 --- a/src/App.css +++ b/src/App.css @@ -147,7 +147,6 @@ .profesor-form { width: 600px; max-width: 90vw; - margin: 20px 0; padding: 20px; border: 1px solid #ccc; border-radius: 8px; @@ -175,7 +174,7 @@ } .pagination { - margin-top: 20px; + margin-top: 10px; } .pagination .page-item.disabled .page-link { diff --git a/src/components/Teacher/CrearProfesor/FormProfesor.js b/src/components/Teacher/CrearProfesor/FormProfesor.js index 92c79dd..e7552e9 100644 --- a/src/components/Teacher/CrearProfesor/FormProfesor.js +++ b/src/components/Teacher/CrearProfesor/FormProfesor.js @@ -169,6 +169,13 @@ const FormProfesor = () => { } else { console.error("Error al guardar el profesor:", error); } + if (error.message === "Imagen demasiado pesada") { + setErrorMessage( + "La imagen es demasiado pesada. Por favor, sube una imagen más pequeña." + ); + } else { + setErrorMessage("Error al subir la imagen. Inténtalo de nuevo."); + } } }; diff --git a/src/components/Teacher/ModificarProfesor/FormEditProfesor.js b/src/components/Teacher/ModificarProfesor/FormEditProfesor.js index 66e19c1..f41e177 100644 --- a/src/components/Teacher/ModificarProfesor/FormEditProfesor.js +++ b/src/components/Teacher/ModificarProfesor/FormEditProfesor.js @@ -47,6 +47,7 @@ const FormEditProfesor = () => { const [grado_maximo, setGrado_maximo] = useState(""); const [grados_obtenidos, setGrados_obtenidos] = useState(""); + const [errorMessage, setErrorMessage] = useState(""); const { teacher } = useTeacher(id_profesor); const { updateTeacher } = useUpdateTeacher(); const { updateImage } = useUpdateImage(); @@ -121,39 +122,49 @@ const FormEditProfesor = () => { let imageUrl = ""; - if (fotoBase64) { - imageUrl = await updateImage(fotoBase64, nombre); + try { + if (fotoBase64) { + imageUrl = await updateImage(fotoBase64, nombre); + } + + const profesorData = { + ...profesor, + nombre, + num_trabajador, + rfc, + homoclave, + tel_oficina, + extension, + tel_personal, + correo_pcp, + correo_per, + ubicacion, + mostrar, + id_edificio, + id_adscripcion, + id_categoria, + activo, + lineasInvestigacion, + proyectosAcademicos, + datosAcademicos: [ + { + grado_maximo, + grados_obtenidos, + }, + ], + fotografia: imageUrl || profesor.fotografia, + }; + + await updateTeacher(id_profesor, profesorData); + } catch (error) { + if (error.message === "Imagen demasiado pesada") { + setErrorMessage( + "La imagen es demasiado pesada. Por favor, sube una imagen más pequeña." + ); + } else { + setErrorMessage("Error al subir la imagen. Inténtalo de nuevo."); + } } - - const profesorData = { - ...profesor, - nombre, - num_trabajador, - rfc, - homoclave, - tel_oficina, - extension, - tel_personal, - correo_pcp, - correo_per, - ubicacion, - mostrar, - id_edificio, - id_adscripcion, - id_categoria, - activo, - lineasInvestigacion, - proyectosAcademicos, - datosAcademicos: [ - { - grado_maximo, - grados_obtenidos, - }, - ], - fotografia: imageUrl || profesor.fotografia, - }; - - await updateTeacher(id_profesor, profesorData); }; const onDrop = useCallback((acceptedFiles) => { @@ -190,6 +201,8 @@ const FormEditProfesor = () => { + {errorMessage &&
{errorMessage}
} +
{page === 1 && (
diff --git a/src/services/auth.services.js b/src/services/auth.services.js index 49fd6d8..f2dfb03 100644 --- a/src/services/auth.services.js +++ b/src/services/auth.services.js @@ -55,26 +55,34 @@ export const useUploadImage = () => { const token = useToken(); const uploadImage = async (base64Image, imageName) => { - const response = await fetch(`${API_URL}/imagen`, { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${token}`, - }, - body: JSON.stringify({ - fotografia: base64Image, - nombre: imageName, - }), - }); + try { + const response = await fetch(`${API_URL}/imagen`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + body: JSON.stringify({ + fotografia: base64Image, + nombre: imageName, + }), + }); - if (!response.ok) { - throw new Error("Error al subir la imagen"); + if (response.status === 413) { + throw new Error("Imagen demasiado pesada"); + } + + if (!response.ok) { + throw new Error("Error al subir la imagen"); + } + + const result = await response.json(); + return `${API_URL}${result.imageUrl}`; + } catch (error) { + throw error; } - - const result = await response.json(); - return `${API_URL}${result.imageUrl}`; }; - + return { uploadImage }; }; @@ -82,24 +90,32 @@ export const useUpdateImage = () => { const token = useToken(); const updateImage = async (base64Image, imageName) => { - const response = await fetch(`${API_URL}/imagen`, { - method: "PUT", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${token}`, - }, - body: JSON.stringify({ - fotografia: base64Image, - nombre: imageName, - }), - }); + try { + const response = await fetch(`${API_URL}/imagen`, { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + body: JSON.stringify({ + fotografia: base64Image, + nombre: imageName, + }), + }); - if (!response.ok) { - throw new Error("Error al subir la imagen"); + if (response.status === 413) { + throw new Error("Imagen demasiado pesada"); + } + + if (!response.ok) { + throw new Error("Error al subir la imagen"); + } + + const result = await response.json(); + return `${API_URL}${result.imageUrl}`; + } catch (error) { + throw error; } - - const result = await response.json(); - return `${API_URL}${result.imageUrl}`; }; return { updateImage };