Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import axios from 'axios'

import React, { useState } from 'react'

import { useEffect } from 'react'

import { Modal } from 'react-bootstrap'

import { addNotification } from '../../../redux/notification/notification.actions'

const AddMemberModal = ({

    isShow = false,

    linkInvite = '',

    handleClose = function () { }

}) => {

    const [users, setUsers] = useState([])

    const [search, setSearch] = useState('')

    const handleChange = ({ target }) => setSearch(target.value)

    const searchMember = async (value) => {

        try {

            const { data } = await axios.get(linkInvite + '?search=' + value)

            setUsers(data.data)

        } catch (error) {

            console.log('>>: error > ', error)

        }

    }

    const invite = (uuid) => {

        const formData = new FormData()

        formData.append('id', uuid)

        axios.post(linkInvite, formData)

            .then(({ data }) => {

                if (!data.success) {

                    return addNotification({ msg: data.data, style: 'danger' })

                }

                addNotification({ msg: data.data, style: 'success' })

                handleClose()

            })

            .catch(() => addNotification({ msg: 'Disculpe, ha ocurrido un error', style: 'danger' }))

    }

    useEffect(() => {

        searchMember(search)

    }, [search])

    return (

        <Modal show={isShow} onHide={handleClose}>

            <Modal.Header closeButton />

            <Modal.Body>

                <div className="container">

                    <div className="mb-2">

                        <label htmlFor="search">

                            Escribe el nombre

                        </label>

                        <input

                            onChange={handleChange}

                            name="search"

                            placeholder="Escribe el nombre del usuario"

                        />

                    </div>

                    {!!users.length &&

                        users.map(element =>

                            <div

                                className="d-flex align-items-center justify-content-between flex-column flex-md-row"

                                key={element.value}

                                style={{ gap: '.5rem' }}

                            >

                                <span>{element.text}</span>

                                <button

                                    className="btn btn-primary"

                                    onClick={() => invite(element.value)}

                                >

                                    Invitar

                                </button>

                            </div>

                        )

                    }

                </div>

            </Modal.Body>

        </Modal>

    )

}

export default AddMemberModal