Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'

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

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

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

import Spinner from '../../UI/Spinner'

import LoaderContainer from '../../UI/LoaderContainer'

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

const CreateGroupModal = ({ closeModal, show }) => {

  const [loading, setLoading] = useState(false)

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

  const onSubmitHandler = async (data) => {

    setLoading(true)

    const formData = new FormData()

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

    await axios

      .post('/chat/create-group', formData)

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

        if (response.success) closeModal()

      })

    setLoading(false)

  }

  return (

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

      <Modal.Header closeButton>

        <Modal.Title>Crear grupo</Modal.Title>

      </Modal.Header>

      <form onSubmit={handleSubmit(onSubmitHandler)}>

        <Modal.Body>

          <label className="mb-1" htmlFor="name">

            Nombre del grupo

          </label>

          <input

            type="text"

            name="name"

            id="name"

            ref={register({

              required: 'Este campo es requerido',

            })}

          />

          {errors.name && (

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

          )}

          {loading && (

            <LoaderContainer>

              <Spinner />

            </LoaderContainer>

          )}

        </Modal.Body>

        <Modal.Footer>

          <Button type="submit">Enviar</Button>

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

            Cancelar

          </Button>

        </Modal.Footer>

      </form>

    </Modal>

  )

}

export default CreateGroupModal