Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5489 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5489 Rev 6356
Línea 1... Línea -...
1 
/* eslint-disable array-callback-return */
 - 
 
2 
/* eslint-disable react/prop-types */
 - 
 
3 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
4 
import { axios } from '../../../utils'
 2 
import { axios } from '../../../utils'
5 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form'
6 
import { useDispatch } from 'react-redux'
 4 
import { useDispatch } from 'react-redux'
7 
import { Button, Modal } from 'react-bootstrap'
 5 
import { Button, Modal } from 'react-bootstrap'
8 
import { addNotification } from '../../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../../redux/notification/notification.actions'
Línea 9... Línea 7...
9 
 
 7 
 
10 
import Spinner from '../../../shared/loading-spinner/Spinner'
 8 
import Spinner from '../../../shared/loading-spinner/Spinner'
11 
import TagsInput from '../../../shared/tags-input/TagsInput'
 - 
 
Línea 12... Línea 9...
12 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
 9 
import TagsInput from '../../../shared/tags-input/TagsInput'
13 
 
 10 
 
14 
const SkillsModal = ({
 11 
const SkillsModal = ({
15 
  setSkills,
 12 
  setSkills,
16 
  userIdEncrypted,
 13 
  userIdEncrypted,
17 
  closeModal,
 14 
  closeModal,
18 
  show,
 15 
  show,
19 
  skillsOptions,
 16 
  skillsOptions,
20 
  userSkillsArray,
 17 
  userSkillsArray,
21 
}) => {
 - 
 
22 
  const { register, errors, handleSubmit, setValue, getValues, setError } =
 - 
 
23 
    useForm()
 18 
}) => {
24 
  const [settedSkillTags, setSettedSkillTags] = useState([])
 19 
  const { register, handleSubmit, setValue } = useForm()
Línea 25... Línea 20...
25 
  const [modalLoading, setModalLoading] = useState(false)
 20 
  const [modalLoading, setModalLoading] = useState(false)
26 
  const dispatch = useDispatch()
 21 
  const dispatch = useDispatch()
27 
 
 22 
 
28 
  const onSubmitHandler = async () => {
 23 
  const onSubmitHandler = ({ skills }) => {
Línea 29... Línea 24...
29 
    setModalLoading(true)
 24 
    setModalLoading(true)
30 
    const formData = new FormData()
 25 
    const formData = new FormData()
31 
    getValues('skills').map((language) => formData.append('skills[]', language))
 26 
    skills.map((skills) => formData.append('skills[]', skills.value))
32 
 
 27 
 
33 
    await axios
 28 
    axios
34 
      .post(`/profile/my-profiles/skill/${userIdEncrypted}`, formData)
 - 
 
35 
      .then(({ data: response }) => {
 29 
      .post(`/profile/my-profiles/skill/${userIdEncrypted}`, formData)
36 
        if (!response.success) {
 30 
      .then(({ data: response }) => {
37 
          const responseError = response.data
 31 
        const { data, success } = response
38 
 
 - 
 
39 
          if (responseError.constructor.name === 'string') {
 - 
 
40 
            dispatch(addNotification({ style: 'danger', msg: responseError }))
 - 
 
41 
            return
 - 
 
42 
          }
 - 
 
43 
 
 - 
 
44 
          Object.entries(responseError).map(([key, value]) => {
 - 
 
45 
            if (key in getValues()) {
 - 
 
46 
              setError(key, {
 - 
 
47 
                type: 'manual',
 - 
 
48 
                message: Array.isArray(value) ? value[0] : value,
 32 
        if (!success) {
Línea 49... Línea 33...
49 
              })
 33 
          const errorMessage = data.skills[0]
50 
            }
 34 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
51 
          })
 35 
          return
52 
        }
 36 
        }
- 
 
 37 
 
53 
 
 38 
        setSkills(skills)
- 
 
 39 
        dispatch(
- 
 
 40 
          addNotification({ style: 'success', msg: 'Registro agregado' })
54 
        setSkills(settedSkillTags)
 41 
        )
55 
        dispatch(
 42 
        closeModal()
56 
          addNotification({ style: 'success', msg: 'Registro agregado' })
 43 
      })
57 
        )
 44 
      .catch((error) => {
Línea 58... Línea 45...
58 
 
 45 
        dispatch(addNotification({ style: 'danger', msg: error }))
59 
        handleModalOpen()
 - 
 
60 
      })
 - 
 
61 
      .finally(() => setModalLoading(false))
 - 
 
62 
  }
 - 
 
63 
 
 - 
 
64 
  const handleTagsChange = (tags) => {
 46 
        throw new Error(error)
65 
    if (tags.length) {
 - 
 
66 
      let newTags = []
 - 
 
67 
      tags.map((tag) => {
 - 
 
68 
        newTags = [...newTags, tag.value]
 - 
 
69 
      })
 - 
 
70 
      setValue('skills', newTags)
 - 
 
71 
      setSettedSkillTags(tags)
 - 
 
72 
    } else {
 - 
 
73 
      setValue('skills', '')
 - 
 
74 
      setSettedSkillTags('')
 - 
 
75 
    }
 47 
      })
Línea 76... Línea 48...
76 
  }
 48 
      .finally(() => setModalLoading(false))
77 
 
 49 
  }
78 
  const handleModalOpen = () => {
 - 
 
79 
    Object.keys(getValues()).map(([key]) => setValue(key, ''))
 - 
 
80 
    closeModal()
 50 
 
Línea -... Línea 51...
- 
 
 51 
  const handleTagsChange = (tags) => {
- 
 
 52 
    setValue('skills', tags)
- 
 
 53 
  }
- 
 
 54 
 
81 
  }
 55 
  useEffect(() => {
82 
 
 56 
    register('skills')
83 
  useEffect(() => {
 57 
  }, [])
84 
    register('skills', {
 58 
 
85 
      required: 'Por favor seleccione al menos una habilidad',
 59 
  useEffect(() => {
86 
    })
 60 
    show ? setValue('skills', userSkillsArray) : setValue('skills', [''])
87 
  }, [])
 61 
  }, [show])
Línea 97... Línea 71...
97 
            <TagsInput
 71 
            <TagsInput
98 
              suggestions={skillsOptions}
 72 
              suggestions={skillsOptions}
99 
              settedTags={userSkillsArray}
 73 
              settedTags={userSkillsArray}
100 
              onChange={handleTagsChange}
 74 
              onChange={handleTagsChange}
101 
            />
 75 
            />
102 
            {errors.skills && (
 - 
 
103 
              <FormErrorFeedback>{errors.skills.message}</FormErrorFeedback>
 - 
 
104 
            )}
 - 
 
105 
          </div>
 76 
          </div>
106 
        </Modal.Body>
 77 
        </Modal.Body>
107 
        <Modal.Footer>
 78 
        <Modal.Footer>
108 
          <Button size="sm" type="submit">
 79 
          <Button size="sm" type="submit">
109 
            Enviar
 80 
            Enviar
110 
          </Button>
 81 
          </Button>
111 
          <Button size="sm" variant="danger" onClick={handleModalOpen}>
 82 
          <Button size="sm" variant="danger" onClick={closeModal}>
112 
            Cancelar
 83 
            Cancelar
113 
          </Button>
 84 
          </Button>
114 
        </Modal.Footer>
 85 
        </Modal.Footer>
115 
      </form>
 86 
      </form>
116 
      {modalLoading && <Spinner />}
 87 
      {modalLoading && <Spinner />}