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;