Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
11246 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'
8372 stevensc 7 
 
8 
 
9 
const SkillsModal = ({
11246 stevensc 10 
	closeModal,
11 
	dataLink
8372 stevensc 12 
}) => {
13 
 
11246 stevensc 14 
	const { register, errors } = useForm()
8372 stevensc 15 
 
11246 stevensc 16 
	const [skillsSelecteds, setSkillsSelecteds] = useState([])
17 
	const [userSkillsArray, setUserSkillsArray] = useState([])
18 
	const [skillsOptionsArray, setSkillsOptionsArray] = useState([])
19 
	const [data, setData] = useState([{ 'skills[]': '' }])
8372 stevensc 20 
 
11246 stevensc 21 
	useEffect(() => {
22 
		register('skills', {
23 
			required: 'Por favor seleccione al menos un lenguaje',
24 
		})
25 
	}, [])
8372 stevensc 26 
 
11246 stevensc 27 
	const handleTagsChange = (tags) => {
28 
		if (tags.length) {
29 
			let newTags = []
30 
			tags.map((tag) => {
31 
				newTags = [...newTags, { 'skills[]': tag.value }]
32 
			})
11255 stevensc 33 
			setData(newTags)
11246 stevensc 34 
		} else {
35 
			setData({ 'skills[]': '' })
36 
		}
37 
	}
8372 stevensc 38 
 
11246 stevensc 39 
	useEffect(() => {
40 
		getData(dataLink)
41 
			.then(({ skills_available, skills_selected }) => {
8372 stevensc 42 
 
11246 stevensc 43 
				Object.entries(skills_available).map(([key, value]) => {
44 
					setSkillsOptionsArray(prev => [...prev, { value: key, name: value }])
45 
				})
8374 stevensc 46 
 
11246 stevensc 47 
				setSkillsSelecteds(skills_selected)
48 
			})
49 
	}, [dataLink])
8374 stevensc 50 
 
11246 stevensc 51 
	useEffect(() => {
52 
		skillsSelecteds.map(skill => {
53 
			const userSkill = skillsOptionsArray.find(el => el.value === skill)
8372 stevensc 54 
 
11246 stevensc 55 
			if (userSkill) {
56 
				setUserSkillsArray(prev => [...prev, { value: userSkill.value, name: userSkill.name }])
57 
			}
58 
		})
59 
	}, [skillsSelecteds, skillsOptionsArray])
8372 stevensc 60 
 
11246 stevensc 61 
	return (
62 
		<SubmitModal
63 
			title="Habilidades"
64 
			submitData={data}
65 
			postLink={dataLink}
66 
			closeModal={closeModal}
67 
		>
68 
			<div className="form-group">
69 
				<TagsInput
70 
					suggestions={skillsOptionsArray}
71 
					settedTags={userSkillsArray}
72 
					onChange={handleTagsChange}
73 
				/>
74 
				{errors.skills && <p>{errors.skills}</p>}
75 
			</div>
76 
		</SubmitModal>
77 
	)
78 
}
79 
 
80 
export default SkillsModal