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, tag.value];
            });
            setData({ "degrees[]": 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;