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;