Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
5478 stevensc 1 
/* eslint-disable array-callback-return */
2 
/* eslint-disable react/prop-types */
3 
 
4 
import React, { useEffect, useRef, useState } from 'react'
5 
import styled from 'styled-components'
6 
import { useForm } from 'react-hook-form'
7 
import { CKEditor } from 'ckeditor4-react'
8 
import { useDispatch } from 'react-redux'
9 
import { Button, Modal } from 'react-bootstrap'
10 
import { addNotification } from '../../../redux/notification/notification.actions'
11 
import { axios, CKEDITOR_OPTIONS } from '../../../utils'
12 
 
13 
import Spinner from '../../../shared/loading-spinner/Spinner'
14 
import UbicationInput from '../../../shared/ubication-input/UbicationInput'
15 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
16 
 
17 
const StyledSwitch = styled.label`
18 
  position: relative;
19 
  display: inline-block;
20 
  width: 60px;
21 
  height: 34px;
22 
  input {
23 
    opacity: 0;
24 
    width: 0;
25 
    height: 0;
26 
  }
27 
  .slider {
28 
    position: absolute;
29 
    cursor: pointer;
30 
    top: 0;
31 
    left: 0;
32 
    right: 0;
33 
    bottom: 0;
34 
    background-color: #ccc;
35 
    -webkit-transition: 0.4s;
36 
    transition: 0.4s;
37 
  }
38 
  .slider:before {
39 
    position: absolute;
40 
    content: '';
41 
    height: 26px;
42 
    width: 26px;
43 
    left: 4px;
44 
    bottom: 4px;
45 
    background-color: white;
46 
    -webkit-transition: 0.4s;
47 
    transition: 0.4s;
48 
  }
49 
  input:checked + .slider {
50 
    background-color: #2196f3;
51 
  }
52 
  input:focus + .slider {
53 
    box-shadow: 0 0 1px #2196f3;
54 
  }
55 
  input:checked + .slider:before {
56 
    -webkit-transform: translateX(26px);
57 
    -ms-transform: translateX(26px);
58 
    transform: translateX(26px);
59 
  }
60 
  .slider.round {
61 
    border-radius: 34px;
62 
  }
63 
 
64 
  .slider.round:before {
65 
    border-radius: 50%;
66 
  }
67 
`
68 
 
