Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useForm } from 'react-hook-form'

import useFetchHelper from '@app/hooks/useFetchHelper'

import Modal from '@app/components/UI/modal/Modal'
import TagsInput from '@app/components/UI/TagsInput'

const SkillsModal = ({
  show = false,
  skills: userSkills = [],
  onConfirm = () => null,
  onClose = () => null
}) => {
  const { data: skills } = useFetchHelper('skills', [])
  const labels = useSelector(({ intl }) => intl.labels)

  const { register, handleSubmit, setValue } = useForm()

  const onSubmit = handleSubmit((data) => onConfirm(data))

  useEffect(() => {
    register('skills')
  }, [])

  useEffect(() => {
    userSkills.length
      ? setValue('skills', userSkills)
      : setValue('skills', [''])
  }, [userSkills])

  return (
    <Modal
      show={show}
      onClose={onClose}
      title={labels.skills}
      onAccept={onSubmit}
    >
      <TagsInput
        suggestions={skills}
        settedTags={userSkills}
        onChange={(tags) => setValue('skills', tags)}
      />
    </Modal>
  )
}

export default SkillsModal