Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5822 stevensc 1 
/* eslint-disable react/prop-types */
2 
import React, { useState } from 'react'
3 
import { axios } from '../../../../utils'
4 
import { Button, Modal } from 'react-bootstrap'
5 
import { useForm } from 'react-hook-form'
6 
import { connect } from 'react-redux'
7 
import styled from 'styled-components'
8 
import { addNotification } from '../../../../redux/notification/notification.actions'
9 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
10 
import Spinner from '../../../../shared/loading-spinner/Spinner'
11 
 
12 
const StyledSpinnerContainer = styled.div`
13 
  position: absolute;
14 
  left: 0;
15 
  top: 0;
16 
  width: 100%;
17 
  height: 100%;
18 
  background: rgba(255, 255, 255, 0.4);
19 
  display: flex;
20 
  justify-content: center;
21 
  align-items: center;
22 
  z-index: 300;
23 
`
24 
 
25 
const ApplyModal = ({
26 
  onHide = function () { },
27 
  jobId,
28 
  show,
29 
  userProfiles,
30 
  onApplied,
31 
  addNotification = function () { } // redux destructuring
32 
}) => {
33 
  const [loading, setLoading] = useState(false)
34 
  const { register, handleSubmit, errors, getValues, setError } = useForm()
35 
 
36 
  const handleOnSubmit = async (data) => {
37 
    setLoading(true)
38 
    const formData = new FormData()
39 
    Object.entries(data)
40 
      .map(([key, value]) => formData.append(key, value))
41 
 
42 
    await axios.post(`/job/apply-job/${jobId}`, formData)
43 
      .then(({ data }) => {
44 
        if (data.success) {
45 
          onApplied()
46 
          onHide()
47 
        } else {
48 
          if (typeof data.data === 'object') {
49 
            Object.entries(data.data).map(([key, value]) => {
50 
              if (key in getValues()) {
51 
                setError(key, { type: 'manual', message: value[0] })
52 
              }
53 
            })
54 
          } else if (typeof data.data === 'string') {
55 
            addNotification({
56 
              style: 'danger',
57 
              msg: data.data
58 
            })
59 
          } else {
60 
            addNotification({
61 
              style: 'danger',
62 
              msg: 'Ha ocurrido un error, por favor intente más tarde'
63 
            })
64 
          }
65 
        }
66 
      })
67 
    setLoading(false)
68 
  }
69 
 
70 
  return (
71 
    <Modal
72 
      show={show}
73 
      onHide={onHide}
74 
      aria-labelledby="contained-modal-title-vcenter"
75 
      centered>
76 
      <Modal.Header closeButton>
77 
        <Modal.Title id="contained-modal-title-vcenter">
78 
          Perfil de Applicación
79 
        </Modal.Title>
80 
      </Modal.Header>
81 
      <form onSubmit={handleSubmit(handleOnSubmit)}>
82 
        <Modal.Body>
83 
          <div className="form-groupp">
84 
            <select
85 
              name="user_profile_id"
86 
              id="user_profile_id"
87 
              defaultValue=""
88 
              ref={register({
89 
                required: 'Por favor seleccione un perfil'
90 
              })}
91 
            >
92 
              <option value="">Perfil de applicación</option>
93 
              {Object.entries(userProfiles).map(([key, value]) =>
94 
                <option value={key} key={key}>
95 
                  {value}
96 
                </option>
97 
              )}
98 
            </select>
99 
            {errors?.user_profile_id?.message &&
100 
              <FormErrorFeedback>
101 
                {errors.user_profile_id.message}
102 
              </FormErrorFeedback>
103 
            }
104 
          </div>
105 
        </Modal.Body>
106 
        <Modal.Footer>
107 
          <Button type="submit">Aplicar</Button>
108 
          <Button onClick={onHide}>Cancelar</Button>
109 
        </Modal.Footer>
110 
      </form>
111 
      {loading &&
112 
        <StyledSpinnerContainer>
113 
          <Spinner />
114 
        </StyledSpinnerContainer>
115 
      }
116 
    </Modal >
117 
  )
118 
}
119 
 
120 
const mapDispatchToProps = {
121 
  addNotification: (notification) => addNotification(notification)
122 
}
123 
 
124 
export default connect(null, mapDispatchToProps)(ApplyModal)