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 LanguageModal = ({
        closeModal,
        dataLink
}) => {

        const { register, errors } = useForm()

        const [languagesSelecteds, setLanguagesSelecteds] = useState([])
        const [userLanguagesArray, setUserLanguagesArray] = useState([])
        const [languagesOptionsArray, setLanguagesOptionsArray] = useState([])
        const [data, setData] = useState({ languages: '' })

        useEffect(() => {
                register('languages', {
                        required: 'Por favor seleccione al menos un lenguaje',
                })
        }, [])

        const handleTagsChange = (tags) => {
                if (tags.length) {
                        let newTags = []
                        tags.map((tag) => {
                                newTags = [...newTags, { 'languages[]': tag.value }]
                        })
                        setData(newTags)
                } else {
                        setData({ 'languages[]': '' })
                }
        }

        useEffect(() => {
                getData(dataLink)
                        .then(({ languages_available, languages_selected }) => {

                                // Set languages options
                                Object.entries(languages_available).map(([key, value]) => {
                                        setLanguagesOptionsArray(prev => [...prev, { value: key, name: value }])
                                })

                                // Set languages selecteds
                                setLanguagesSelecteds([...languagesSelecteds, ...languages_selected])
                        })
        }, [dataLink])

        useEffect(() => {
                languagesSelecteds.map(lang => {
                        const userLang = languagesOptionsArray.find(el => el.value === lang)
                        if (userLang) {
                                setUserLanguagesArray(prev => [...prev, { value: userLang.value, name: userLang.name }])
                        }
                })
        }, [languagesSelecteds, languagesOptionsArray])


        return (
                <SubmitModal
                        title="Idiomas"
                        submitData={data}
                        postLink={dataLink}
                        closeModal={closeModal}
                >
                        <div className="form-group">
                                <TagsInput
                                        suggestions={languagesOptionsArray}
                                        settedTags={userLanguagesArray}
                                        onChange={handleTagsChange}
                                />
                                {errors.languages && <p>{errors.languages}</p>}
                        </div>
                </SubmitModal>
        )
}

export default LanguageModal