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";


const LanguageModal = ({
    closeModal,
    dataLink,
    modalData,
    languagesOptions = {
        ar: "Arabe",
        de: "Alemán",
        en: "Inglés",
        es: "Español",
        hi: "Hindi",
        it: "Italiano",
        ja: "Japonés",
        pt: "Portugués",
        ru: "Ruso",
        zh: "Chino",
    }
}) => {

    const {
        register,
        errors
    } = useForm();

    const [userLanguagesArray, setUserLanguagesArray] = useState([]);
    const [languagesOptionsArray, setLanguagesOptionsArray] = useState([]);
    const [settedLanguageTags, setSettedLanguageTags] = 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 });
            setSettedLanguageTags(tags);
        } else {
            setData({ "languages[]": "" });
            setSettedLanguageTags("");
        }
    };

    useEffect(() => {
        let newUserLanguagesArray = [];

        modalData.map((lang) => {
            const newLang = languagesOptionsArray.find(el => el.name === lang)

            if (newLang) {

                newUserLanguagesArray = [
                    ...newUserLanguagesArray,
                    { value: newLang.value, name: newLang.name }
                ]
            }
        })

        setUserLanguagesArray(newUserLanguagesArray);
    }, [modalData]);

    useEffect(() => {
        let newlanguagesOptionsArray = [];
        Object.entries(languagesOptions).map(([key, value]) => {
            newlanguagesOptionsArray = [
                ...newlanguagesOptionsArray,
                { value: key, name: value },
            ];
        });
        setLanguagesOptionsArray(newlanguagesOptionsArray);
    }, [languagesOptions]);

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

export default LanguageModal;