Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect } from 'react'

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

import { Modal } from 'react-bootstrap'

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

import { useDispatch } from 'react-redux'

const AddMemberModal = ({

  isShow = false,

  linkInvite = '',

  handleClose = function () {}

}) => {

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

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

  const dispatch = useDispatch()

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

  const searchMember = (url, search) => {

    if (!url) {

      return

    }

    axios

      .get(url + '?search=' + search)

      .then(({ data: responseData }) => {

        const { data } = responseData

        setUsers(data)

      })

      .catch((err) => {

        dispatch(addNotification({ style: 'danger', msg: err }))

      })

  }

  const invite = (uuid) => {

    const formData = new FormData()

    formData.append('id', uuid)

    axios

      .post(linkInvite, formData)

      .then(({ data: responseData }) => {

        const { data, success } = responseData

        if (!success) {

          throw new Error(data)

        }

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

        handleClose()

      })

      .catch((err) => {

        dispatch(addNotification({ style: 'danger', msg: err.message }))

      })

  }

  useEffect(() => {

    searchMember(linkInvite, search)

  }, [search, linkInvite])

  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.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