Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

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>

                <h3>Escribe el nombre</h3>

            </Modal.Header>

            <Modal.Body>

                <div className="container">

                    <div className="mb-2">

                        <input

                            onChange={handleChange}

                            name="search"

                            placeholder="Escribe el nombre del usuario"

                        />

                    </div>

                    <ul className="d-flex flex-column w-100" style={{ gap: '1rem' }}>

                        {!!users.length &&

                            users.map((element, index) =>

                                <li key={index}>

                                    <div

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

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

                                    >

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

                                        <button

                                            className="btn btn-primary"

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

                                        >

                                            Invitar

                                        </button>

                                    </div>

                                </li>

                            )

                        }

                    </ul>

                </div>

            </Modal.Body>

        </Modal>

    )

}

export default AddMemberModal