Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8382 | Rev 8458 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
8372 stevensc 1 
import React from "react";
2 
import { useState, useEffect } from "react";
3 
import { useForm } from "react-hook-form";
4 
import TagsInput from "../../../shared/TagsInput";
5 
import SubmitModal from "./SubmitModal";
6 
import { getData } from "../../../helpers/fetchHelpers"
7 
 
8 
 
9 
const SkillsModal = ({
10 
    closeModal,
11 
    dataLink
12 
}) => {
13 
 
8374 stevensc 14 
    const { register, errors } = useForm();
8372 stevensc 15 
 
8374 stevensc 16 
    const [skillsSelecteds, setSkillsSelecteds] = useState([]);
17 
    const [userSkillsArray, setUserSkillsArray] = useState([]);
18 
    const [skillsOptionsArray, setSkillsOptionsArray] = useState([]);
8376 stevensc 19 
    const [data, setData] = useState({ "skills[]": "" });
8372 stevensc 20 
 
8374 stevensc 21 
    useEffect(() => {
22 
        register("skills", {
8372 stevensc 23 
            required: "Por favor seleccione al menos un lenguaje",
24 
        });
25 
    }, []);
26 
 
27 
    const handleTagsChange = (tags) => {
28 
        if (tags.length) {
29 
            let newTags = [];
30 
            tags.map((tag) => {
31 
                newTags = [...newTags, tag.value];
32 
            });
8376 stevensc 33 
            setData({ "skills[]": newTags });
8372 stevensc 34 
        } else {
8376 stevensc 35 
            setData({ "skills[]": "" });
8372 stevensc 36 
        }
37 
    };
38 
 
39 
    useEffect(() => {
8374 stevensc 40 
        getData(dataLink)
41 
            .then(({ skills_available, skills_selected }) => {
8372 stevensc 42 
 
8374 stevensc 43 
                Object.entries(skills_available).map(([key, value]) => {
44 
                    setSkillsOptionsArray(prev => [...prev, { value: key, name: value }])
45 
                })
46 
 
8382 stevensc 47 
                setSkillsSelecteds(skills_selected)
8374 stevensc 48 
            })
49 
    }, [dataLink]);
50 
 
51 
    useEffect(() => {
52 
        skillsSelecteds.map(skill => {
8381 stevensc 53 
            console.log(skill)
54 
            console.log(skillsOptionsArray)
8378 stevensc 55 
            const userSkill = skillsOptionsArray.find(el => el.value === skill)
8381 stevensc 56 
            console.log(userSkill)
8374 stevensc 57 
            if (userSkill) {
58 
                setUserSkillsArray(prev => [...prev, { value: userSkill.value, name: userSkill.name }])
8372 stevensc 59 
            }
60 
        })
8374 stevensc 61 
    }, [skillsSelecteds, skillsOptionsArray]);
8372 stevensc 62 
 
63 
    return (
64 
        <SubmitModal
65 
            title="Habilidades"
66 
            submitData={data}
67 
            postLink={dataLink}
68 
            closeModal={closeModal}
69 
        >
70 
            <div className="form-group">
8374 stevensc 71 
                <TagsInput
72 
                    suggestions={skillsOptionsArray}
73 
                    settedTags={userSkillsArray}
8372 stevensc 74 
                    onChange={handleTagsChange}
8374 stevensc 75 
                />
76 
                {errors.skills && <p>{errors.skills}</p>}
8372 stevensc 77 
            </div>
78 
        </SubmitModal>
79 
    );
80 
};
81 
 
82 
export default SkillsModal;