Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect } from "react";
import { axios } from "../../utils";
import { Modal } from "react-bootstrap";
import { addNotification } from "../../redux/notification/notification.actions";

const AddMemberModal = ({
  isShow = false,
  linkInvite = "",
  handleClose = function () {},
}) => {
  const [users, setUsers] = useState([]);
  const [search, setSearch] = useState("");

  const handleChange = ({ target }) => setSearch(target.value);

  const searchMember = async (url, search) => {
    if (!url) return;

    try {
      const { data } = await axios.get(url + "?search=" + search);
      setUsers(data.data);
    } catch (error) {
      console.log(">>: error > ", error);
    }
  };

  const invite = (uuid) => {
    const formData = new FormData();
    formData.append("id", uuid);
    axios
      .post(linkInvite, formData)
      .then(({ data }) => {
        if (!data.success) {
          return addNotification({ msg: data.data, style: "danger" });
        }
        addNotification({ msg: data.data, style: "success" });
        handleClose();
      })
      .catch(() =>
        addNotification({
          msg: "Disculpe, ha ocurrido un error",
          style: "danger",
        })
      );
  };

  useEffect(() => {
    searchMember(linkInvite, search);
  }, [search, linkInvite]);

  return (
    <Modal show={isShow} onHide={handleClose}>
      <Modal.Header closeButton>
        <h3>Escribe el nombre</h3>
      </Modal.Header>
      <Modal.Body>
        <div className="container">
          <div className="mb-2">
            <input
              onChange={handleChange}
              name="search"
              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>
        </div>
      </Modal.Body>
    </Modal>
  );
};

export default AddMemberModal;