Proyectos de Subversion LeadersLinked - Backend

import React from "react";
import ChatMail from "./ChatRoom";
import Sidebar from "./Sidebar";
import { Modal } from "react-bootstrap";
import { axios } from "../../../utils";
import Chat from "../chat/Chat";
import styled from "styled-components";
import Spinner from "../../../shared/loading-spinner/Spinner";

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;
export default (props) => {
  const defaultPage = { current: 1, last: 1 };
  const [conversations, setConversations] = React.useState([]);
  const [selectedConversation, setSelectedConversation] = React.useState(null);
  const [page, setPage] = React.useState(defaultPage);
  const [messages, setMessages] = React.useState([]);
  const [isGettingMessages, setIsGettingMessages] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const [inmailPersons, setInmailPersons] = React.useState([]);
  const [search, setSearch] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const getMessages = async (
    conversation = selectedConversation,
    _page = page.current,
    justPaginate = false
  ) => {
    try {
      const res = await axios.get(
        conversation.messages_link + "?page=" + _page
      );
      if (justPaginate) {
        const _messages = [...messages, ...res.data.data];
        setMessages(_messages);
      } else {
        setMessages(res.data.data || []);
      }
      if (
        res.data.pagination &&
        res.data.pagination.last &&
        res.data.pagination.last !== page.last
      ) {
        setPage({
          ...page,
          last: res.data.pagination.last,
        });
      }
    } catch (error) {
      console.log(">>: error > ", error);
    } finally {
      if (isGettingMessages) {
        setIsGettingMessages(false);
      }
    }
  };
  const handleChangeConversation = async (conversation) => {
    // setPage(defaultPage)
    setLoading(true);
    setSelectedConversation(null);
    setTimeout(() => {
      setSelectedConversation(conversation);
      setLoading(false);
    }, 1000);
    // getMessages(conversation, defaultPage.current)
  };

  const handleSend = async (message) => {
    if (selectedConversation) {
      try {
        const params = {
          message,
        };
        const formData = new FormData();
        Object.entries(params).map(([key, value]) => {
          formData.append(key, value);
        });
        const res = await axios.post(selectedConversation.send_link, formData);
        const _messages = [...messages];
        _messages.push(res.data.data);
        setMessages(_messages);
      } catch (error) {
        console.log(">>: err0r > ", error);
      } finally {
        getMessages();
      }
    }
  };

  const getMoreMessages = () => {
    if (page.last > page.current) {
      let { current } = page;
      current += 1;
      if (!isGettingMessages) {
        setIsGettingMessages(true);
        setPage({
          ...page,
          current,
        });
        getMessages(selectedConversation, current, true);
      }
    }
  };
  const onClose = () => {
    setVisible(false);
  };

  const handleChange = async (e) => {
    const value = e.target.value;
    setSearch(value);
    try {
      const res = await axios.get("/helpers/search-people?search=" + value);
      if (res.data.success) {
        setInmailPersons(res.data.data);
      }
    } catch (error) {
      console.log(">>: error > ", error);
    }
  };

  const handleInmailPerson = (uuid) => {
    onClose();
    window.location.href = "/inmail/" + uuid;
    setTimeout(() => {
      window.location.reload();
    }, 1000);
  };

  const handleCloseChat = () => {
    console.log(">>: close chat");
  };

  return (
    <>
      {loading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
      <Modal show={visible} onHide={onClose}>
        <div className="card">
          <div className="card-body">
            <h3 className="card-title font-weight-bold">Crear sala de Chat</h3>
            <div class="form-group">
              <label for="search-people">Direccion de email</label>
              <input
                type="email"
                className="form-control"
                id="search-people"
                aria-describedby="Buscador de personas"
                placeholder="Escribe el nombre de la persona"
                onChange={handleChange}
              />
            </div>
            <div className="container">
              {inmailPersons.map((element) => {
                return (
                  <div className="row" key={element.value}>
                    <div className="col-8">
                      <p> {element.text} </p>
                    </div>
                    <div className="col-4">
                      <button
                        className="btn btn-primary"
                        onClick={() => handleInmailPerson(element.value)}
                      >
                        <i className="fa fa-check" />
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
            <a href="#" onClick={onClose} className="btn btn-danger">
              Cerrar
            </a>
          </div>
        </div>
      </Modal>
      <section className="messages-page">
        <div className="messages-sec">
          <div className="row">
            <div className="col-lg-4 col-md-12 no-pdd">
              <div className="chat_contacts">
                <h2 className="chat-title">Personas y grupos</h2>
                <Sidebar
                  onClick={(conversation) =>
                    handleChangeConversation(conversation)
                  }
                  conversations={[...props.chatUsers, ...props.chatGroups]}
                  selectedConversation={selectedConversation}
                />
              </div>
            </div>
            <div className="col-12 col-md-8">
              {!!selectedConversation ? (
                <Chat
                  entity={selectedConversation}
                  onCloseChat={handleCloseChat}
                />
              ) : (
                <div>
                  <p>Seleccione un chat</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
};