Proyectos de Subversion LeadersLinked - Antes de SPA

/* 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