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