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 = (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
      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