Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8378 | | Comparar con el anterior | Ultima modificación | Ver Log |

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