Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8145 | Rev 8147 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
8110 stevensc 1 
import React from "react";
2 
import { useState, useEffect } from "react";
3 
import { useForm } from "react-hook-form";
4 
import TagsInput from "../../../shared/TagsInput";
5 
import SubmitModal from "./SubmitModal";
7771 stevensc 6 
 
8110 stevensc 7 
 
8107 stevensc 8 
const LanguageModal = ({
9 
    closeModal,
8110 stevensc 10 
    dataLink,
8112 stevensc 11 
    modalData,
8110 stevensc 12 
    languagesOptions = {
13 
        ar: "Arabe",
14 
        de: "Alemán",
15 
        en: "Inglés",
16 
        es: "Español",
17 
        hi: "Hindi",
18 
        it: "Italiano",
19 
        ja: "Japonés",
20 
        pt: "Portugués",
21 
        ru: "Ruso",
22 
        zh: "Chino",
23 
    }
8107 stevensc 24 
}) => {
7771 stevensc 25 
 
8110 stevensc 26 
    const {
27 
        register,
8138 stevensc 28 
        errors
8110 stevensc 29 
    } = useForm();
30 
 
8112 stevensc 31 
    const [userLanguagesArray, setUserLanguagesArray] = useState(modalData);
8110 stevensc 32 
    const [languagesOptionsArray, setLanguagesOptionsArray] = useState([]);
7771 stevensc 33 
    const [settedLanguageTags, setSettedLanguageTags] = useState([]);
8138 stevensc 34 
    const [data, setData] = useState({ languages: "" });
7771 stevensc 35 
 
36 
    useEffect(() => {
8064 stevensc 37 
        register("languages", {
38 
            required: "Por favor seleccione al menos un lenguaje",
39 
        });
40 
    }, []);
7771 stevensc 41 
 
42 
    const handleTagsChange = (tags) => {
43 
        if (tags.length) {
44 
            let newTags = [];
45 
            tags.map((tag) => {
46 
                newTags = [...newTags, tag.value];
47 
            });
8141 stevensc 48 
            setData({ "languages[]": newTags });
7771 stevensc 49 
            setSettedLanguageTags(tags);
50 
        } else {
8141 stevensc 51 
            setData({ "languages[]": "" });
7771 stevensc 52 
            setSettedLanguageTags("");
53 
        }
54 
    };
55 
 
8064 stevensc 56 
    useEffect(() => {
57 
        let newUserLanguagesArray = [];
8143 stevensc 58 
        modalData.map((lang) => {
8145 stevensc 59 
            const newLang = languagesOptionsArray.find(el => el.name === lang)
8146 stevensc 60 
 
61 
            console.log(newLang)
8064 stevensc 62 
            newUserLanguagesArray = [
63 
                ...newUserLanguagesArray,
8146 stevensc 64 
                { value: newLang, name: newLang },
8064 stevensc 65 
            ];
66 
        });
67 
        setUserLanguagesArray(newUserLanguagesArray);
8113 stevensc 68 
    }, [modalData]);
8064 stevensc 69 
 
70 
    useEffect(() => {
71 
        let newlanguagesOptionsArray = [];
72 
        Object.entries(languagesOptions).map(([key, value]) => {
73 
            newlanguagesOptionsArray = [
74 
                ...newlanguagesOptionsArray,
75 
                { value: key, name: value },
76 
            ];
77 
        });
78 
        setLanguagesOptionsArray(newlanguagesOptionsArray);
79 
    }, [languagesOptions]);
80 
 
7771 stevensc 81 
    return (
7773 stevensc 82 
        <SubmitModal
8110 stevensc 83 
            title="Idiomas"
8139 stevensc 84 
            submitData={data}
8110 stevensc 85 
            postLink={dataLink}
8064 stevensc 86 
            closeModal={closeModal}
7773 stevensc 87 
        >
8110 stevensc 88 
            <div className="form-group">
89 
                <TagsInput
90 
                    suggestions={languagesOptionsArray}
91 
                    settedTags={userLanguagesArray}
92 
                    onChange={handleTagsChange}
93 
                />
94 
            </div>
7771 stevensc 95 
        </SubmitModal>
8110 stevensc 96 
    );
97 
};
98 
 
99 
export default LanguageModal;