Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8376 | Rev 8378 | 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,
8372 stevensc 11 
    dataLink
8107 stevensc 12 
}) => {
7771 stevensc 13 
 
8374 stevensc 14 
    const { register, errors } = useForm();
8110 stevensc 15 
 
8374 stevensc 16 
    const [languagesSelecteds, setLanguagesSelecteds] = useState([]);
8153 stevensc 17 
    const [userLanguagesArray, setUserLanguagesArray] = useState([]);
8110 stevensc 18 
    const [languagesOptionsArray, setLanguagesOptionsArray] = useState([]);
8138 stevensc 19 
    const [data, setData] = useState({ languages: "" });
7771 stevensc 20 
 
21 
    useEffect(() => {
8064 stevensc 22 
        register("languages", {
23 
            required: "Por favor seleccione al menos un lenguaje",
24 
        });
25 
    }, []);
7771 stevensc 26 
 
27 
    const handleTagsChange = (tags) => {
28 
        if (tags.length) {
29 
            let newTags = [];
30 
            tags.map((tag) => {
31 
                newTags = [...newTags, tag.value];
32 
            });
8141 stevensc 33 
            setData({ "languages[]": newTags });
7771 stevensc 34 
        } else {
8141 stevensc 35 
            setData({ "languages[]": "" });
7771 stevensc 36 
        }
37 
    };
38 
 
8064 stevensc 39 
    useEffect(() => {
8372 stevensc 40 
        getData(dataLink)
41 
            .then(({ languages_available, languages_selected }) => {
8147 stevensc 42 
 
8372 stevensc 43 
                // Set languages options
44 
                Object.entries(languages_available).map(([key, value]) => {
8370 stevensc 45 
                    setLanguagesOptionsArray(prev => [...prev, { value: key, name: value }])
46 
                })
8372 stevensc 47 
 
48 
                // Set languages selecteds
8376 stevensc 49 
                setLanguagesSelecteds([...languagesSelecteds, ...languages_selected])
8370 stevensc 50 
            })
51 
    }, [dataLink]);
8368 stevensc 52 
 
8374 stevensc 53 
    useEffect(() => {
8376 stevensc 54 
 
55 
        console.log(languagesSelecteds)
8374 stevensc 56 
        languagesSelecteds.map(lang => {
8376 stevensc 57 
            console.log(lang)
8377 stevensc 58 
            const userLang = languagesOptionsArray.find(el => el.value === lang)
8376 stevensc 59 
            console.log(userLang)
8374 stevensc 60 
            if (userLang) {
61 
                setUserLanguagesArray(prev => [...prev, { value: userLang.value, name: userLang.name }])
62 
            }
63 
        })
64 
    }, [languagesSelecteds, languagesOptionsArray]);
65 
 
66 
 
7771 stevensc 67 
    return (
7773 stevensc 68 
        <SubmitModal
8110 stevensc 69 
            title="Idiomas"
8139 stevensc 70 
            submitData={data}
8110 stevensc 71 
            postLink={dataLink}
8064 stevensc 72 
            closeModal={closeModal}
7773 stevensc 73 
        >
8110 stevensc 74 
            <div className="form-group">
75 
                <TagsInput
76 
                    suggestions={languagesOptionsArray}
77 
                    settedTags={userLanguagesArray}
78 
                    onChange={handleTagsChange}
79 
                />
8372 stevensc 80 
                {errors.languages && <p>{errors.languages}</p>}
8110 stevensc 81 
            </div>
7771 stevensc 82 
        </SubmitModal>
8110 stevensc 83 
    );
84 
};
85 
 
8372 stevensc 86 
export default LanguageModal;