From 129478d74a17d416674cc58f666a08b4b0fb3ec3 Mon Sep 17 00:00:00 2001
From: TioSam77 <sammarw@gmail.com>
Date: Sat, 29 Jun 2024 13:29:34 -0600
Subject: [PATCH 1/2] Sam 1

---
 src/components/FormProfesor.js | 54 +++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/components/FormProfesor.js b/src/components/FormProfesor.js
index afd320b..1000f61 100644
--- a/src/components/FormProfesor.js
+++ b/src/components/FormProfesor.js
@@ -4,14 +4,14 @@ import './FormEditProfesor.css';
 
 const FormEditProfesor = () => {
   const [page, setPage] = useState(1);
-  const [profesor, setProfesor] = useState(null);
+  const [profesor, setProfesor] = useState({});
   const [adscripciones, setAdscripciones] = useState([]);
   const [categorias, setCategorias] = useState([]);
   const [edificios, setEdificios] = useState([]);
   const [edificio, setEdificio] = useState('');
   const [adscripcion, setAdscripcion] = useState('');
   const [categoria, setCategoria] = useState('');
-  const [activo, setActivo] = useState();
+  const [activo, setActivo] = useState('');
   const [foto, setFoto] = useState(null);
   const [fotoBase64, setFotoBase64] = useState('');
 
@@ -49,7 +49,7 @@ const FormEditProfesor = () => {
   const onDrop = useCallback(acceptedFiles => {
     const file = acceptedFiles[0];
     setFoto(file);
-    
+
     const reader = new FileReader();
     reader.onloadend = () => {
       const base64String = reader.result;
@@ -66,9 +66,31 @@ const FormEditProfesor = () => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    // Process form data here, including the fotoBase64
-    console.log("Form submitted");
-    console.log(fotoBase64); // This is the base64 string of the image
+    const formData = {
+      ...profesor,
+      edificio,
+      adscripcion,
+      categoria,
+      activo,
+      foto: fotoBase64,
+    };
+
+    console.log('Form data:', formData); // Agrega este console.log para verificar el envío
+
+    fetch('http://localhost:3000/profesores', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(formData),
+    })
+      .then(response => response.json())
+      .then(data => {
+        console.log('Success:', data);
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
   };
 
   return (
@@ -109,13 +131,11 @@ const FormEditProfesor = () => {
                 <h2>Datos Académicos</h2>
                 <div className="form-group">
                   <label>Grado Maximo <span className="required">*</span></label>
-                  <input type="email" name="grado_maximo" required 
-                  onChange={handleInputChange} />
+                  <input type="email" name="grado_maximo" required onChange={handleInputChange} />
                 </div>
                 <div className="form-group">
                   <label>Grados Obtenidos <span className="required">*</span></label>
-                  <input type="email" name="grados_obtenidos" required 
-                  onChange={handleInputChange} />
+                  <input type="email" name="grados_obtenidos" required onChange={handleInputChange} />
                 </div>
                 <div className="form-group">
                   <label>Correo Pcpuma <span className="required">*</span></label>
@@ -197,8 +217,8 @@ const FormEditProfesor = () => {
                     onChange={(e) => handleSelectChange(e, setActivo)}
                     className="form-control m-2"
                   >
-                    <option value = {true} >Sí</option>
-                    <option value= {false} >No</option>
+                    <option value={true}>Sí</option>
+                    <option value={false}>No</option>
                   </select>
                 </div>
                 <div className="form-group">
@@ -212,16 +232,8 @@ const FormEditProfesor = () => {
                     )}
                   </div>
                   {foto && <p>Archivo seleccionado: {foto.name}</p>}
-                  {fotoBase64 && <img src={fotoBase64} alt="Foto seleccionada" style={{ maxWidth: '200px', marginTop: '10px' }} />}
+                  {fotoBase64 && <img src={fotoBase64} alt="Preview" style={{ width: '100px', height: '100px' }} />}
                 </div>
-              </div>
-            </div>
-          )}
-
-          {page === 4 && (
-            <div className="profesor-form">
-              <div className="form-section">
-                <h2>Proyectos</h2>
                 <div className="form-group">
                   <label>Proyectos de investigación actuales <span className="required">*</span></label>
                   <textarea 

From 587caf394920bc8e0e47bc71f07f82e00f0568c5 Mon Sep 17 00:00:00 2001
From: TioSam77 <sammarw@gmail.com>
Date: Sat, 29 Jun 2024 21:07:45 -0600
Subject: [PATCH 2/2] FormEditProfesor Foto y Reorganizado

---
 .../CardEditProfesor.css                      |   0
 .../CardEditProfesor.js                       |   0
 .../{ => CardUsuarios}/NavUsuario.css         |   0
 .../{ => CrearUsuario}/CrearUsuario.css       |   0
 .../{ => CrearUsuario}/CrearUsuario.js        |   0
 .../FormEditProfesor.css                      |   0
 .../FormEditProfesor.js                       | 109 +++++++++++-------
 .../{ => FormProfesor}/FormProfesor.css       |   0
 .../{ => FormProfesor}/FormProfesor.js        |   0
 .../{ => Formulario}/Formulario.css           |   0
 src/components/{ => Formulario}/Formulario.js |   0
 src/components/{ => InterResp}/InterResp.css  |   0
 src/components/{ => InterResp}/InterResp.js   |   0
 src/components/{ => LoginForm}/LoginForm.css  |   0
 src/components/{ => LoginForm}/LoginForm.js   |   0
 src/components/{ => MDUser}/MDUser.css        |   0
 src/components/{ => MDUser}/MDUser.js         |   0
 .../{ => PerfilProfesor}/PerfilProfesor.css   |   0
 .../{ => PerfilProfesor}/PerfilProfesor.js    |   0
 src/pages/{ => Pagina404}/Pagina404.css       |   0
 src/pages/{ => Pagina404}/Pagina404.js        |   0
 21 files changed, 65 insertions(+), 44 deletions(-)
 rename src/components/{ => CardEditProfesor}/CardEditProfesor.css (100%)
 rename src/components/{ => CardEditProfesor}/CardEditProfesor.js (100%)
 rename src/components/{ => CardUsuarios}/NavUsuario.css (100%)
 rename src/components/{ => CrearUsuario}/CrearUsuario.css (100%)
 rename src/components/{ => CrearUsuario}/CrearUsuario.js (100%)
 rename src/components/{ => FormEditProfesor}/FormEditProfesor.css (100%)
 rename src/components/{ => FormEditProfesor}/FormEditProfesor.js (80%)
 rename src/components/{ => FormProfesor}/FormProfesor.css (100%)
 rename src/components/{ => FormProfesor}/FormProfesor.js (100%)
 rename src/components/{ => Formulario}/Formulario.css (100%)
 rename src/components/{ => Formulario}/Formulario.js (100%)
 rename src/components/{ => InterResp}/InterResp.css (100%)
 rename src/components/{ => InterResp}/InterResp.js (100%)
 rename src/components/{ => LoginForm}/LoginForm.css (100%)
 rename src/components/{ => LoginForm}/LoginForm.js (100%)
 rename src/components/{ => MDUser}/MDUser.css (100%)
 rename src/components/{ => MDUser}/MDUser.js (100%)
 rename src/components/{ => PerfilProfesor}/PerfilProfesor.css (100%)
 rename src/components/{ => PerfilProfesor}/PerfilProfesor.js (100%)
 rename src/pages/{ => Pagina404}/Pagina404.css (100%)
 rename src/pages/{ => Pagina404}/Pagina404.js (100%)

diff --git a/src/components/CardEditProfesor.css b/src/components/CardEditProfesor/CardEditProfesor.css
similarity index 100%
rename from src/components/CardEditProfesor.css
rename to src/components/CardEditProfesor/CardEditProfesor.css
diff --git a/src/components/CardEditProfesor.js b/src/components/CardEditProfesor/CardEditProfesor.js
similarity index 100%
rename from src/components/CardEditProfesor.js
rename to src/components/CardEditProfesor/CardEditProfesor.js
diff --git a/src/components/NavUsuario.css b/src/components/CardUsuarios/NavUsuario.css
similarity index 100%
rename from src/components/NavUsuario.css
rename to src/components/CardUsuarios/NavUsuario.css
diff --git a/src/components/CrearUsuario.css b/src/components/CrearUsuario/CrearUsuario.css
similarity index 100%
rename from src/components/CrearUsuario.css
rename to src/components/CrearUsuario/CrearUsuario.css
diff --git a/src/components/CrearUsuario.js b/src/components/CrearUsuario/CrearUsuario.js
similarity index 100%
rename from src/components/CrearUsuario.js
rename to src/components/CrearUsuario/CrearUsuario.js
diff --git a/src/components/FormEditProfesor.css b/src/components/FormEditProfesor/FormEditProfesor.css
similarity index 100%
rename from src/components/FormEditProfesor.css
rename to src/components/FormEditProfesor/FormEditProfesor.css
diff --git a/src/components/FormEditProfesor.js b/src/components/FormEditProfesor/FormEditProfesor.js
similarity index 80%
rename from src/components/FormEditProfesor.js
rename to src/components/FormEditProfesor/FormEditProfesor.js
index ad98ae2..101d549 100644
--- a/src/components/FormEditProfesor.js
+++ b/src/components/FormEditProfesor/FormEditProfesor.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import { useDropzone } from 'react-dropzone';
 import './FormEditProfesor.css';
 
 const FormEditProfesor = () => {
@@ -12,7 +13,9 @@ const FormEditProfesor = () => {
   const [edificio, setEdificio] = useState('');
   const [adscripcion, setAdscripcion] = useState('');
   const [categoria, setCategoria] = useState('');
-  const [activo, setActivo] = useState();
+  const [activo, setActivo] = useState(true);
+  const [photo, setPhoto] = useState(null);
+  const [preview, setPreview] = useState(null);
 
   const handlePageChange = (newPage) => {
     setPage(newPage);
@@ -52,7 +55,6 @@ const FormEditProfesor = () => {
         setActivo(data.activo ? true : false);
       })
       .catch(error => console.error('Error fetching profesor:', error));
-      console.log(profesor)
   }, [id_profesor]);
 
   const handleInputChange = (event) => {
@@ -64,12 +66,43 @@ const FormEditProfesor = () => {
     setState(event.target.value);
   };
 
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: '.jpg,.png',
+    onDrop: (acceptedFiles) => {
+      const file = acceptedFiles[0];
+      setPhoto(file);
+      setPreview(URL.createObjectURL(file));
+    }
+  });
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const formData = new FormData();
+    for (const key in profesor) {
+      formData.append(key, profesor[key]);
+    }
+    if (photo) {
+      formData.append('fotografia', photo);
+    }
+    fetch(`http://localhost:3000/profesor/${id_profesor}`, {
+      method: 'PUT',
+      body: formData,
+    })
+      .then(response => response.json())
+      .then(data => {
+        console.log('Success:', data);
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
+  };
+
   return (
     <div className="form-container">
       {profesor ? (
         <>
-          {page === 1 && (
-            <form className="profesor-form">
+          <form className="profesor-form" onSubmit={handleSubmit}>
+            {page === 1 && (
               <div className="form-section">
                 <h2>Datos Personales</h2>
                 <div className="form-group">
@@ -93,28 +126,18 @@ const FormEditProfesor = () => {
                   <input type="text" name="homoclave" required defaultValue={profesor.homoclave} onChange={handleInputChange} />
                 </div>
               </div>
-            </form>
-          )}
+            )}
 
-          {page === 2 && (
-            <form className="profesor-form">
+            {page === 2 && (
               <div className="form-section">
                 <h2>Datos Académicos</h2>
                 <div className="form-group">
                   <label>Grado Maximo <span className="required">*</span></label>
-                  <input type="email" name="grado_maximo" required 
-                  defaultValue={profesor.datosAcademicos.map((datos, index) => (
-                      datos.grado_maximo
-                  ))} 
-                  onChange={handleInputChange} />
+                  <input type="text" name="grado_maximo" required defaultValue={profesor.datosAcademicos[0]?.grado_maximo} onChange={handleInputChange} />
                 </div>
                 <div className="form-group">
                   <label>Grados Obtenidos <span className="required">*</span></label>
-                  <input type="email" name="grados_obtenidos" required 
-                  defaultValue={profesor.datosAcademicos.map((datos, index) => (
-                    datos.grados_obtenidos
-                ))}
-                  onChange={handleInputChange} />
+                  <input type="text" name="grados_obtenidos" required defaultValue={profesor.datosAcademicos[0]?.grados_obtenidos} onChange={handleInputChange} />
                 </div>
                 <div className="form-group">
                   <label>Correo Pcpuma <span className="required">*</span></label>
@@ -149,11 +172,9 @@ const FormEditProfesor = () => {
                   </select>
                 </div>
               </div>
-            </form>
-          )}
+            )}
 
-          {page === 3 && (
-            <form className="profesor-form">
+            {page === 3 && (
               <div className="form-section">
                 <h2>Datos de Investigación</h2>
                 <div className="form-group">
@@ -196,41 +217,44 @@ const FormEditProfesor = () => {
                     onChange={(e) => handleSelectChange(e, setActivo)}
                     className="form-control m-2"
                   >
-                    <option value = {true} >Sí</option>
-                    <option value= {false} >No</option>
+                    <option value="true">Sí</option>
+                    <option value="false">No</option>
                   </select>
                 </div>
                 <div className="form-group">
                   <label>Foto</label>
-                  <input type="file" name="fotografia" />
+                  <div {...getRootProps()} className="dropzone">
+                    <input {...getInputProps()} />
+                    {preview ? (
+                      <img src={preview} alt="Preview" className="preview-img" />
+                    ) : (
+                      <p>Arrastra y suelta una imagen aquí, o haz clic para seleccionar una imagen</p>
+                    )}
+                  </div>
                 </div>
               </div>
-            </form>
-          )}
+            )}
 
-          {page === 4 && (
-            <form className="profesor-form">
+            {page === 4 && (
               <div className="form-section">
-                <h2>Lineas de Investigacion</h2>
-                {profesor.lineasInvestigacion.map((linea,index)=>(
+                <h2>Lineas de Investigación</h2>
+                {profesor.lineasInvestigacion.map((linea, index) => (
                   <div className="form-group" key={index}>
-                    <label>Lineas de Investigacion {index + 1}<span className="required">*</span></label>
-                    <input type="text" name={`proyecto_${index}`} required defaultValue={linea.lineas_inv} onChange={handleInputChange} />
+                    <label>Lineas de Investigación {index + 1}<span className="required">*</span></label>
+                    <input type="text" name={`lineas_inv_${index}`} required defaultValue={linea.lineas_inv} onChange={handleInputChange} />
                   </div>
                 ))}
               </div>
-            </form>
-          )}
+            )}
 
-          {page === 5 && (
-            <form className="profesor-form">
+            {page === 5 && (
               <div className="form-section">
                 <h2>Proyectos Académicos</h2>
                 {profesor.proyectosAcademicos.map((proyecto, index) => (
                   <div className="form-group" key={index}>
                     <label>Proyecto {index + 1}<span className="required">*</span></label>
                     <textarea
-                      name={`lineas_inv_${index}`}
+                      name={`proyecto_${index}`}
                       required
                       defaultValue={proyecto.proyecto}
                       onChange={handleInputChange}
@@ -240,12 +264,10 @@ const FormEditProfesor = () => {
                   </div>
                 ))}
               </div>
-            </form>
-          )}
-
-          <button type="submit" className="btn btn-primary boton">Registrar</button>
-
+            )}
 
+            <button type="submit" className="btn btn-primary boton">Registrar</button>
+          </form>
 
           <nav aria-label="Page navigation example">
             <ul className="pagination justify-content-center">
@@ -281,4 +303,3 @@ const FormEditProfesor = () => {
 };
 
 export default FormEditProfesor;
-
diff --git a/src/components/FormProfesor.css b/src/components/FormProfesor/FormProfesor.css
similarity index 100%
rename from src/components/FormProfesor.css
rename to src/components/FormProfesor/FormProfesor.css
diff --git a/src/components/FormProfesor.js b/src/components/FormProfesor/FormProfesor.js
similarity index 100%
rename from src/components/FormProfesor.js
rename to src/components/FormProfesor/FormProfesor.js
diff --git a/src/components/Formulario.css b/src/components/Formulario/Formulario.css
similarity index 100%
rename from src/components/Formulario.css
rename to src/components/Formulario/Formulario.css
diff --git a/src/components/Formulario.js b/src/components/Formulario/Formulario.js
similarity index 100%
rename from src/components/Formulario.js
rename to src/components/Formulario/Formulario.js
diff --git a/src/components/InterResp.css b/src/components/InterResp/InterResp.css
similarity index 100%
rename from src/components/InterResp.css
rename to src/components/InterResp/InterResp.css
diff --git a/src/components/InterResp.js b/src/components/InterResp/InterResp.js
similarity index 100%
rename from src/components/InterResp.js
rename to src/components/InterResp/InterResp.js
diff --git a/src/components/LoginForm.css b/src/components/LoginForm/LoginForm.css
similarity index 100%
rename from src/components/LoginForm.css
rename to src/components/LoginForm/LoginForm.css
diff --git a/src/components/LoginForm.js b/src/components/LoginForm/LoginForm.js
similarity index 100%
rename from src/components/LoginForm.js
rename to src/components/LoginForm/LoginForm.js
diff --git a/src/components/MDUser.css b/src/components/MDUser/MDUser.css
similarity index 100%
rename from src/components/MDUser.css
rename to src/components/MDUser/MDUser.css
diff --git a/src/components/MDUser.js b/src/components/MDUser/MDUser.js
similarity index 100%
rename from src/components/MDUser.js
rename to src/components/MDUser/MDUser.js
diff --git a/src/components/PerfilProfesor.css b/src/components/PerfilProfesor/PerfilProfesor.css
similarity index 100%
rename from src/components/PerfilProfesor.css
rename to src/components/PerfilProfesor/PerfilProfesor.css
diff --git a/src/components/PerfilProfesor.js b/src/components/PerfilProfesor/PerfilProfesor.js
similarity index 100%
rename from src/components/PerfilProfesor.js
rename to src/components/PerfilProfesor/PerfilProfesor.js
diff --git a/src/pages/Pagina404.css b/src/pages/Pagina404/Pagina404.css
similarity index 100%
rename from src/pages/Pagina404.css
rename to src/pages/Pagina404/Pagina404.css
diff --git a/src/pages/Pagina404.js b/src/pages/Pagina404/Pagina404.js
similarity index 100%
rename from src/pages/Pagina404.js
rename to src/pages/Pagina404/Pagina404.js