Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { connect } from 'react-redux'
import { useForm } from 'react-hook-form'

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

import Modal from 'components/UI/modal/Modal'
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'

const ApplyModal = ({
  jobId,
  show,
  userProfiles,
  onApplied,
  onHide = function () {},
  addNotification = function () {} // redux destructuring
}) => {
  const {
    register,
    handleSubmit,
    getValues,
    setError,
    formState: { errors }
  } = useForm()

  const onSubmit = handleSubmit((data) => {
    const formData = new FormData()
    Object.entries(data).map(([key, value]) => formData.append(key, value))

    axios.post(`/job/apply-job/${jobId}`, formData).then(({ data }) => {
      if (data.success) {
        onApplied()
        onHide()
      } else {
        if (typeof data.data === 'object') {
          Object.entries(data.data).forEach(([key, value]) => {
            if (key in getValues()) {
              setError(key, { type: 'manual', message: value[0] })
            }
          })
        } else if (typeof data.data === 'string') {
          addNotification({
            style: 'danger',
            msg: data.data
          })
        } else {
          addNotification({
            style: 'danger',
            msg: 'Ha ocurrido un error, por favor intente más tarde'
          })
        }
      }
    })
  })

  return (
    <Modal
      title='Perfil de Applicación'
      show={show}
      onClose={onHide}
      onAccept={onSubmit}
    >
      <div className='form-groupp'>
        <select
          name='user_profile_id'
          id='user_profile_id'
          defaultValue=''
          ref={register({
            required: 'Por favor seleccione un perfil'
          })}
        >
          <option value=''>Perfil de applicación</option>
          {userProfiles &&
            Object.entries(userProfiles).map(([key, value]) => (
              <option value={key} key={key}>
                {value}
              </option>
            ))}
        </select>
        {errors?.user_profile_id?.message && (
          <FormErrorFeedback>
            {errors.user_profile_id.message}
          </FormErrorFeedback>
        )}
      </div>
    </Modal>
  )
}

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification)
}

export default connect(null, mapDispatchToProps)(ApplyModal)