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,
        setValue,
        getValues,
    } = useForm();

    const [userLanguagesArray, setUserLanguagesArray] = useState(modalData);
    const [languagesOptionsArray, setLanguagesOptionsArray] = useState([]);
    const [settedLanguageTags, setSettedLanguageTags] = useState([]);

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

    useEffect(() => {
        Object.entries(getValues()).map(([key, value]) => {
            setValue(key, "");
        });
    }, []);

    const handleTagsChange = (tags) => {
        if (tags.length) {
            let newTags = [];
            tags.map((tag) => {
                newTags = [...newTags, tag.value];
            });
            setValue("languages", newTags);
            setSettedLanguageTags(tags);
        } else {
            setValue("languages", "");
            setSettedLanguageTags("");
        }
    };

    useEffect(() => {
        let newUserLanguagesArray = [];
        Object.entries(modalData).map(([key, value]) => {
            newUserLanguagesArray = [
                ...newUserLanguagesArray,
                { value: key, name: value },
            ];
        });
        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={settedLanguageTags}
            postLink={dataLink}
            closeModal={closeModal}
        >
            <div className="form-group">
                <TagsInput
                    suggestions={languagesOptionsArray}
                    settedTags={userLanguagesArray}
                    onChange={handleTagsChange}
                />
                {errors.languages && <p>{errors.languages.message}</p>}
            </div>
        </SubmitModal>
    );
};

export default LanguageModal;