Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6861 | Ir a la última revisión | | Ultima modificación | Ver Log |

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