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>

    </>

  );

};