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