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