Proyectos de Subversion LeadersLinked - SPA

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

import { useFetchHelper } from '@hooks'

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

const HobbiesModal = ({
  show = false,
  hobbies: userHobbies = [],
  onClose = () => {},
  onConfirm = () => {}
}) => {
  const { data: hobbies } = useFetchHelper('hobbies')
  const labels = useSelector(({ intl }) => intl.labels)

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

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

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

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

  return (
    <Modal
      title={labels.hobbies_and_interests}
      show={show}
      onClose={onClose}
      onAccept={onSubmitHandler}
    >
      <TagsInput
        suggestions={hobbies}
        defaultValue={userHobbies}
        onChange={(tags) => setValue('hobbies', tags)}
      />
    </Modal>
  )
}

export default HobbiesModal