Proyectos de Subversion LeadersLinked - Backend

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

import Datetime from 'react-datetime'

import { useForm } from 'react-hook-form'

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

import SearchLocationInput from '../../../shared/SearchLocationInput'

import SubmitModal from './SubmitModal'

const jobTypeOptions = [

	{ label: 'Tiempo completo', value: 'f' },

	{ label: 'Tiempo parcial', value: 'p' },

	{ label: 'Contratado', value: 'c' },

	{ label: 'Temporal', value: 't' },

]

const AddModal = ({ closeModal, dataLink, googleApiKey }) => {

	const { register, watch } = useForm()

	const [year, setYear] = useState()

	const [value, setValue] = useState('')

	const [data, setData] = useState({})

	const [jobCategoryOptions, setJobsCategoryOptions] = useState([])

	useEffect(() => {

		getData(dataLink)

			.then(({ job_categories }) => {

				Object.entries(job_categories).map(([key, value]) => {

					setJobsCategoryOptions(prev => [...prev, { value: key, name: value }])

				})

			})

	}, [dataLink])

	return (

		<SubmitModal

			closeModal={closeModal}

			postLink={dataLink}

			submitData={{

				...data,

				title: watch('title'),

				employment_type: watch('employment_type'),

				last_date_of_application: year,

				job_category_id: watch('job_category-id'),

				add_location_search: value

			}}

			title="Nuevo empleo"

		>

			<div className="form-group">

				<label>Título</label>

				<input type='text' name='tile' ref={register({ required: true })} />

			</div>

			<div className="form-group">

				<label>Tipo de empleo</label>

				<select

					className='form-control'

					name="employment_type"

					ref={register({ required: true })}

				>

					{

						jobTypeOptions.map(({ value, label }) => (

							<option key={value} value={value}>{label}</option>

						))

					}

				</select>

			</div>

			<div className="form-group">

				<label>Tipo de empleo</label>

				<Datetime

					dateFormat="DD-MM-YYYY"

					timeFormat={false}

					onChange={(e) =>

						setYear(new Intl.DateTimeFormat({ year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))

					}

					inputProps={{ className: 'form-control' }}

					closeOnSelect

				/>

			</div>

			<div className="form-group">

				<label>Categoría de Empleo</label>

				<select

					className='form-control'

					name="job_category-id"

					ref={register({ required: true })}

				>

					{

						jobCategoryOptions.map(({ value, name }) => (

							<option key={value} value={value}>{name}</option>

						))

					}

				</select>

			</div>

			<SearchLocationInput

				value={value}

				setValue={setValue}

				googleApiKey={googleApiKey}

				updateData={setData}

			/>

		</SubmitModal >

	)

}

export default AddModal