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

        const { register, errors } = useForm()

        const [degreesSelecteds, setDegreesSelecteds] = useState([])
        const [userDegreesArray, setUserDegreesArray] = useState([])
        const [degreesOptionsArray, setDegreesOptionsArray] = useState([])
        const [data, setData] = useState({ 'degrees[]': '' })

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

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

        useEffect(() => {
                getData(dataLink)
                        .then(({ degrees_available, degrees_selected }) => {

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

                                setDegreesSelecteds(degrees_selected)
                        })
        }, [dataLink])

        useEffect(() => {
                degreesSelecteds.map(skill => {
                        const userSkill = degreesOptionsArray.find(el => el.value === skill)
                        if (userSkill) {
                                setUserDegreesArray(prev => [...prev, { value: userSkill.value, name: userSkill.name }])
                        }
                })
        }, [degreesSelecteds, degreesOptionsArray])

        return (
                <SubmitModal
                        title="Grados"
                        submitData={data}
                        postLink={dataLink}
                        closeModal={closeModal}
                >
                        <div className="form-group">
                                <TagsInput
                                        suggestions={degreesOptionsArray}
                                        settedTags={userDegreesArray}
                                        onChange={handleTagsChange}
                                />
                                {errors.degrees && <p>{errors.degrees}</p>}
                        </div>
                </SubmitModal>
        )
}

export default DegreesModal