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 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}

        settedTags={userHobbies}

        onChange={(tags) => setValue('hobbies', tags)}

      />

    </Modal>

  )

}

export default HobbiesModal