Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'
import Datetime from 'react-datetime'
import { useForm } from 'react-hook-form'
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 { register, watch } = useForm()
        const [year, setYear] = useState(new Intl.DateTimeFormat('en').format(new Date()))
        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) =>
                                                setYear(new Intl.DateTimeFormat('en', { year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
                                        }
                                        inputProps={{ className: 'form-control' }}
                                        initialValue={Date.parse(year)}
                                        closeOnSelect
                                        value={year}
                                />
                        </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