Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React from 'react'

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

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

import { connect } from 'react-redux'

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

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

import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'

const AddProfileModal = ({

  show = '',

  onHide = () => null,

  getProfiles = () => null,

  addNotification // redux action

}) => {

  // React hook form

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

  const onSubmitHandler = async (data) => {

    const formData = new FormData()

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

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

      .then(({ data }) => {

        if (data.success) {

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

        }

      })

    onHide()

    getProfiles()

  }

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

            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)