Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

import Datetime from 'react-datetime'

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

import { useDispatch } from 'react-redux'

import { addNotification } from '../../../redux/notification/notification.actions'

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

	const dispatch = useDispatch()

	const { register, watch } = useForm()

	const [year, setYear] = useState(Date.now())

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

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

	return (

		<SubmitModal

			closeModal={closeModal}

			postLink={dataLink}

			onComplete={onComplete}

			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 className='form-control' type='text' name='title' 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>Último día de aplicación</label>

				<Datetime

					dateFormat="DD-MM-YYYY"

					timeFormat={false}

					onChange={(e) => {

						if (Date.now() > new Date(e.toDate()).getTime()) {

							return dispatch(addNotification({

								style: 'danger',

								msg: 'La fecha no puede ser igual o anterior a la actual'

							}))

						}

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

					}}

					initialValue={new Date(new Intl.DateTimeFormat('en-EN', year).format())}

					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 })}

				>

					{

						Object.entries(jobCategoryOptions).map(([value, name]) => (

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

						))

					}

				</select>

			</div>

			<div className="form-group">

				<label>Ubicación</label>

				<SearchLocationInput

					value={value}

					setValue={setValue}

					googleApiKey={googleApiKey}

					updateData={setData}

				/>

			</div>

		</SubmitModal >

	)

}

export default AddModal