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, labels }) => {

        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 title={labels.STATUS} closeModal={closeModal} modalData={itemsData.status} dataLink={itemsRoutes.route_status} />,
                'Título': <TitleModal title={labels.TITLE} closeModal={closeModal} modalData={itemsData.title} dataLink={itemsRoutes.route_title} />,
                'Visión general': <OverviewModal title={labels.OVERVIEW} closeModal={closeModal} modalData={itemsData.description} dataLink={itemsRoutes.route_extended} />,
                'Último día de aplicación': <LastAplicationDayModal title={labels.LAST_DATE_OF_APPLICATION} closeModal={closeModal} modalData={itemsData.last_date_of_application} dataLink={itemsRoutes.route_last_date_of_application} />,
                'Tipo de empleo': <EmploymentTypeModal title={labels.EMPLOYMENT_TYPE} closeModal={closeModal} modalData={itemsData.employment_type} dataLink={itemsRoutes.route_employment_type} />,
                'Ubicación': <LocationModal title={labels.LOCATION} closeModal={closeModal} modalData={itemsData.location} dataLink={itemsRoutes.route_location} googleApiKey={googleApi} />,
                'Idiomas': <LanguageModal title={labels.LANGUAGES} closeModal={closeModal} dataLink={itemsRoutes.route_languages} />,
                'Habilidades': <SkillsModal title={labels.SKILLS} closeModal={closeModal} dataLink={itemsRoutes.route_skills} />,
                'Grados': <DegreesModal title={labels.DEGREES} closeModal={closeModal} dataLink={itemsRoutes.route_degrees} />,
                'Categoría': <CategoryModal title={labels.CATEGORIE} closeModal={closeModal} dataLink={itemsRoutes.route_job_category} />,
                'Experiencia': <ExperienceModal title={labels.EXPERIENCE} closeModal={closeModal} dataLink={itemsRoutes.route_experience} />,
                'Salario': <SalaryModal title={labels.SALARY} closeModal={closeModal} dataLink={itemsRoutes.route_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' />
                                                                        {labels.EDIT_JOB}
                                                                </h1>
                                                        </Link>
                                                </div>
                                        </div>
                                </div>
                        </section>
                        <section className="content">
                                <div className="container-fluid">
                                        <div className="row">
                                                <div className="col-lg-3">
                                                </div>
                                                <div className="col-lg-6">
                                                        <div className="main-ws-sec">
                                                                <EditItem title={labels.STATUS} data={itemsData.status} showModal={setModalToShow} />
                                                                <EditItem title={labels.TITLE} data={itemsData.title} showModal={setModalToShow} />
                                                                <EditItem title={labels.OVERVIEW} data={itemsData.description} showModal={setModalToShow} />
                                                                <EditItem title={labels.LAST_DATE_OF_APPLICATION} data={itemsData.last_date_of_application} showModal={setModalToShow} />
                                                                <EditItem title={labels.EMPLOYMENT_TYPE} data={itemsData.employment_type} showModal={setModalToShow} />
                                                                <EditItem title={labels.LOCATION} data={itemsData.location} showModal={setModalToShow} />
                                                                <EditItem title={labels.EXPERIENCE} data={itemsData.experience} showModal={setModalToShow} />
                                                                <EditItem title={labels.SALARY} data={itemsData.salary} showModal={setModalToShow} />
                                                                <EditItem title={labels.CATEGORIE} data={itemsData.job_category} showModal={setModalToShow} />
                                                                <EditItem title={labels.SKILLS} data={itemsData.skills} showModal={setModalToShow} />
                                                                <EditItem title={labels.LANGUAGES} data={itemsData.languages} showModal={setModalToShow} />
                                                                <EditItem title={labels.DEGREES} data={itemsData.degrees} showModal={setModalToShow} />
                                                        </div>
                                                        {
                                                                ModalOptions[modalToShow]
                                                        }
                                                </div>
                                                <div className="col-lg-3">
                                                </div>
                                        </div>
                                </div>
                        </section>
                </>
        )
}

export default JobsEditView