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