Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } from 'react'
import { axios } from '../../utils'
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