Merge pull request #197 from markalbrand56/angel

Angel
markalbrand56 · Oct 9, 2023 · 3159d01 · 3159d01
2 parents 37988a9 + 4f9b2ba
commit 3159d01
Show file tree

Hide file tree

Showing 13 changed files with 492 additions and 16 deletions.
diff --git a/uniEmpleos/src/components/InfoStudent/InfoStudent.jsx b/uniEmpleos/src/components/InfoStudent/InfoStudent.jsx
@@ -0,0 +1,29 @@
+import React from "react"
+import PropTypes from "prop-types"
+import style from "./InfoStudent.module.css"
+
+const InfoStudent = ({ nombre, apellido, universidad, pfp, onClick }) => {
+  return (
+    <div className={style.mainContainer}>
+      <button type="button" className={style.button} onClick={onClick}>
+        <div className={style.pfpContainer}>
+          <img className={style.pfp} src={pfp} alt={`${nombre} ${apellido}`} />
+        </div>
+        <div className={style.infoContainer}>
+          <span className={style.name}>{`${nombre} ${apellido}`}</span>
+          <span className={style.university}>{universidad}</span>
+        </div>
+      </button>
+    </div>
+  )
+}
+
+InfoStudent.propTypes = {
+  nombre: PropTypes.string.isRequired,
+  apellido: PropTypes.string.isRequired,
+  universidad: PropTypes.string.isRequired,
+  pfp: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+}
+
+export default InfoStudent
diff --git a/uniEmpleos/src/components/InfoStudent/InfoStudent.module.css b/uniEmpleos/src/components/InfoStudent/InfoStudent.module.css
@@ -0,0 +1,82 @@
+.mainContainer {
+  display: flex;
+  background-color: transparent;
+  width: calc(100% / 2 - 20px);
+  height: 100px;
+  padding: 10px;
+  animation: aparecer 0.5s ease;
+}
+
+@keyframes aparecer {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+.button {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  background-color: #a08ae5;
+  gap: 20px;
+  border-radius: 10px;
+  padding: 0;
+}
+
+.button:hover {
+  cursor: pointer;
+  background-color: #8c6fd4;
+  border: none;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.button:focus {
+  border: none;
+}
+
+.pfpContainer {
+  width: calc(25% - 20px);
+  max-width: 80px;
+  max-height: 80px;
+  display: flex;
+  align-items: center;
+}
+
+.pfp {
+  border-radius: 50%;
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.infoContainer {
+  width: calc(75% - 20px);
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  scroll-behavior: smooth;
+}
+
+.name {
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.university {
+  font-size: 16px;
+  font-weight: 400;
+  color: #fff;
+}
diff --git a/uniEmpleos/src/components/InfoTab/InfoTab.jsx b/uniEmpleos/src/components/InfoTab/InfoTab.jsx
@@ -3,7 +3,15 @@ import PropTypes from "prop-types"
 import styles from "./InfoTab.module.css"
 import Button from "../Button/Button"
 
-const InfoTab = ({ title, area, salary, company, labelbutton, onClick }) => {
+const InfoTab = ({
+  title,
+  area,
+  salary,
+  company,
+  labelbutton,
+  onClick,
+  verPostulantes,
+}) => {
   return (
     <div className={styles.container}>
       {title && (
@@ -24,6 +32,9 @@ const InfoTab = ({ title, area, salary, company, labelbutton, onClick }) => {
       )}
       <div className={styles.button}>
         <Button label={labelbutton} onClick={onClick} />
+        {verPostulantes && (
+          <Button label="Ver postulantes" onClick={verPostulantes} />
+        )}
       </div>
     </div>
   )
@@ -36,6 +47,7 @@ InfoTab.propTypes = {
   company: PropTypes.string.isRequired,
   labelbutton: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  verPostulantes: PropTypes.func.isRequired,
 }
 
 export default InfoTab
diff --git a/uniEmpleos/src/components/InfoTab/InfoTab.module.css b/uniEmpleos/src/components/InfoTab/InfoTab.module.css
@@ -38,4 +38,10 @@
     border-radius: 10px;
     background: #f8f8ef;
     padding: 10px;
+}
+
+.button {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
 }
diff --git a/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx b/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react"
+import PropTypes from "prop-types"
+import useApi from "../../Hooks/useApi"
+import InfoStudent from "../../components/InfoStudent/InfoStudent"
+import style from "./PostulantesPage.module.css"
+import Popup from "../../components/Popup/Popup"
+import { Header } from "../../components/Header/Header"
+import { navigate } from "../../store"
+
+const PostulantesPage = ({ id }) => {
+  const api = useApi()
+  const [response, setResponse] = useState([])
+  const [warning, setWarning] = useState(false)
+  const [error, setError] = useState("")
+  const [typeError, setTypeError] = useState(1)
+
+  const obtainPostulantes = async () => {
+    const datos = await api.handleRequest("POST", "/offers/applicants", {
+      id_oferta: parseInt(id, 10),
+    })
+    if (datos.status === 200) {
+      setResponse(datos)
+    } else {
+      setTypeError(1)
+      setError("Error al obtener los postulantes")
+      setWarning(true)
+    }
+  }
+
+  useEffect(() => {
+    obtainPostulantes()
+  }, [])
+
+  const handleClickUsuario = (idUsuario) => {
+    navigate(`/publicprofile/${idUsuario}`)
+  }
+
+  return (
+    <div className={style.mainContainer}>
+      <Header />
+      <Popup
+        message={error}
+        status={warning}
+        style={typeError}
+        close={() => setWarning(false)}
+      />
+      <div className={style.infoStudentContainer}>
+        {response.data ? (
+          response.data.map((postulante) => (
+            <InfoStudent
+              nombre={postulante.nombre}
+              apellido={postulante.apellido}
+              universidad={postulante.universidad}
+              pfp={postulante.foto}
+              onClick={() => handleClickUsuario(postulante.id_estudiante)}
+            />
+          ))
+        ) : (
+          <span className={style.sinPostulantes}>No hay postulantes</span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+PostulantesPage.propTypes = {
+  id: PropTypes.string.isRequired,
+}
+
+export default PostulantesPage
diff --git a/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.module.css b/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.module.css
@@ -0,0 +1,19 @@
+.mainContainer {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.infoStudentContainer {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: flex-start
+}
+
+.sinPostulantes {
+    color: #000;
+}
diff --git a/uniEmpleos/src/pages/PostulationsEmpresa/PostulationsEmpresa.jsx b/uniEmpleos/src/pages/PostulationsEmpresa/PostulationsEmpresa.jsx
@@ -7,6 +7,7 @@ import InfoTab from "../../components/InfoTab/InfoTab"
 import { Header } from "../../components/Header/Header"
 import { navigate } from "../../store"
 import useApi from "../../Hooks/useApi"
+import Popup from "../../components/Popup/Popup"
 
 const schema = Joi.object({
   token: Joi.string().required(),
@@ -23,8 +24,12 @@ const PostulationsEmpresa = () => {
 
   const { user } = useStoreon("user")
   const api = useApi()
+  const obtainPostulantes = useApi()
 
   const [dataa, setData] = useState([])
+  const [warning, setWarning] = useState(false)
+  const [error, setError] = useState("")
+  const [typeError, setTypeError] = useState(1)
 
   useEffect(() => {
     if (api.data) {
@@ -48,9 +53,32 @@ const PostulationsEmpresa = () => {
       )
   }
 
+  const handleVerPostulantes = async (id) => {
+    const datos = await obtainPostulantes.handleRequest(
+      "POST",
+      "/offers/applicants",
+      {
+        id_oferta: parseInt(id, 10),
+      }
+    )
+    if (datos.data) {
+      navigate(`/postulantes/${id}`)
+    } else {
+      setTypeError(2)
+      setError("La oferta no tiene postulantes")
+      setWarning(true)
+    }
+  }
+
   return (
     <div className={styles.containePostulation}>
       <Header userperson="company" />
+      <Popup
+        message={error}
+        status={warning}
+        style={typeError}
+        close={() => setWarning(false)}
+      />
       {api.data ? (
         <div className={styles.containerinfoprincipal}>
           {dataa.map((postulation) => (
@@ -63,6 +91,9 @@ const PostulationsEmpresa = () => {
               onClick={() => {
                 saveidlocalstorage(postulation.id_oferta)
               }}
+              verPostulantes={() => {
+                handleVerPostulantes(postulation.id_oferta)
+              }}
             />
           ))}
         </div>

diff --git a/uniEmpleos/src/pages/PostulationsEstudentPage/PostulationsEstudent.jsx b/uniEmpleos/src/pages/PostulationsEstudentPage/PostulationsEstudent.jsx
@@ -1,6 +1,6 @@
-import react, { useState, useEffect } from "react"
-import useApi from "../../Hooks/useApi"
+import React, { useState, useEffect } from "react"
 import { useStoreon } from "storeon/react"
+import useApi from "../../Hooks/useApi"
 import Header from "../../components/Header/Header"
 import InfoTab from "../../components/InfoTab/InfoTab"
 import styles from "./PostulationsEstudent.module.css"
@@ -13,23 +13,34 @@ const PostulationsEstudent = () => {
   const [typePopUp, setTypePopUp] = useState(1)
   const [warning, setWarning] = useState(false)
   const [error, setError] = useState("")
+  const [postulaciones, setPostulaciones] = useState([])
 
-  const obtainPostulations = () => {
-    api.handleRequest("GET", "/postulations/getFromStudent")
+  const obtainPostulations = async () => {
+    const datos = await api.handleRequest("GET", "/postulations/getFromStudent")
+    if (datos.status === 200) {
+      setPostulaciones(datos.data)
+    } else {
+      setTypePopUp(1)
+      setError("Error al obtener las postulaciones")
+      setWarning(true)
+    }
   }
 
   useEffect(() => {
     obtainPostulations()
   }, [])
 
   const eliminarPostulacion = async (id) => {
-    const respuesta = await deletePostulation.handleRequest("DELETE", "/postulations/?id_postulacion=" + id)
+    const respuesta = await deletePostulation.handleRequest(
+      "DELETE",
+      `/postulations/?id_postulacion=${id}`
+    )
     if (respuesta.status === 200) {
       setTypePopUp(3)
       setError("Postulación eliminada con éxito")
       setWarning(true)
       obtainPostulations()
-    } else { 
+    } else {
       setTypePopUp(1)
       setError("No se pudo eliminar la postulación")
       setWarning(true)
@@ -43,11 +54,11 @@ const PostulationsEstudent = () => {
         message={error}
         status={warning}
         style={typePopUp}
-        close = {() => setWarning(false)}
+        close={() => setWarning(false)}
       />
-      {api.data ? (
+      {postulaciones.postulations && postulaciones.postulations.length > 0 ? (
         <div className={styles.mainInfoContainer}>
-          {api.data.postulations.map((postulation) => (
+          {postulaciones.postulations.map((postulation) => (
             <InfoTab
               key={postulation.id_oferta}
               title={postulation.puesto}