Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5165 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5165 stevensc 1 
/* eslint-disable react/prop-types */
2 
import React, { useState } from 'react'
3 
import { Modal } from 'react-bootstrap'
4 
import { useForm } from 'react-hook-form'
5 
import { connect } from 'react-redux'
6 
import { axios } from '../../../../utils'
7 
import { addNotification } from '../../../../redux/notification/notification.actions'
8 
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
9 
import Spinner from '../../../../shared/loading-spinner/Spinner'
1 www 10 
 
5165 stevensc 11 
const AddCompanyModal = ({
12 
  show = false,
13 
  onHide = () => null,
14 
  fetchCompanies = () => [],
15 
  companySizes = {},
16 
  industries = {},
17 
  addNotification // redux action
18 
}) => {
19 
  const [loading, setLoading] = useState(false)
1 www 20 
 
5165 stevensc 21 
  const { register, handleSubmit, errors } = useForm()
1 www 22 
 
5165 stevensc 23 
  const onSubmitHandler = (data) => {
24 
    setLoading(true)
25 
    const formData = new FormData()
1 www 26 
 
5165 stevensc 27 
    Object.entries(data)
28 
      .map(([key, value]) => formData.append(key, value))
1 www 29 
 
5165 stevensc 30 
    axios.post('/company/my-companies/add', formData)
31 
      .then(({ data: response }) => {
32 
        if (!response.success) {
33 
          const errorMessage = typeof response.data === 'string'
34 
            ? response.data
35 
            : Object.entries(response.data)
36 
              .map(([key, value]) => `${key}: ${value[0]}`)
1 www 37 
 
5165 stevensc 38 
          addNotification({ style: 'danger', msg: errorMessage })
39 
          return
1 www 40 
        }
41 
 
5165 stevensc 42 
        fetchCompanies()
43 
        onHide()
44 
      })
45 
      .catch((error) => {
46 
        const errorMessage = new Error(error)
47 
        addNotification({ style: 'danger', msg: errorMessage })
48 
      })
49 
      .finally(() => setLoading(false))
50 
  }
51 
 
1 www 52 
  return (
53 
    <Modal show={show} onHide={onHide}>
54 
      <Modal.Header closeButton>
5165 stevensc 55 
        <Modal.Title>
1 www 56 
          Nueva Empresa
57 
        </Modal.Title>
58 
      </Modal.Header>
59 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
5165 stevensc 60 
 
61 
        <Modal.Body className='position-relative'>
62 
 
63 
          <div className="form-group">
64 
            <input
65 
              type="text"
66 
              name="name"
67 
              placeholder="Nombre de la empresa"
68 
              ref={register({
69 
                required: 'Por favor ingrese el nombre de la Empresa'
70 
              })}
71 
            />
72 
            {errors.name && <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>}
73 
          </div>
74 
 
75 
          <div className="form-group">
76 
            <select
77 
              name="industry_id"
78 
              ref={register({
79 
                required: 'Por favor eliga una industria'
80 
              })}
81 
            >
82 
              <option value="" hidden>Industria</option>
83 
              {Object.entries(industries).map(([key, value]) =>
84 
                <option value={key} key={key}>
85 
                  {value}
1 www 86 
                </option>
87 
              )}
5165 stevensc 88 
            </select>
89 
            {errors.industry_id && <FormErrorFeedback>{errors.industry_id.message}</FormErrorFeedback>}
90 
          </div>
91 
 
92 
          <div className="form-group">
93 
            <select
94 
              name="company_size_id"
95 
              ref={register({
96 
                required: 'Por favor eliga el tamaño de la empresa'
97 
              })}
98 
            >
99 
              <option value="" hidden>Tamaño de la empresa</option>
100 
              {Object.entries(companySizes).map(([key, value]) =>
101 
                <option value={key} key={key}>
102 
                  {value}
1 www 103 
                </option>
104 
              )}
5165 stevensc 105 
            </select>
106 
            {errors.company_size_id && <FormErrorFeedback>{errors.company_size_id.message}</FormErrorFeedback>}
107 
          </div>
1 www 108 
 
5165 stevensc 109 
          {loading && <Spinner />}
110 
 
1 www 111 
        </Modal.Body>
112 
        <Modal.Footer>
5166 stevensc 113 
          <button type="submit" className='btn btn-primary'>Crear</button>
114 
          <button type="button" className='btn btn-secondary' onClick={onHide}>Cancelar</button>
1 www 115 
        </Modal.Footer>
116 
      </form>
117 
    </Modal>
5165 stevensc 118 
  )
119 
}
1 www 120 
 
121 
const mapDispatchToProps = {
5165 stevensc 122 
  addNotification: (notification) => addNotification(notification)
123 
}
1 www 124 
 
5165 stevensc 125 
export default connect(null, mapDispatchToProps)(AddCompanyModal)