Proyectos de Subversion LeadersLinked - Backend

import React from "react";

import React from 'react'

import { useState, useEffect } from "react";

import { useState, useEffect } from 'react'

import { useForm } from "react-hook-form";

import { useForm } from 'react-hook-form'

import TagsInput from "../../../shared/TagsInput";

import TagsInput from '../../../shared/TagsInput'

import SubmitModal from "./SubmitModal";

import SubmitModal from './SubmitModal'

import { getData } from "../../../helpers/fetchHelpers"

import { getData } from '../../../helpers/fetchHelpers'

const LanguageModal = ({

const LanguageModal = ({

    dataLink

	dataLink

}) => {

}) => {

    const { register, errors } = useForm();

	const { register, errors } = useForm()

    const [languagesSelecteds, setLanguagesSelecteds] = useState([]);

	const [languagesSelecteds, setLanguagesSelecteds] = useState([])

    const [userLanguagesArray, setUserLanguagesArray] = useState([]);

	const [userLanguagesArray, setUserLanguagesArray] = useState([])

    const [languagesOptionsArray, setLanguagesOptionsArray] = useState([]);

	const [languagesOptionsArray, setLanguagesOptionsArray] = useState([])

    const [data, setData] = useState({ languages: "" });

	const [data, setData] = useState({ languages: '' })

    useEffect(() => {

	useEffect(() => {

        register("languages", {

		register('languages', {

            required: "Por favor seleccione al menos un lenguaje",

			required: 'Por favor seleccione al menos un lenguaje',

        });

		})

    }, []);

	}, [])

    const handleTagsChange = (tags) => {

	const handleTagsChange = (tags) => {

        if (tags.length) {

		if (tags.length) {

            let newTags = [];

			let newTags = []

            tags.map((tag) => {

			tags.map((tag) => {

                newTags = [...newTags, tag.value];

				newTags = [...newTags, { 'languages[]': tag.value }]

            });

			})

            setData({ "languages[]": newTags });

			setData(newTags)

        } else {

		} else {

            setData({ "languages[]": "" });

			setData({ 'languages[]': '' })

        }

		}

    };

	}

    useEffect(() => {

	useEffect(() => {

        getData(dataLink)

		getData(dataLink)

            .then(({ languages_available, languages_selected }) => {

			.then(({ languages_available, languages_selected }) => {

                // Set languages options

				// Set languages options

                Object.entries(languages_available).map(([key, value]) => {

				Object.entries(languages_available).map(([key, value]) => {

                    setLanguagesOptionsArray(prev => [...prev, { value: key, name: value }])

					setLanguagesOptionsArray(prev => [...prev, { value: key, name: value }])

                })

				})

                // Set languages selecteds

				// Set languages selecteds

                setLanguagesSelecteds([...languagesSelecteds, ...languages_selected])

				setLanguagesSelecteds([...languagesSelecteds, ...languages_selected])

            })

			})

    }, [dataLink]);

	}, [dataLink])

    useEffect(() => {

	useEffect(() => {

        languagesSelecteds.map(lang => {

		languagesSelecteds.map(lang => {

            const userLang = languagesOptionsArray.find(el => el.value === lang)

			const userLang = languagesOptionsArray.find(el => el.value === lang)

            if (userLang) {

			if (userLang) {

                setUserLanguagesArray(prev => [...prev, { value: userLang.value, name: userLang.name }])

				setUserLanguagesArray(prev => [...prev, { value: userLang.value, name: userLang.name }])

            }

			}

        })

		})

    }, [languagesSelecteds, languagesOptionsArray]);

	}, [languagesSelecteds, languagesOptionsArray])

    return (

	return (

        <SubmitModal

		<SubmitModal

            title="Idiomas"

			title="Idiomas"

            submitData={data}

			submitData={data}

            postLink={dataLink}

			postLink={dataLink}

            closeModal={closeModal}

			closeModal={closeModal}

        >

		>

            <div className="form-group">

			<div className="form-group">

                <TagsInput

				<TagsInput

                    suggestions={languagesOptionsArray}

					suggestions={languagesOptionsArray}

                    settedTags={userLanguagesArray}

					settedTags={userLanguagesArray}

                    onChange={handleTagsChange}

					onChange={handleTagsChange}

                />

				/>

                {errors.languages && <p>{errors.languages}</p>}

				{errors.languages && <p>{errors.languages}</p>}