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}

            centered

        >

            <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