Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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