Proyectos de Subversion LeadersLinked - SPA

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

import { useDispatch } from 'react-redux'

import { axios } from 'utils/index'

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

import Modal from 'components/UI/modal/Modal'

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.message }))

      })

  }

  const invite = (id) => {

    axios

      .post(linkInvite, { id })

      .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

      title='Agregar miembro'

      show={isShow}

      onClose={handleClose}

      showFooter={false}

    >

      <div className='mb-2'>

        <input

          onChange={handleChange}

          name='search'

          className='form-control'

          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>

    </Modal>

  )

}

export default AddMemberModal