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;