Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'

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

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

import { Button, Modal } from 'react-bootstrap'

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

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

import FormErrorFeedback from '../UI/FormErrorFeedback'

const AddProfileModal = ({

  show = '',

  onHide = () => null,

  getProfiles = () => null,

  addNotification, // redux action

}) => {

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

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

  const onSubmitHandler = async (data) => {

    const formData = new FormData()

    Object.entries(data).map(([key, value]) => formData.append(key, value))

    axios

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

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

        const { data, success } = response

        if (success) {

          return

        }

        getProfiles()

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

        onHide()

      })

      .catch((err) => {

        console.log(err)

        throw new Error(err)

      })

  }

  return (

    <Modal show={show} onHide={onHide}>

      <Modal.Header closeButton>

        <Modal.Title id="contained-modal-title-vcenter">

          {labels.new_profile}

        </Modal.Title>

      </Modal.Header>

      <form onSubmit={handleSubmit(onSubmitHandler)}>

        <Modal.Body>

          <input

            type="text"

            name="name"

            placeholder={labels.profile_name}

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

          />

          {errors.name && (

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

          )}

        </Modal.Body>

        <Modal.Footer>

          <Button type="submit">{labels.create_profile}</Button>

          <Button onClick={onHide} variant="danger">

            {labels.cancel}

          </Button>

        </Modal.Footer>

      </form>

    </Modal>

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

}

export default connect(null, mapDispatchToProps)(AddProfileModal)