Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8107 | Rev 8112 | 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,
11 
    languagesOptions = {
12 
        ar: "Arabe",
13 
        de: "Alemán",
14 
        en: "Inglés",
15 
        es: "Español",
16 
        hi: "Hindi",
17 
        it: "Italiano",
18 
        ja: "Japonés",
19 
        pt: "Portugués",
20 
        ru: "Ruso",
21 
        zh: "Chino",
22 
    }
8107 stevensc 23 
}) => {
7771 stevensc 24 
 
8110 stevensc 25 
    const {
26 
        register,
27 
        errors,
28 
        setValue,
29 
        getValues,
30 
    } = useForm();
31 
 
32 
    const [userLanguagesArray, setUserLanguagesArray] = useState([]);
33 
    const [languagesOptionsArray, setLanguagesOptionsArray] = useState([]);
7771 stevensc 34 
    const [settedLanguageTags, setSettedLanguageTags] = useState([]);
35 
 
36 
    useEffect(() => {
8064 stevensc 37 
        register("languages", {
38 
            required: "Por favor seleccione al menos un lenguaje",
39 
        });
40 
    }, []);
7771 stevensc 41 
 
8110 stevensc 42 
    useEffect(() => {
43 
        Object.entries(getValues()).map(([key, value]) => {
44 
            setValue(key, "");
45 
        });
46 
    }, []);
47 
 
7771 stevensc 48 
    const handleTagsChange = (tags) => {
49 
        if (tags.length) {
50 
            let newTags = [];
51 
            tags.map((tag) => {
52 
                newTags = [...newTags, tag.value];
53 
            });
54 
            setValue("languages", newTags);
55 
            setSettedLanguageTags(tags);
56 
        } else {
57 
            setValue("languages", "");
58 
            setSettedLanguageTags("");
59 
        }
60 
    };
61 
 
8064 stevensc 62 
    useEffect(() => {
63 
        let newUserLanguagesArray = [];
64 
        Object.entries(userLanguages).map(([key, value]) => {
65 
            newUserLanguagesArray = [
66 
                ...newUserLanguagesArray,
67 
                { value: key, name: value },
68 
            ];
69 
        });
70 
        setUserLanguagesArray(newUserLanguagesArray);
71 
    }, [userLanguages]);
72 
 
73 
    useEffect(() => {
74 
        let newlanguagesOptionsArray = [];
75 
        Object.entries(languagesOptions).map(([key, value]) => {
76 
            newlanguagesOptionsArray = [
77 
                ...newlanguagesOptionsArray,
78 
                { value: key, name: value },
79 
            ];
80 
        });
81 
        setLanguagesOptionsArray(newlanguagesOptionsArray);
82 
    }, [languagesOptions]);
83 
 
7771 stevensc 84 
    return (
7773 stevensc 85 
        <SubmitModal
8110 stevensc 86 
            title="Idiomas"
7773 stevensc 87 
            submitData={settedLanguageTags}
8110 stevensc 88 
            postLink={dataLink}
8064 stevensc 89 
            closeModal={closeModal}
7773 stevensc 90 
        >
8110 stevensc 91 
            <div className="form-group">
92 
                <TagsInput
93 
                    suggestions={languagesOptionsArray}
94 
                    settedTags={userLanguagesArray}
95 
                    onChange={handleTagsChange}
96 
                />
97 
                {errors.languages && <p>{errors.languages.message}</p>}
98 
            </div>
7771 stevensc 99 
        </SubmitModal>
8110 stevensc 100 
    );
101 
};
102 
 
103 
export default LanguageModal;