error handling

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 {

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.");
+      }
     }
   };
 

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 = () => {
         </button>
       </div>
 
+      {errorMessage && <div className="error-message">{errorMessage}</div>}
+
       <form className="profesor-form" onSubmit={handleSubmit}>
         {page === 1 && (
           <div className="form-section">

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 };