markalbrand56 · jazurdia · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023
diff --git a/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.jsx b/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.jsx
@@ -2,20 +2,41 @@ import React from "react"
 import PropTypes from "prop-types"
 import style from "./ImageDirectUploader.module.css"
 
-const ImageDirectUploader = ({ uploader }) => (
+const ImageDirectUploader = ({
+  uploader,
+  handleInputChange,
+  isSelected,
+  archivo,
+}) => (
   <div className={style.UploaderContainer}>
-    <form id="uploadForm" encType="multipart/form-data" action="#" method="PUT" className={style.UploaderForm}>
-      <label htmlFor="file" className={style.UploaderLabel}>
-        Sube una nueva foto de perfil
+    <form
+      id="uploadForm"
+      encType="multipart/form-data"
+      action="#"
+      method="PUT"
+      className={style.UploaderForm}
+    >
+      <label
+        htmlFor="file"
+        className={style.UploaderLabel}
+        style={isSelected ? { backgroundColor: "#94bd0f", color: "#000" } : {}}
+      >
+        {isSelected ? archivo : "Seleccionar nuevo archivo"}
         <input
           className={style.UploaderInput}
           type="file"
           name="file"
           id="file"
           accept=".jpg, .jpeg, .png"
-        ></input>
+          onChange={handleInputChange}
+        />
       </label>
-      <button type="submit" className={style.UploaderButton} onClick={uploader}>
+      <button
+        type="submit"
+        className={style.UploaderButton}
+        onClick={uploader}
+        disabled={!isSelected}
+      >
         Confirmar
       </button>
     </form>
@@ -24,6 +45,9 @@ const ImageDirectUploader = ({ uploader }) => (
 
 ImageDirectUploader.propTypes = {
   uploader: PropTypes.func.isRequired,
+  handleInputChange: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  archivo: PropTypes.string.isRequired,
 }
 
 export default ImageDirectUploader
diff --git a/uniEmpleos/src/pages/ChatPage/ChatPage.jsx b/uniEmpleos/src/pages/ChatPage/ChatPage.jsx
@@ -38,22 +38,22 @@ const ChatPage = () => {
     })
   }
 
-  useEffect(() => {
-    obtainMessages()
-  }, [currentChat])
-
   const obtainMessages = async () => {
     if (currentChat !== "") {
       await apiMessages.handleRequest("POST", "/messages/get", {
         id_emisor: user.id_user,
         id_receptor: currentChat,
       })
-      if (cambioChats !== apiMessages.data){
+      if (cambioChats !== apiMessages.data) {
         setCambioChats(apiMessages.data)
       }
     }
   }
 
+  useEffect(() => {
+    obtainMessages()
+  }, [currentChat])
+
   const scrollDown = () => {
     chatContainerRef.current.scrollTo({
       top: chatContainerRef.current.scrollHeight,

diff --git a/uniEmpleos/src/pages/EditProfileEmpresas/EditProfileEmpresa.jsx b/uniEmpleos/src/pages/EditProfileEmpresas/EditProfileEmpresa.jsx
@@ -50,7 +50,10 @@ const EditProfileEmpresa = () => {
   }
   useEffect(() => {
     if (api.data) {
-      const fotoUrl = (api.data.usuario.foto === "") ? "/images/pfp.svg" : (API_URL + "/api/uploads/" + api.data.usuario.foto)
+      const fotoUrl =
+        api.data.usuario.foto === ""
+          ? "/images/pfp.svg"
+          : API_URL + "/api/uploads/" + api.data.usuario.foto
 
       console.log("Foto", fotoUrl)
       setNombre(api.data.usuario.nombre)
@@ -106,18 +109,6 @@ const EditProfileEmpresa = () => {
     }
   }
 
-  const handleUploadFile = (uploadedImage) => {
-    const fileType = isImage(uploadedImage)
-    if (fileType) {
-      setUploadedImage(uploadedImage)
-    } else {
-      setUploadedImage("")
-      setTypePopUp(2)
-      setError("El archivo debe ser una imagen")
-      setWarning(true)
-    }
-  }
-
   const uploadFile = async () => {
     event.preventDefault()
     const file = document.getElementById("file").files[0]
@@ -130,13 +121,30 @@ const EditProfileEmpresa = () => {
         window.location.reload()
       } else {
         setTypePopUp(2)
-        setError("Upss... No se pudo actualizar tu foto de perfil, intenta mas tarde")
+        setError(
+          "Upss... No se pudo actualizar tu foto de perfil, intenta mas tarde"
+        )
         setWarning(true)
       }
     } else {
-        setTypePopUp(2)
-        setError("Debes seleccionar un archivo")
-        setWarning(true)
+      setTypePopUp(2)
+      setError("Debes seleccionar un archivo")
+      setWarning(true)
+    }
+  }
+
+  // modificaciones de la imagen
+  const [inputStyle, setInputStyle] = useState(false)
+  const [archivo, setArchivo] = useState()
+
+  const handleInputChange = (event) => {
+    const selectedFiles = event.target.files
+    if (selectedFiles.length > 0) {
+      setInputStyle(true)
+      setArchivo(event.target.files[0].name)
+    } else {
+      setInputStyle(false)
+      setArchivo("")
     }
   }
 
@@ -153,15 +161,17 @@ const EditProfileEmpresa = () => {
       </div>
       <div className={style.contentContainer}>
         <div className={style.imgContainer}>
-          <img
-            src={uploadedImage}
-            alt="profile"
-          />
+          <img src={uploadedImage} alt="profile" />
         </div>
         <div className={style.editProfileContainer}>
           <div className={style.inputsContainer}>
             <div className={style.grupoDatos1}>
-              <ImageDirectUploader uploader={uploadFile} />
+              <ImageDirectUploader
+                uploader={uploadFile}
+                handleInputChange={handleInputChange}
+                isSelected={inputStyle}
+                archivo={archivo}
+              />
               <div className={style.inputSubContainer}>
                 <span>Nombre</span>
                 <ComponentInput

diff --git a/uniEmpleos/src/pages/EditProfileEstudiantes/EditProfileEstudiante.jsx b/uniEmpleos/src/pages/EditProfileEstudiantes/EditProfileEstudiante.jsx
@@ -2,26 +2,21 @@ import React, { useEffect, useState } from "react"
 import { useStoreon } from "storeon/react"
 import Select from "react-select"
 import makeAnimated from "react-select/animated"
-import { ca } from "date-fns/locale"
+import ImageDirectUploader from "@components/ImageDirectUploader/ImageDirectUploader.jsx"
 import style from "./EditProfileEstudiante.module.css"
 import ComponentInput from "../../components/Input/Input"
 import Button from "../../components/Button/Button"
-import DropDown from "../../components/dropDown/DropDown"
 import { Header } from "../../components/Header/Header"
 import { navigate } from "../../store"
 import useApi from "../../Hooks/useApi"
-import useIsImage from "../../Hooks/useIsImage"
-import ImageUploader from "../../components/ImageUploader/ImageUploader"
 import Popup from "../../components/Popup/Popup"
-import ImageDirectUploader from "@components/ImageDirectUploader/ImageDirectUploader.jsx"
 import API_URL from "@/api.js"
 
 const animatedComponents = makeAnimated()
 
 const EditProfileEstudiante = () => {
   const { user } = useStoreon("user")
   const api = useApi()
-  const isImage = useIsImage()
   const apiCareers = useApi()
   const publishChanges = useApi()
 
@@ -105,7 +100,6 @@ const EditProfileEstudiante = () => {
   useEffect(() => {
     if (updatedImage !== "") {
       const fotoUrl = API_URL + "/api/uploads/" + updatedImage
-      console.log("New image ", fotoUrl)
       setUploadedImage(fotoUrl)
     }
   }, [updatedImage])
@@ -184,15 +178,18 @@ const EditProfileEstudiante = () => {
     }
   }
 
+  // modificaciones de la imagen
+  const [inputStyle, setInputStyle] = useState(false)
+  const [archivo, setArchivo] = useState()
 
-  const handleUploadFile = (uploadedImage) => {
-    const fileType = isImage(uploadedImage)
-    if (fileType) {
-      setUploadedImage(uploadedImage)
+  const handleInputChange = (event) => {
+    const selectedFiles = event.target.files
+    if (selectedFiles.length > 0) {
+      setInputStyle(true)
+      setArchivo(event.target.files[0].name)
     } else {
-      setTypePopUp(2)
-      setError("El archivo debe ser una imagen")
-      setWarning(true)
+      setInputStyle(false)
+      setArchivo("")
     }
   }
 
@@ -203,12 +200,13 @@ const EditProfileEstudiante = () => {
     if (file) {
       const updated = await api.updateProfilePicture(file)
       if (updated.status === 200) {
-        console.log("Updated", updated.data.filename)
         setUpdatedImage(updated.data.filename)
         window.location.reload()
       } else {
         setTypePopUp(2)
-        setError("Upss... No se pudo actualizar tu foto de perfil, intenta mas tarde")
+        setError(
+          "Upss... No se pudo actualizar tu foto de perfil, intenta mas tarde"
+        )
         setWarning(true)
       }
     } else {
@@ -230,14 +228,16 @@ const EditProfileEstudiante = () => {
         <Header userperson="student" />
       </div>
       <div className={style.imgContainer}>
-        <img
-          src={uploadedImage}
-          alt="profile"
-        />
+        <img src={uploadedImage} alt="profile" />
       </div>
       <div className={style.editProfileContainer}>
         <div className={style.inputsContainer}>
-          <ImageDirectUploader uploader={uploadFile} />
+          <ImageDirectUploader
+            uploader={uploadFile}
+            handleInputChange={handleInputChange}
+            isSelected={inputStyle}
+            archivo={archivo}
+          />
           <div className={style.inputSubContainer}>
             <span>Nombres</span>
             <ComponentInput

diff --git a/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx b/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx
@@ -36,7 +36,7 @@ const PostulantesPage = ({ id }) => {
   const handleClickUsuario = (idUsuario) => {
     navigate(`/publicprofile/${idUsuario}`)
   }
-console.log(response)
+
   return (
     <div className={style.mainContainer}>
       <Header />
@@ -54,7 +54,11 @@ console.log(response)
               nombre={postulante.nombre}
               apellido={postulante.apellido}
               universidad={postulante.universidad}
-              pfp={postulante.foto === "" ? fotoPFP : `${API_URL}/api/uploads/${postulante.foto}`}
+              pfp={
+                postulante.foto === ""
+                  ? fotoPFP
+                  : `${API_URL}/api/uploads/${postulante.foto}`
+              }
               onClick={() => handleClickUsuario(postulante.id_estudiante)}
             />
           ))

diff --git a/uniEmpleos/src/pages/SignUpEmpresa/SignUpEmpresa.jsx b/uniEmpleos/src/pages/SignUpEmpresa/SignUpEmpresa.jsx
@@ -4,21 +4,17 @@ import ComponentInput from "../../components/Input/Input"
 import TextArea from "../../components/textAreaAutosize/TextAreaAuto"
 import Button from "../../components/Button/Button"
 import { navigate } from "../../store"
-import ImageUploader from "../../components/ImageUploader/ImageUploader"
 import Popup from "../../components/Popup/Popup"
-import useIsImage from "../../Hooks/useIsImage"
 import useApi from "../../Hooks/useApi"
 
 const SignUpEmpresa = () => {
-  const isImage = useIsImage()
   const api = useApi()
 
   const [nombre, setNombre] = useState("")
   const [correo, setCorreo] = useState("")
   const [detalles, setDetalles] = useState("")
   const [telefono, setTelefono] = useState("")
   const [password, setPassword] = useState("")
-  const [uploadedImage, setUploadedImage] = useState("")
   const [warning, setWarning] = useState(false)
   const [error, setError] = useState("")
   const [showPassword, setShowPassword] = useState(false)
@@ -70,7 +66,7 @@ const SignUpEmpresa = () => {
         correo,
         telefono,
         contra: password,
-        foto: uploadedImage,
+        foto: "",
       })
       if (apiResponse.status === 200) {
         setTypeError(3)
@@ -91,17 +87,6 @@ const SignUpEmpresa = () => {
     }
   }
 
-  const handleUploadFile = (UploadedImage) => {
-    const fileType = isImage(UploadedImage)
-    if (fileType) {
-      setUploadedImage(UploadedImage)
-    } else {
-      setTypeError(2)
-      setError("El archivo debe ser una imagen")
-      setWarning(true)
-    }
-  }
-
   const handlePassword = () => {
     setShowPassword(!showPassword)
   }
@@ -159,18 +144,6 @@ const SignUpEmpresa = () => {
               isOpen={showPassword}
             />
           </div>
-          <div className={style.inputSubContainer}>
-            <span>Foto de perfil</span>
-            <div className={style.imageUploaderContainer}>
-              <ImageUploader
-                onImageUpload={handleUploadFile}
-                image={uploadedImage}
-                width="30px"
-                height="30px"
-                placeholderImage="/images/pfp.svg"
-              />
-            </div>
-          </div>
           <div className={style.inputTextArea}>
             <span>Detalles</span>
             <TextArea