From ad9dcc99e0360bde8c5e9b9f8384bf401324fa50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jimena=20Hern=C3=A1ndez?= Date: Tue, 10 Oct 2023 17:30:50 -0600 Subject: [PATCH 1/2] fixed dropdowns --- uniEmpleos/src/components/Header/Header.jsx | 9 ++-- .../src/pages/OfferDetails/OfferDetails.jsx | 47 ++++++++++++++----- uniEmpleos/src/pages/nuevaOferta/NewOffer.jsx | 33 +++++++++++-- 3 files changed, 66 insertions(+), 23 deletions(-) diff --git a/uniEmpleos/src/components/Header/Header.jsx b/uniEmpleos/src/components/Header/Header.jsx index d15575c2..74357cef 100644 --- a/uniEmpleos/src/components/Header/Header.jsx +++ b/uniEmpleos/src/components/Header/Header.jsx @@ -2,9 +2,8 @@ import React, { useState } from "react" import { useStoreon } from "storeon/react" import PropTypes from "prop-types" import { FaBars, FaTimes } from "react-icons/fa" -import {AiOutlineLogout} from "react-icons/ai" +import { LuLogOut } from "react-icons/lu" import Logo from "../Logo/Logo" -import Button from "../Button/Button" import "./header.css" import { navigate } from "../../store" @@ -48,7 +47,7 @@ export const Header = () => { Postulaciones
- +
) @@ -62,7 +61,7 @@ export const Header = () => { Chat
- +
) @@ -75,7 +74,7 @@ export const Header = () => { Perfil
- +
) diff --git a/uniEmpleos/src/pages/OfferDetails/OfferDetails.jsx b/uniEmpleos/src/pages/OfferDetails/OfferDetails.jsx index 9c9ef56f..04e69adb 100644 --- a/uniEmpleos/src/pages/OfferDetails/OfferDetails.jsx +++ b/uniEmpleos/src/pages/OfferDetails/OfferDetails.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from "react" +import Select from "react-select" import { useStoreon } from "storeon/react" import Joi from "joi" import { useQuill } from "react-quilljs" @@ -29,7 +30,7 @@ const OfferDetails = ({ id }) => { const [salario, setSalario] = useState("") const [puesto, setPuesto] = useState("") const [detalles, setDetalles] = useState("") - const [carrera, setCarrera] = useState([]) + const [carrera, setCarrera] = useState("") const [carreras, setCarreras] = useState([]) const { quill, quillRef } = useQuill() const [warning, setWarning] = useState(false) @@ -63,13 +64,16 @@ const OfferDetails = ({ id }) => { setSalario(dataa[i].salario) setRequisitos(dataa[i].requisitos) setDetalles(dataa[i].descripcion) - if (dataa[i].id_carreras !== null) { - setCarrera(dataa[i].id_carreras.map((num) => num.toString())) + if ( + dataa[i].id_carreras !== null && + dataa[i].id_carreras.length > 0 + ) { + setCarrera(dataa[i].id_carreras[0].toString()) // usar el primer elemento del array } else { - setCarrera(["1"]) + setCarrera("1") // o cualquier valor predeterminado que desees } } else { - console.log("not changing", id) + console.log(carrera) } } } @@ -92,7 +96,7 @@ const OfferDetails = ({ id }) => { descripcion: details, requisitos, salario: parseFloat(salario), - id_carreras: carrera, + id_carreras: [carrera], }) if (apiResponse.status === 200) { navigate("/postulacionempresa") @@ -118,10 +122,7 @@ const OfferDetails = ({ id }) => { } const handleCarrera = (e) => { - const selectedOptions = Array.from(e.target.selectedOptions).map( - (option) => option.value - ) - setCarrera(selectedOptions) + setCarrera(e.value.toString()) } const handleInputsValue = (e) => { @@ -214,9 +215,29 @@ const OfferDetails = ({ id }) => {
Carrera - ({ + ...baseStyles, + borderColor: state.isFocused ? "#a08ae5" : "grey", + color: "black", + }), + option: (baseStyles) => ({ + ...baseStyles, + color: "black", + }), + }} + name="carrera" + theme={(theme) => ({ + ...theme, + colors: { + ...theme.colors, + primary25: "#94bd0f", + primary: "#a08ae5", + }, + })} + options={carreras} + value={carreras.find((option) => option.value === carrera)} onChange={handleCarrera} />
diff --git a/uniEmpleos/src/pages/nuevaOferta/NewOffer.jsx b/uniEmpleos/src/pages/nuevaOferta/NewOffer.jsx index f8939575..4bf9d69d 100644 --- a/uniEmpleos/src/pages/nuevaOferta/NewOffer.jsx +++ b/uniEmpleos/src/pages/nuevaOferta/NewOffer.jsx @@ -1,5 +1,7 @@ import React, { useEffect, useState } from "react" +import Select from "react-select" import { useStoreon } from "storeon/react" +import { useQuill } from "react-quilljs" import style from "./NewOffer.module.css" import { Header } from "../../components/Header/Header" import Button from "../../components/Button/Button" @@ -8,7 +10,6 @@ import TextArea from "../../components/textAreaAutosize/TextAreaAuto" import DropDown from "../../components/dropDown/DropDown" import { navigate } from "../../store" import useApi from "../../Hooks/useApi" -import { useQuill } from "react-quilljs" import "react-quill/dist/quill.snow.css" import Popup from "../../components/Popup/Popup" @@ -58,7 +59,7 @@ const Postulacion = () => { } const handleCarrera = (e) => { - setCarrera(e.target.value) + setCarrera(e.value) } const handleInputsValue = (e) => { @@ -132,12 +133,34 @@ const Postulacion = () => {
Carrera - ({ + ...baseStyles, + borderColor: state.isFocused ? "#a08ae5" : "grey", + color: "black", + }), + option: (baseStyles) => ({ + ...baseStyles, + color: "black", + }), + }} + name="carrera" + theme={(theme) => ({ + ...theme, + colors: { + ...theme.colors, + primary25: "#94bd0f", + primary: "#a08ae5", + }, + })} + defaultValue={carrera} + options={carreras} + value={carreras.find((option) => option.label === carrera)} onChange={handleCarrera} />
+
Requisitos