69 
const EducationModal = ({
70 
  show = false,
71 
  closeModal = () => {},
72 
  postUrl = '',
73 
  setEducations = () => {},
74 
  settedDescription = '',
75 
  degreesOptions,
76 
}) => {
77 
  const {
78 
    register,
79 
    errors,
80 
    handleSubmit,
81 
    setValue,
82 
    clearErrors,
83 
    getValues,
84 
    watch,
85 
  } = useForm()
86 
  const [modalLoading, setModalLoading] = useState(false)
87 
  const dispatch = useDispatch()
88 
  const isAddressEmpty = useRef(true)
89 
  const addressKeys = useRef([
90 
    'address1',
91 
    'address2',
92 
    'country',
93 
    'state',
94 
    'city1',
95 
    'city2',
96 
    'postal_code',
97 
    'latitude',
98 
    'longitude',
99 
  ])
100 
 
101 
  const handleModalOpen = () => {
102 
    Object.keys(getValues()).map(([key]) => setValue(key, ''))
103 
    closeModal()
104 
  }
105 
 
106 
  const getYears = () => {
107 
    const date = new Date()
108 
    const currentYear = date.getFullYear()
109 
    let years = []
110 
    for (let index = currentYear; index > currentYear - 100; index--) {
111 
      years = [...years, index]
112 
    }
113 
    return years
114 
  }
115 
 
116 
  const getAddressHandler = (addresObject) => {
117 
    addressKeys.current.map((addressKey) => {
118 
      setValue(addressKey, '')
119 
    })
120 
    const { address_components } = addresObject
121 
    if (address_components) {
122 
      address_components.map((address_component) => {
123 
        const address_component_name = address_component.long_name
124 
        const address_component_type = address_component.types[0]
125 
        switch (address_component_type) {
126 
          case 'route':
127 
            setValue('address1', address_component_name)
128 
            break
129 
          case 'sublocality':
130 
            setValue('address2', address_component_name)
131 
            break
132 
          case 'locality':
133 
            setValue('city1', address_component_name)
134 
            break
135 
          case 'administrative_area_level_2':
136 
            setValue('city2', address_component_name)
137 
            break
138 
          case 'administrative_area_level_1':
139 
            setValue('state', address_component_name)
140 
            break
141 
          case 'country':
142 
            setValue('country', address_component_name)
143 
            break
144 
          case 'postal_code':
145 
            setValue('postal_code', address_component_name)
146 
            break
147 
          case 'geometry':
148 
            setValue('latitude', address_component.latitude)
149 
            setValue('longitude', address_component.longitude)
150 
            break
151 
          default:
152 
            break
153 
        }
154 
      })
155 
      isAddressEmpty.current = false
156 
    } else {
157 
      isAddressEmpty.current = true
158 
    }
159 
    setValue('formatted_address', addresObject.formatted_address)
160 
    clearErrors('formatted_address')
161 
  }
162 
 
163 
  const onSubmitHandler = async (data) => {
164 
    setModalLoading(true)
165 
    const formData = new FormData()
166 
    Object.entries(data).map(([key, value]) => {
167 
      if (key === 'is_current') {
168 
        value === 'y'
169 
          ? formData.append('to_year', new Date().getFullYear())
170 
          : formData.append(key, value)
171 
      }
172 
 
173 
      formData.append(key, value)
174 
    })
175 
 
176 
    await axios.post(postUrl, formData).then((response) => {
177 
      const resData = response.data
178 
      if (resData.success) {
179 
        setEducations(resData.data)
180 
        handleModalOpen()
181 
      } else {
182 
        const resError = resData.data
183 
        if (resError.constructor.name === 'Object') {
184 
          Object.entries(resError).map(([key, value]) => {
185 
            if (key in getValues()) {
186 
              dispatch(
187 
                addNotification({
188 
                  style: 'danger',
189 
                  msg: `${key}: ${Array.isArray(value) ? value[0] : value}`,
190 
                })
191 
              )
192 
            }
193 
          })
194 
        } else {
195 
          dispatch(addNotification({ style: 'danger', msg: resError }))
196 
        }
197 
      }
198 
    })
199 
    setModalLoading(false)
200 
  }
201 
 
202 
  useEffect(() => {
203 
    addressKeys.current.map((addressKey) => {
204 
      register(addressKey)
205 
    })
206 
    register('formatted_address', {
207 
      required: 'Este campo es requerido',
208 
    })
209 
    register('description', { required: true })
210 
  }, [])
211 
 
212 
  useEffect(async () => {
213 
    if (settedDescription) {
214 
      const { data } = await axios.get(postUrl)
215 
      if (!data.success) {
216 
        addNotification({
217 
          style: 'danger',
218 
          msg:
219 
            typeof data.data === 'string' ? data.data : 'Ha ocurrido un error',
220 
        })
221 
        setModalLoading(false)
222 
        return
223 
      }
224 
      Object.entries(data.data.education).map(([key, value]) =>
225 
        setValue(key, value)
226 
      )
227 
      Object.entries(data.data.location).map(([key, value]) =>
228 
        setValue(key, value)
229 
      )
230 
      isAddressEmpty.current = false
231 
    }
232 
  }, [show])
233 
 
234 
  return (
235 
    <Modal show={show} onHide={handleModalOpen}>
236 
      <Modal.Header closeButton>
237 
        <Modal.Title>Educación</Modal.Title>
238 
      </Modal.Header>
239 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
240 
        <Modal.Body>
241 
          <div className="form-group">
242 
            <select
243 
              name="degree_id"
244 
              id="degree_id"
245 
              defaultValue=""
246 
              ref={register({
247 
                required: 'este campo es requerido',
248 
              })}
249 
            >
250 
              <option value="" hidden>
251 
                Grado
252 
              </option>
253 
              {Object.entries(degreesOptions).map(([key, value]) => (
254 
                <option value={key} key={key}>
255 
                  {value}
256 
                </option>
257 
              ))}
258 
            </select>
259 
            {errors.degree_id && (
260 
              <FormErrorFeedback>{errors.degree_id.message}</FormErrorFeedback>
261 
            )}
262 
          </div>
263 
          <div className="form-group">
264 
            <input
265 
              type="text"
266 
              name="university"
267 
              id="university"
268 
              placeholder="Universidad"
269 
              ref={register({
270 
                required: 'este campo es requerido',
271 
              })}
272 
            />
273 
            {errors.university && (
274 
              <FormErrorFeedback>{errors.university.message}</FormErrorFeedback>
275 
            )}
276 
          </div>
277 
          <div className="form-group">
278 
            <input
279 
              type="text"
280 
              name="field_of_study"
281 
              id="field_of_study"
282 
              placeholder="Campo de estudio"
283 
              ref={register({
284 
                required: 'este campo es requerido',
285 
              })}
286 
            />
287 
            {errors.field_of_study && (
288 
              <FormErrorFeedback>
289 
                {errors.field_of_study.message}
290 
              </FormErrorFeedback>
291 
            )}
292 
          </div>
293 
          <div className="form-group datefm">
294 
            <UbicationInput
295 
              onGetAddress={getAddressHandler}
296 
              settedQuery={watch('formatted_address')}
297 
            />
298 
            <i className="fa fa-map-marker"></i>
299 
            {errors.formatted_address && (
300 
              <FormErrorFeedback>
301 
                {errors.formatted_address.message}
302 
              </FormErrorFeedback>
303 
            )}
304 
          </div>
305 
          <div className="form-grop">
306 
            <input
307 
              type="text"
308 
              name="grade_or_percentage"
309 
              id="grade_or_percentage"
310 
              placeholder="Grado o porcentaje"
311 
              ref={register({
312 
                required: 'este campo es requerido',
313 
              })}
314 
            />
315 
            {errors.grade_or_percentage && (
316 
              <FormErrorFeedback>
317 
                {errors.grade_or_percentage.message}
318 
              </FormErrorFeedback>
319 
            )}
320 
          </div>
321 
          <div className="row profile-year d-flex align-items-center pt-1">
322 
            <div className="input-c p-0 pr-2">
323 
              <div className="form-group">
324 
                <select
325 
                  name="from_year"
326 
                  id="from_year"
327 
                  defaultValue=""
328 
                  ref={register({
329 
                    required: 'este campo es requerido',
330 
                  })}
331 
                >
332 
                  <option value="">Año desde</option>
333 
                  {getYears().map((year) => (
334 
                    <option key={year} value={year}>
335 
                      {year}
336 
                    </option>
337 
                  ))}
338 
                </select>
339 
                {errors.from_year && (
340 
                  <FormErrorFeedback>
341 
                    {errors.from_year.message}
342 
                  </FormErrorFeedback>
343 
                )}
344 
              </div>
345 
            </div>
346 
            {!watch('is_current') && (
347 
              <div className="input-c p-0 pr-2">
348 
                <div className="form-group">
349 
                  <select
350 
                    name="to_year"
351 
                    id="to_year"
352 
                    defaultValue=""
353 
                    ref={register({
354 
                      required: 'este campo es requerido',
355 
                    })}
356 
                  >
357 
                    <option value="">Año hasta</option>
358 
                    {getYears().map((year) => (
359 
                      <option key={year} value={year}>
360 
                        {year}
361 
                      </option>
362 
                    ))}
363 
                  </select>
364 
                  {errors.to_year && (
365 
                    <FormErrorFeedback>
366 
                      {errors.to_year.message}
367 
                    </FormErrorFeedback>
368 
                  )}
369 
                </div>
370 
              </div>
371 
            )}
372 
            <div className="input-c p-0">
373 
              <label htmlFor="is_current">Educación Actual</label>
374 
              <div className="form-group">
375 
                <StyledSwitch className="switch">
376 
                  <input
377 
                    type="checkbox"
378 
                    name="is_current"
379 
                    id="is_current"
380 
                    value="y"
381 
                    ref={register}
382 
                  />
383 
                  <span className="slider round"></span>
384 
                </StyledSwitch>
385 
              </div>
386 
            </div>
387 
          </div>
388 
          <div className="form-group">
389 
            <CKEditor
390 
              onChange={(e) => setValue('description', e.editor.getData())}
391 
              onInstanceReady={(e) => e.editor.setData(settedDescription)}
392 
              config={CKEDITOR_OPTIONS}
393 
            />
394 
            {errors.description && (
395 
              <FormErrorFeedback>Este campo es requerido</FormErrorFeedback>
396 
            )}
397 
          </div>
398 
        </Modal.Body>
399 
        <Modal.Footer>
400 
          <Button size="sm" type="submit">
401 
            Enviar
402 
          </Button>
403 
          <Button size="sm" variant="danger" onClick={handleModalOpen}>
404 
            Cancelar
405 
          </Button>
406 
        </Modal.Footer>
407 
      </form>
408 
      {modalLoading && <Spinner />}
409 
    </Modal>
410 
  )
411 
}
412 
 
413 
export default EducationModal