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} />,

		'Titulo': <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