Proyectos de Subversion LeadersLinked - Backend

import React from "react";

import { useState, useEffect } from "react";

import { useForm } from "react-hook-form";

import TagsInput from "../../../shared/TagsInput";

import SubmitModal from "./SubmitModal";

import { getData } from "../../../helpers/fetchHelpers"

const SkillsModal = ({

    closeModal,

    dataLink

}) => {

    const { register, errors } = useForm();

    const [skillsSelecteds, setSkillsSelecteds] = useState([]);

    const [userSkillsArray, setUserSkillsArray] = useState([]);

    const [skillsOptionsArray, setSkillsOptionsArray] = useState([]);

    const [data, setData] = useState({ skills: "" });

    useEffect(() => {

        register("skills", {

            required: "Por favor seleccione al menos un lenguaje",

        });

    }, []);

    const handleTagsChange = (tags) => {

        if (tags.length) {

            let newTags = [];

            tags.map((tag) => {

                newTags = [...newTags, tag.value];

            });

            setData({ "skills": newTags });

        } else {

            setData({ "skills": "" });

        }

    };

    useEffect(() => {

        getData(dataLink)

            .then(({ skills_available, skills_selected }) => {

                // Set languages options

                Object.entries(skills_available).map(([key, value]) => {

                    setSkillsOptionsArray(prev => [...prev, { value: key, name: value }])

                })

                // Set languages selecteds

                setSkillsSelecteds([...skillsSelecteds, skills_selected])

            })

    }, [dataLink]);

    useEffect(() => {

        skillsSelecteds.map(skill => {

            const userSkill = skillsOptionsArray.find(el => el.name === skill)

            if (userSkill) {

                setUserSkillsArray(prev => [...prev, { value: userSkill.value, name: userSkill.name }])

            }

        })

    }, [skillsSelecteds, skillsOptionsArray]);

    return (

        <SubmitModal

            title="Habilidades"

            submitData={data}

            postLink={dataLink}

            closeModal={closeModal}

        >

            <div className="form-group">

                <TagsInput

                    suggestions={skillsOptionsArray}

                    settedTags={userSkillsArray}

                    onChange={handleTagsChange}

                />

                {errors.skills && <p>{errors.skills}</p>}

            </div>

        </SubmitModal>

    );

};

export default SkillsModal;