Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
6770 stevensc 1 
import React, { useEffect, useRef, useState } from 'react'
2 
import { useForm } from 'react-hook-form'
3 
import { CKEditor } from 'ckeditor4-react'
4 
import { useDispatch, useSelector } from 'react-redux'
5 
import { Button, Modal } from 'react-bootstrap'
6 
import { addNotification } from '../../redux/notification/notification.actions'
7 
import { axios, CKEDITOR_OPTIONS } from '../../utils'
8 
import { getYears } from '../../utils/dates'
9 
 
10 
import Spinner from '../UI/Spinner'
11 
import FormErrorFeedback from '../UI/FormErrorFeedback'
12 
import SwitchInput from '../UI/SwitchInput'
13 
import UbicationInput from '../../../shared/ubication-input/UbicationInput'
14 
import useFetchHelper from '../../hooks/useFetchHelper'
15 
 
16 
const EducationModal = ({
17 
  show = false,
18 
  closeModal = () => {},
19 
  postUrl = '',
20 
  setEducations = () => {},
21 
  settedDescription = '',
22 
}) => {
23 
  const [modalLoading, setModalLoading] = useState(false)
24 
  const { data: degrees } = useFetchHelper('degrees')
25 
  const isAddressEmpty = useRef(true)
26 
  const addressKeys = useRef([
27 
    'address1',
28 
    'address2',
29 
    'country',
30 
    'state',
31 
    'city1',
32 
    'city2',
33 
    'postal_code',
34 
    'latitude',
35 
    'longitude',
36 
  ])
37 
  const labels = useSelector(({ intl }) => intl.labels)
38 
  const dispatch = useDispatch()
39 
 
40 
  const {
41 
    register,
42 
    errors,
43 
    handleSubmit,
44 
    setValue,
45 
    clearErrors,
46 
    getValues,
47 
    watch,
48 
  } = useForm()
49 
 
50 
  const handleModalOpen = () => {
51 
    Object.keys(getValues()).map(([key]) => setValue(key, ''))
52 
    closeModal()
53 
  }
54 
 
55 
  const getAddressHandler = (addresObject) => {
56 
    addressKeys.current.map((addressKey) => {
57 
      setValue(addressKey, '')
58 
    })
59 
    const { address_components } = addresObject
60 
    if (address_components) {
61 
      address_components.map((address_component) => {
62 
        const address_component_name = address_component.long_name
63 
        const address_component_type = address_component.types[0]
64 
        switch (address_component_type) {
65 
          case 'route':
66 
            setValue('address1', address_component_name)
67 
            break
68 
          case 'sublocality':
69 
            setValue('address2', address_component_name)
70 
            break
71 
          case 'locality':
72 
            setValue('city1', address_component_name)
73 
            break
74 
          case 'administrative_area_level_2':
75 
            setValue('city2', address_component_name)
76 
            break
77 
          case 'administrative_area_level_1':
78 
            setValue('state', address_component_name)
79 
            break
80 
          case 'country':
81 
            setValue('country', address_component_name)
82 
            break
83 
          case 'postal_code':
84 
            setValue('postal_code', address_component_name)
85 
            break
86 
          case 'geometry':
87 
            setValue('latitude', address_component.latitude)
88 
            setValue('longitude', address_component.longitude)
89 
            break
90 
          default:
91 
            break
92 
        }
93 
      })
94 
      isAddressEmpty.current = false
95 
    } else {
96 
      isAddressEmpty.current = true
97 
    }
98 
    setValue('formatted_address', addresObject.formatted_address)
99 
    clearErrors('formatted_address')
100 
  }
101 
 
102 
  const onSubmitHandler = async (data) => {
103 
    setModalLoading(true)
104 
    const formData = new FormData()
105 
    Object.entries(data).map(([key, value]) => {
106 
      if (key === 'is_current') {
107 
        value === 'y'
108 
          ? formData.append('to_year', new Date().getFullYear())
109 
          : formData.append(key, value)
110 
      }
111 
 
112 
      formData.append(key, value)
113 
    })
114 
 
115 
    await axios.post(postUrl, formData).then((response) => {
116 
      const resData = response.data
117 
      if (resData.success) {
118 
        setEducations(resData.data)
119 
        handleModalOpen()
120 
      } else {
121 
        const resError = resData.data
122 
        if (resError.constructor.name === 'Object') {
123 
          Object.entries(resError).map(([key, value]) => {
124 
            if (key in getValues()) {
125 
              dispatch(
126 
                addNotification({
127 
                  style: 'danger',
128 
                  msg: `${key}: ${Array.isArray(value) ? value[0] : value}`,
129 
                })
130 
              )
131 
            }
132 
          })
133 
        } else {
134 
          dispatch(addNotification({ style: 'danger', msg: resError }))
135 
        }
136 
      }
137 
    })
138 
    setModalLoading(false)
139 
  }
140 
 
141 
  useEffect(() => {
142 
    addressKeys.current.map((addressKey) => register(addressKey))
143 
    register('formatted_address', { required: 'Este campo es requerido' })
144 
    register('description', { required: true })
6771 stevensc 145 
    register('is_current')
6770 stevensc 146 
  }, [])
147 
 
148 
  useEffect(async () => {
149 
    if (settedDescription) {
150 
      const { data } = await axios.get(postUrl)
151 
      if (!data.success) {
152 
        addNotification({
153 
          style: 'danger',
154 
          msg:
155 
            typeof data.data === 'string' ? data.data : 'Ha ocurrido un error',
156 
        })
157 
        setModalLoading(false)
158 
        return
159 
      }
160 
      Object.entries(data.data.education).map(([key, value]) =>
161 
        setValue(key, value)
162 
      )
163 
      Object.entries(data.data.location).map(([key, value]) =>
164 
        setValue(key, value)
165 
      )
166 
      isAddressEmpty.current = false
167 
    }
168 
  }, [show])
169 
 
170 
  return (
171 
    <Modal show={show} onHide={handleModalOpen}>
172 
      <Modal.Header closeButton>
173 
        <Modal.Title>{labels.education}</Modal.Title>
174 
      </Modal.Header>
175 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
176 
        <Modal.Body>
177 
          <div className="form-group">
178 
            <select
179 
              name="degree_id"
180 
              id="degree_id"
181 
              defaultValue=""
182 
              ref={register({
183 
                required: labels.error_field_empty,
184 
              })}
185 
            >
186 
              <option value="" hidden>
187 
                {labels.degree}
188 
              </option>
189 
              {degrees &&
190 
                Object.entries(degrees).map(([key, value]) => (
191 
                  <option value={key} key={key}>
192 
                    {value}
193 
                  </option>
194 
                ))}
195 
            </select>
196 
            {errors.degree_id && (
197 
              <FormErrorFeedback>{errors.degree_id.message}</FormErrorFeedback>
198 
            )}
199 
          </div>
200 
          <div className="form-group">
201 
            <input
202 
              type="text"
203 
              name="university"
204 
              id="university"
205 
              placeholder="Universidad"
206 
              ref={register({
207 
                required: labels.error_field_empty,
208 
              })}
209 
            />
210 
            {errors.university && (
211 
              <FormErrorFeedback>{errors.university.message}</FormErrorFeedback>
212 
            )}
213 
          </div>
214 
          <div className="form-group">
215 
            <input
216 
              type="text"
217 
              name="field_of_study"
218 
              id="field_of_study"
219 
              placeholder="Campo de estudio"
220 
              ref={register({
221 
                required: labels.error_field_empty,
222 
              })}
223 
            />
224 
            {errors.field_of_study && (
225 
              <FormErrorFeedback>
226 
                {errors.field_of_study.message}
227 
              </FormErrorFeedback>
228 
            )}
229 
          </div>
230 
          <div className="form-group datefm">
231 
            <UbicationInput
232 
              onGetAddress={getAddressHandler}
233 
              settedQuery={watch('formatted_address')}
234 
            />
235 
            <i className="fa fa-map-marker"></i>
236 
            {errors.formatted_address && (
237 
              <FormErrorFeedback>
238 
                {errors.formatted_address.message}
239 
              </FormErrorFeedback>
240 
            )}
241 
          </div>
242 
          <div className="form-grop">
243 
            <input
244 
              type="text"
245 
              name="grade_or_percentage"
246 
              id="grade_or_percentage"
247 
              placeholder="Grado o porcentaje"
248 
              ref={register({
249 
                required: labels.error_field_empty,
250 
              })}
251 
            />
252 
            {errors.grade_or_percentage && (
253 
              <FormErrorFeedback>
254 
                {errors.grade_or_percentage.message}
255 
              </FormErrorFeedback>
256 
            )}
257 
          </div>
258 
          <div className="row profile-year d-flex align-items-center pt-1">
259 
            <div className="input-c p-0 pr-2">
260 
              <div className="form-group">
261 
                <select
262 
                  name="from_year"
263 
                  id="from_year"
264 
                  defaultValue=""
265 
                  ref={register({
266 
                    required: labels.error_field_empty,
267 
                  })}
268 
                >
269 
                  <option value="">{labels.from_year}</option>
270 
                  {getYears().map((year) => (
271 
                    <option key={year} value={year}>
272 
                      {year}
273 
                    </option>
274 
                  ))}
275 
                </select>
276 
                {errors.from_year && (
277 
                  <FormErrorFeedback>
278 
                    {errors.from_year.message}
279 
                  </FormErrorFeedback>
280 
                )}
281 
              </div>
282 
            </div>
283 
            {!watch('is_current') && (
284 
              <div className="input-c p-0 pr-2">
285 
                <div className="form-group">
286 
                  <select
287 
                    name="to_year"
288 
                    id="to_year"
289 
                    defaultValue=""
290 
                    ref={register({
291 
                      required: labels.error_field_empty,
292 
                    })}
293 
                  >
294 
                    <option value="">Año hasta</option>
295 
                    {getYears().map((year) => (
296 
                      <option key={year} value={year}>
297 
                        {year}
298 
                      </option>
299 
                    ))}
300 
                  </select>
301 
                  {errors.to_year && (
302 
                    <FormErrorFeedback>
303 
                      {errors.to_year.message}
304 
                    </FormErrorFeedback>
305 
                  )}
306 
                </div>
307 
              </div>
308 
            )}
309 
            <div className="input-c p-0">
310 
              <label htmlFor="is_current">{labels.current_education}</label>
311 
              <SwitchInput
312 
                setValue={(val) => setValue('is_current', val ? 'y' : 'n')}
313 
              />
314 
            </div>
315 
          </div>
316 
          <div className="form-group">
317 
            <CKEditor
318 
              onChange={(e) => setValue('description', e.editor.getData())}
319 
              onInstanceReady={(e) => e.editor.setData(settedDescription)}
320 
              config={CKEDITOR_OPTIONS}
321 
            />
322 
            {errors.description && (
323 
              <FormErrorFeedback>{labels.error_field_empty}</FormErrorFeedback>
324 
            )}
325 
          </div>
326 
        </Modal.Body>
327 
        <Modal.Footer>
328 
          <Button size="sm" type="submit">
329 
            {labels.accept}
330 
          </Button>
331 
          <Button size="sm" variant="danger" onClick={handleModalOpen}>
332 
            {labels.cancel}
333 
          </Button>
334 
        </Modal.Footer>
335 
      </form>
336 
      {modalLoading && <Spinner />}
337 
    </Modal>
338 
  )
339 
}
340 
 
341 
export default EducationModal