Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
import React, { useEffect, useState } from "react";
import { axios, debounce } from "../../../utils";
import { Modal } from "react-bootstrap";
import { useDispatch } from "react-redux";
import { addNotification } from "../../../redux/notification/notification.actions";
import SendIcon from "@mui/icons-material/Send";

// Components
import Spinner from "../../../shared/loading-spinner/Spinner";

const ContactsModal = ({ show, onClose }) => {
  const [isShow, setIsShow] = useState(show);
  const [contacts, setContacts] = useState([]);
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();

  const closeModal = () => {
    setIsShow(false);
    setContacts([]);
    onClose();
  };

  const handleSearch = debounce((value) => getContacts(value), 500);

  const getContacts = (searchValue = "") => {
    setLoading(true);
    axios
      .get(`/chat/users?search=${searchValue.toLowerCase()}`)
      .then(({ data: response }) => {
        if (!response.success) {
          return dispatch(
            addNotification({ style: "danger", msg: "Ha ocurrido un error" })
          );
        }
        setContacts(response.data);
      })
      .finally(() => setLoading(false));
  };

  const startConversation = (create_url = "") => {
    setLoading(true);
    axios
      .post(create_url)
      .then(({ data: response }) => {
        if (response.success) closeModal();
      })
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    setIsShow(show);
  }, [show]);

  return (
    <Modal show={isShow} onHide={closeModal}>
      <Modal.Header closeButton>
        <h3 className="card-title font-weight-bold">Iniciar conversación</h3>
      </Modal.Header>
      <Modal.Body className="pb-3">
        <div className="form-group">
          <label htmlFor="search-people">Escribe el nombre</label>
          <input
            type="text"
            className="form-control"
            placeholder="Escribe el nombre de la persona"
            onChange={(e) => handleSearch(e.target.value)}
          />
        </div>
        {loading ? (
          <Spinner />
        ) : (
          contacts.map(({ name, image, link_open_or_create }) => (
            <div
              key={name}
              className="d-flex align-items-center justify-content-around"
              style={{ gap: ".5rem" }}
            >
              <div
                className="d-flex align-items-center"
                style={{ gap: ".5rem" }}
              >
                <img
                  src={image}
                  alt={`User ${name} image`}
                  width={40}
                  height={40}
                  style={{ borderRadius: "50%" }}
                />
                <p>{name}</p>
              </div>

              <button
                className="btn btn-primary"
                onClick={() => startConversation(link_open_or_create)}
              >
                <SendIcon />
              </button>
            </div>
          ))
        )}
      </Modal.Body>
    </Modal>
  );
};

export default ContactsModal;