Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { getData } from '../../helpers/fetchHelpers';
import useDataFetching from '../../hooks/useDataFetching';
import Spinner from '../../shared/Spinner';
import EditItem from '../components/EditItem';
import CategoryModal from '../components/Modals/CategoryModal';
import DegreesModal from '../components/Modals/DegreesModal';
import EmploymentTypeModal from '../components/Modals/EmploymentTypeModal';
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 SkillsModal from '../components/Modals/SkillsModal';
import StatusModal from '../components/Modals/StatusModal';
import TitleModal from '../components/Modals/TitleModal';

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

    const { results, loading, error } = useDataFetching(linkEdit)
    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(() => {
        if (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": "",
        "Salario": "",
    }

    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">
                            {
                                loading
                                    ? <Spinner />
                                    :
                                    <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