Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import { axios } from '../../../utils'
import { useForm } from 'react-hook-form'
import { Button, Modal } from 'react-bootstrap'
import styled from 'styled-components'
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
import Spinner from '../../../shared/loading-spinner/Spinner'

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`

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 &&
                        <StyledSpinnerContainer>
                            <Spinner />
                        </StyledSpinnerContainer>
                    }
                </Modal.Body>
                <Modal.Footer>
                    <Button type="submit">Enviar</Button>
                    <Button variant="danger" onClick={closeModal}>
                        Cancelar
                    </Button>
                </Modal.Footer>
            </form>
        </Modal>
  )
}

export default CreateGroupModal