Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5483 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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