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, { 'skills[]': tag.value }]
                        })
                        setData(newTags)
                } else {
                        setData({ 'skills[]': '' })
                }
        }

        useEffect(() => {
                getData(dataLink)
                        .then(({ skills_available, skills_selected }) => {

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

                                setSkillsSelecteds(skills_selected)
                        })
        }, [dataLink])

        useEffect(() => {
                skillsSelecteds.map(skill => {
                        const userSkill = skillsOptionsArray.find(el => el.value === 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