Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { axios } from '../../utils'
import { Button, Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { connect } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'

import Spinner from '../UI/Spinner'
import LoaderContainer from '../UI/LoaderContainer'
import FormErrorFeedback from '../UI/FormErrorFeedback'

const ApplyModal = ({
  onHide = function () {},
  jobId,
  show,
  userProfiles,
  onApplied,
  addNotification = function () {}, // redux destructuring
}) => {
  const [loading, setLoading] = useState(false)
  const { register, handleSubmit, errors, getValues, setError } = useForm()

  const handleOnSubmit = async (data) => {
    setLoading(true)
    const formData = new FormData()
    Object.entries(data).map(([key, value]) => formData.append(key, value))

    await axios.post(`/job/apply-job/${jobId}`, formData).then(({ data }) => {
      if (data.success) {
        onApplied()
        onHide()
      } else {
        if (typeof data.data === 'object') {
          Object.entries(data.data).map(([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',
          })
        }
      }
    })
    setLoading(false)
  }

  return (
    <Modal
      show={show}
      onHide={onHide}
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Perfil de Applicación
        </Modal.Title>
      </Modal.Header>
      <form onSubmit={handleSubmit(handleOnSubmit)}>
        <Modal.Body>
          <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>
              {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.Body>
        <Modal.Footer>
          <Button type="submit">Aplicar</Button>
          <Button onClick={onHide}>Cancelar</Button>
        </Modal.Footer>
      </form>
      {loading && (
        <LoaderContainer>
          <Spinner />
        </LoaderContainer>
      )}
    </Modal>
  )
}

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

export default connect(null, mapDispatchToProps)(ApplyModal)