Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';

import { axios } from '@utils/index.js';
import { addNotification } from '../../redux/notification/notification.actions';

import Modal from '@components/UI/modal/Modal';
import Input from '../UI/inputs/Input';

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((response) => {
        const { data } = response.data;
        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((response) => {
        const { data, success } = response.data;

        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}>
      <Input name='search' placeholder='Escribe el nombre del usuario' onChange={handleChange} />

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