Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
import { axios } from '../../utils/axios'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import useFetchHelper from '../../hooks/useFetchHelper'

import Spinner from 'components/UI/Spinner'
import Input from 'components/UI/Input'
import SelectField from 'components/UI/SelectField'

const AddGroupModal = ({ show, onHide, fetchGroups }) => {
  const [loading, setLoading] = useState(false)
  const { data: groupTypes } = useFetchHelper('group-types')
  const { data: industries } = useFetchHelper('industries')
  const dispatch = useDispatch()

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

  const onSubmitHandler = (data) => {
    setLoading(true)
    const formData = new FormData()
    Object.entries(data).forEach(([key, value]) => formData.append(key, value))

    axios
      .post(`/group/my-groups/add`, formData)
      .then(({ data: response }) => {
        const { data, success } = response

        if (!success) {
          const errorMessage = data
          errorMessage === 'object'
            ? Object.entries(errorMessage).map(
                ([key, value]) =>
                  key in getValues() &&
                  setError(key, {
                    type: 'manual',
                    message: Array.isArray(value) ? value[0] : value
                  })
              )
            : dispatch(addNotification({ style: 'danger', msg: errorMessage }))
        }

        fetchGroups()
        onHide()
      })
      .catch((err) => {
        addNotification({ style: 'danger', msg: err.message })
        throw new Error(err)
      })
      .finally(() => setLoading(false))
  }

  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title>Nuevo Grupo</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <form onSubmit={handleSubmit(onSubmitHandler)}>
          <Input
            type='text'
            name='name'
            ref={register({
              required: 'Por favor ingrese el nombre del grupo'
            })}
            errors={errors}
          />
          <SelectField
            name='type_id'
            label='Tipo'
            options={groupTypes}
            ref={register({
              required: 'Por favor eliga un tipo'
            })}
            errors={errors}
          />
          <SelectField
            name='industry_id'
            label='Industria'
            options={industries}
            ref={register({
              required: 'Por favor eliga una industria'
            })}
            errors={errors}
          />
          {loading && <Spinner />}
          <Button type='submit'>Crear</Button>
          <Button onClick={onHide} variant='danger'>
            Cancelar
          </Button>
        </form>
      </Modal.Body>
    </Modal>
  )
}

export default AddGroupModal