Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'

import { Link } from 'react-router-dom'

import { getData } from '../../helpers/fetchHelpers';

import EditItem from '../components/EditItem';

import CategoryModal from '../components/Modals/CategoryModal';

import DegreesModal from '../components/Modals/DegreesModal';

import EmploymentTypeModal from '../components/Modals/EmploymentTypeModal';

import ExperienceModal from '../components/Modals/ExperiencieModal';

import LanguageModal from '../components/Modals/LanguageModal';

import LastAplicationDayModal from '../components/Modals/LastAplicationDayModal';

import LocationModal from '../components/Modals/LocationModal';

import OverviewModal from '../components/Modals/OverviewModal';

import SalaryModal from '../components/Modals/SalaryModal';

import SkillsModal from '../components/Modals/SkillsModal';

import StatusModal from '../components/Modals/StatusModal';

import TitleModal from '../components/Modals/TitleModal';

const JobsEditView = ({ linkEdit, googleApi }) => {

    const [modalToShow, setModalToShow] = useState(null);

    const [itemsData, setItemsData] = useState({

        title: '',

        status: '',

        description: '',

        location: '',

        employment_type: '',

        last_date_of_application: '',

        job_category: '',

        experience: '',

        salary: '',

        degrees: [],

        languages: [],

        skills: []

    });

    const [itemsRoutes, setItemsRoutes] = useState({

        route_degrees: "",

        route_employment_type: "",

        route_experience: "",

        route_extended: "",

        route_job_category: "",

        route_languages: "",

        route_last_date_of_application: "",

        route_location: "",

        route_salary: "",

        route_skills: "",

        route_status: "",

        route_title: ""

    });

    const closeModal = () => setModalToShow(null)

    useEffect(() => {

        getData(linkEdit)

            .then(results => {

                setItemsData({

                    ...itemsData,

                    title: results.title,

                    status: results.status,

                    description: results.description,

                    location: results.location,

                    employment_type: results.employment_type,

                    last_date_of_application: results.last_date_of_application,

                    job_category: results.job_category,

                    experience: results.experience,

                    salary: results.salary,

                    degrees: results.degrees,

                    languages: results.languages,

                    skills: results.skills

                })

                setItemsRoutes({

                    route_degrees: results.route_degrees,

                    route_employment_type: results.route_employment_type,

                    route_experience: results.route_experience,

                    route_extended: results.route_extended,

                    route_job_category: results.route_job_category,

                    route_languages: results.route_languages,

                    route_last_date_of_application: results.route_last_date_of_application,

                    route_location: results.route_location,

                    route_salary: results.route_salary,

                    route_skills: results.route_skills,

                    route_status: results.route_status,

                    route_title: results.route_title

                })

            })

    }, [modalToShow]);

    const ModalOptions = {

        "Estatus": <StatusModal closeModal={closeModal} modalData={itemsData.status} dataLink={itemsRoutes.route_status} />,

        "Título": <TitleModal closeModal={closeModal} modalData={itemsData.title} dataLink={itemsRoutes.route_title} />,

        "Visión general": <OverviewModal closeModal={closeModal} modalData={itemsData.description} dataLink={itemsRoutes.route_extended} />,

        "Último día de aplicación": <LastAplicationDayModal closeModal={closeModal} modalData={itemsData.last_date_of_application} dataLink={itemsRoutes.route_last_date_of_application} />,

        "Tipo de empleo": <EmploymentTypeModal closeModal={closeModal} modalData={itemsData.employment_type} dataLink={itemsRoutes.route_employment_type} />,

        "Ubicación": <LocationModal closeModal={closeModal} modalData={itemsData.location} dataLink={itemsRoutes.route_location} googleApiKey={googleApi} />,

        "Idiomas": <LanguageModal closeModal={closeModal} dataLink={itemsRoutes.route_languages} />,

        "Habilidades": <SkillsModal closeModal={closeModal} dataLink={itemsRoutes.route_skills} />,

        "Grados": <DegreesModal closeModal={closeModal} dataLink={itemsRoutes.route_degrees} />,

        "Categoría": <CategoryModal closeModal={closeModal} dataLink={itemsRoutes.route_job_category} />,

        "Experiencia": <ExperienceModal closeModal={closeModal} modalData={itemsData.experience} />,

        "Salario": <SalaryModal closeModal={closeModal} modalData={itemsData.salary} />,

    }

    return (

        <>

            <section className="content-header">

                <div className="container-fluid">

                    <div className="row mb-2">

                        <div className="col-sm-12">

                            <Link to='/jobs' className='text-decoration-none text-body'>

                                <h1>

                                    <i className='fa fa-angle-left fw-bold mr-2' />

                                    Editar empleo

                                </h1>

                            </Link>

                        </div>

                    </div>

                </div>

            </section>

            <section class="content">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-lg-3">

                        </div>

                        <div class="col-lg-6">

                            <div class="main-ws-sec">

                                <EditItem title='Estatus' data={itemsData.status} showModal={setModalToShow} />

                                <EditItem title='Título' data={itemsData.title} showModal={setModalToShow} />

                                <EditItem title='Visión general' data={itemsData.description} showModal={setModalToShow} />

                                <EditItem title='Último día de aplicación' data={itemsData.last_date_of_application} showModal={setModalToShow} />

                                <EditItem title='Tipo de empleo' data={itemsData.employment_type} showModal={setModalToShow} />

                                <EditItem title='Ubicación' data={itemsData.location} showModal={setModalToShow} />

                                <EditItem title='Experiencia' data={itemsData.experience} showModal={setModalToShow} />

                                <EditItem title='Salario' data={itemsData.salary} showModal={setModalToShow} />

                                <EditItem title='Categoría' data={itemsData.job_category} showModal={setModalToShow} />

                                <EditItem title='Habilidades' data={itemsData.skills} showModal={setModalToShow} />

                                <EditItem title='Idiomas' data={itemsData.languages} showModal={setModalToShow} />

                                <EditItem title='Grados' data={itemsData.degrees} showModal={setModalToShow} />

                            </div>

                            {

                                ModalOptions[modalToShow]

                            }

                        </div>

                        <div class="col-lg-3">

                        </div>

                    </div>

                </div>

            </section>

        </>

    )

}

export default JobsEditView