Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useForm } from 'react-hook-form'

import { connect, useSelector } from 'react-redux'

import { axios } from '../../utils'

import { addNotification } from '../../redux/notification/notification.actions'

import FormErrorFeedback from '../UI/form/FormErrorFeedback'

import Modal from 'components/UI/modal/Modal'

const AddProfileModal = ({

  show = '',

  onHide = () => null,

  getProfiles = () => null,

  addNotification // redux action

}) => {

  const labels = useSelector(({ intl }) => intl.labels)

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

  const onSubmitHandler = handleSubmit(async (data) => {

    axios

      .post('/profile/my-profiles/add', data)

      .then(({ data: response }) => {

        const { data, success } = response

        if (!success) {

          const errorMessage =

            typeof data === 'string'

              ? data

              : 'Ha ocurrido un error, por favor intente más tarde'

          addNotification({ style: 'success', msg: errorMessage })

          return

        }

        getProfiles()

        addNotification({ style: 'success', msg: data })

        onHide()

      })

      .catch((err) => {

        console.log(err)

        throw new Error(err)

      })

  })

  return (

    <Modal

      title={labels.new_profile}

      show={show}

      onHide={onHide}

      onAccept={onSubmitHandler}

      onClose={onHide}

      onReject={onHide}

    >

      <input

        type='text'

        name='name'

        placeholder={labels.profile_name}

        ref={register({ required: 'Este campo es requerido' })}

      />

      {errors.name && (

        <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>

      )}

    </Modal>

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

}

export default connect(null, mapDispatchToProps)(AddProfileModal)