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