Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

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