Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
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 styled from 'styled-components'
import { addNotification } from '../../../../redux/notification/notification.actions'
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
import Spinner from '../../../../shared/loading-spinner/Spinner'

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`

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 &&
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      }
    </Modal >
  )
}

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

export default connect(null, mapDispatchToProps)(ApplyModal)