Proyectos de Subversion LeadersLinked - Backend

Rev

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