Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6738 stevensc 1 
import React, { useState } from 'react'
2 
import { Button, Modal } from 'react-bootstrap'
3 
import { axios } from '../../utils/axios'
4 
import { useForm } from 'react-hook-form'
5 
import { addNotification } from '../../redux/notification/notification.actions'
6 
 
7 
import Spinner from '../UI/Spinner'
8 
import LoaderContainer from '../UI/LoaderContainer'
9 
import FormErrorFeedback from '../UI/FormErrorFeedback'
10 
import { useDispatch } from 'react-redux'
11 
 
12 
const AddGroupModal = ({
13 
  show,
14 
  onHide,
15 
  groupTypes,
16 
  industries,
17 
  fetchGroups,
18 
}) => {
19 
  const [loading, setLoading] = useState(false)
20 
  const dispatch = useDispatch()
21 
 
22 
  const { register, handleSubmit, errors, getValues, setError } = useForm()
23 
 
24 
  const onSubmitHandler = (data) => {
25 
    setLoading(true)
26 
    const formData = new FormData()
27 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
28 
 
29 
    axios
30 
      .post(`/group/my-groups/add`, formData)
31 
      .then(({ data: response }) => {
32 
        const { data, success } = response
33 
 
34 
        if (!success) {
35 
          const errorMessage = data
36 
          errorMessage === 'object'
37 
            ? Object.entries(errorMessage).map(
38 
                ([key, value]) =>
39 
                  key in getValues() &&
40 
                  setError(key, {
41 
                    type: 'manual',
42 
                    message: Array.isArray(value) ? value[0] : value,
43 
                  })
44 
              )
45 
            : dispatch(addNotification({ style: 'danger', msg: errorMessage }))
46 
        }
47 
 
48 
        fetchGroups()
49 
        onHide()
50 
      })
51 
      .catch((err) => {
52 
        addNotification({ style: 'danger', msg: err })
53 
        throw new Error(err)
54 
      })
55 
      .finally(() => setLoading(false))
56 
  }
57 
 
58 
  return (
59 
    <Modal show={show} onHide={onHide}>
60 
      <Modal.Header closeButton>
61 
        <Modal.Title id="contained-modal-title-vcenter">
62 
          Nuevo Grupo
63 
        </Modal.Title>
64 
      </Modal.Header>
65 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
66 
        <Modal.Body>
67 
          <div style={{ position: 'relative' }}>
68 
            <div className="form-group">
69 
              <input
70 
                type="text"
71 
                name="name"
72 
                id="name"
73 
                placeholder="Nombre del grupo"
74 
                ref={register({
75 
                  required: 'Por favor ingrese el nombre del grupo',
76 
                })}
77 
              />
78 
              {errors.name && (
79 
                <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
80 
              )}
81 
            </div>
82 
            <div className="form-group">
83 
              <select
84 
                name="type_id"
85 
                id="type_id"
86 
                defaultValue=""
87 
                ref={register({
88 
                  required: 'Por favor eliga un tipo',
89 
                })}
90 
              >
91 
                <option value="" hidden>
92 
                  Tipo
93 
                </option>
94 
                {Object.entries(groupTypes).map(([key, value]) => (
95 
                  <option value={key} key={key}>
96 
                    {value}
97 
                  </option>
98 
                ))}
99 
              </select>
100 
              {errors.type_id && (
101 
                <FormErrorFeedback>{errors.type_id.message}</FormErrorFeedback>
102 
              )}
103 
            </div>
104 
            <div className="form-group">
105 
              <select
106 
                name="industry_id"
107 
                id="industry_id"
108 
                defaultValue=""
109 
                ref={register({
110 
                  required: 'Por favor eliga una industria',
111 
                })}
112 
              >
113 
                <option value="" hidden>
114 
                  Industria
115 
                </option>
116 
                {Object.entries(industries).map(([key, value]) => (
117 
                  <option value={key} key={key}>
118 
                    {value}
119 
                  </option>
120 
                ))}
121 
              </select>
122 
              {errors.industry_id && (
123 
                <FormErrorFeedback>
124 
                  {errors.industry_id.message}
125 
                </FormErrorFeedback>
126 
              )}
127 
            </div>
128 
 
129 
            {loading && (
130 
              <LoaderContainer>
131 
                <Spinner />
132 
              </LoaderContainer>
133 
            )}
134 
          </div>
135 
        </Modal.Body>
136 
        <Modal.Footer>
137 
          <Button type="submit">Crear</Button>
138 
          <Button onClick={onHide} variant="danger">
139 
            Cancelar
140 
          </Button>
141 
        </Modal.Footer>
142 
      </form>
143 
    </Modal>
144 
  )
145 
}
146 
 
147 
export default AddGroupModal