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;