Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15801 | Rev 15828 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 15801 Rev 15824
Línea 1... Línea 1...
1 
import React from "react";
 1 
import React, { useEffect, useState } from "react";
2 
import ChatMail from "./ChatRoom";
 - 
 
3 
import Sidebar from "./Sidebar";
 - 
 
4 
import { Modal } from "react-bootstrap";
 - 
 
5 
import { axios } from "../../../utils";
 2 
import { axios } from "../../../utils";
- 
 
 3 
 
- 
 
 4 
import Sidebar from "./Sidebar";
6 
import Chat from "../chat/Chat";
 5 
import Chat from "../chat/Chat";
7 
import styled from "styled-components";
 6 
import Modal from "react-bootstrap/Modal";
8 
import Spinner from "../../../shared/loading-spinner/Spinner";
 7 
import EmptySection from "../../../shared/empty-section/EmptySection";
- 
 
 8 
 
- 
 
 9 
const DesktopChat = ({ chatUsers, chatGroups }) => {
- 
 
 10 
  const [selectedConversation, setSelectedConversation] = useState(null);
- 
 
 11 
  const [visible, setVisible] = useState(false);
Línea 9... Línea -...
9 
 
 - 
 
10 
const StyledSpinnerContainer = styled.div`
 - 
 
11 
  position: absolute;
 - 
 
12 
  left: 0;
 - 
 
13 
  top: 0;
 - 
 
14 
  width: 100%;
 - 
 
15 
  height: 100%;
 - 
 
16 
  background: rgba(255, 255, 255, 0.4);
 - 
 
17 
  display: flex;
 - 
 
18 
  justify-content: center;
 - 
 
19 
  align-items: center;
 - 
 
20 
  z-index: 300;
 - 
 
21 
`;
 - 
 
22 
export default (props) => {
 - 
 
23 
  const defaultPage = { current: 1, last: 1 };
 - 
 
24 
  const [conversations, setConversations] = React.useState([]);
 - 
 
25 
  const [selectedConversation, setSelectedConversation] = React.useState(null);
 - 
 
26 
  const [page, setPage] = React.useState(defaultPage);
 - 
 
27 
  const [messages, setMessages] = React.useState([]);
 - 
 
28 
  const [isGettingMessages, setIsGettingMessages] = React.useState(false);
 - 
 
29 
  const [visible, setVisible] = React.useState(false);
 - 
 
30 
  const [inmailPersons, setInmailPersons] = React.useState([]);
 - 
 
31 
  const [search, setSearch] = React.useState("");
 - 
 
32 
  const [loading, setLoading] = React.useState(false);
 - 
 
33 
  const getMessages = async (
 - 
 
34 
    conversation = selectedConversation,
 - 
 
35 
    _page = page.current,
 - 
 
36 
    justPaginate = false
 - 
 
37 
  ) => {
 - 
 
38 
    try {
 - 
 
39 
      const res = await axios.get(
 - 
 
40 
        conversation.messages_link + "?page=" + _page
 - 
 
41 
      );
 - 
 
42 
      if (justPaginate) {
 - 
 
43 
        const _messages = [...messages, ...res.data.data];
 - 
 
44 
        setMessages(_messages);
 - 
 
45 
      } else {
 - 
 
46 
        setMessages(res.data.data || []);
 - 
 
47 
      }
 - 
 
48 
      if (
 - 
 
49 
        res.data.pagination &&
 - 
 
50 
        res.data.pagination.last &&
 - 
 
51 
        res.data.pagination.last !== page.last
 - 
 
52 
      ) {
 - 
 
53 
        setPage({
 - 
 
54 
          ...page,
 - 
 
55 
          last: res.data.pagination.last,
 - 
 
56 
        });
 - 
 
57 
      }
 - 
 
58 
    } catch (error) {
 - 
 
59 
      console.log(">>: error > ", error);
 - 
 
60 
    } finally {
 - 
 
61 
      if (isGettingMessages) {
 - 
 
62 
        setIsGettingMessages(false);
 - 
 
63 
      }
 - 
 
64 
    }
 - 
 
65 
  };
 12 
 
66 
  const handleChangeConversation = async (conversation) => {
 - 
 
67 
    // setPage(defaultPage)
 13 
  const handleChangeConversation = async (conversation) => {
68 
    setLoading(true);
 14 
    setLoading(true);
69 
    setSelectedConversation(null);
 15 
    setSelectedConversation(null);
70 
    setTimeout(() => {
 16 
    setTimeout(() => {
71 
      setSelectedConversation(conversation);
 17 
      setSelectedConversation(conversation);
72 
      setLoading(false);
 18 
      setLoading(false);
73 
    }, 1000);
 - 
 
74 
    // getMessages(conversation, defaultPage.current)
 19 
    }, 1000);
Línea 75... Línea 20...
75 
  };
 20 
  };
76 
 
 - 
 
77 
  const handleSend = async (message) => {
 - 
 
78 
    if (selectedConversation) {
 - 
 
79 
      try {
 - 
 
80 
        const params = {
 - 
 
81 
          message,
 - 
 
82 
        };
 - 
 
83 
        const formData = new FormData();
 - 
 
84 
        Object.entries(params).map(([key, value]) => {
 - 
 
85 
          formData.append(key, value);
 - 
 
86 
        });
 - 
 
87 
        const res = await axios.post(selectedConversation.send_link, formData);
 - 
 
88 
        const _messages = [...messages];
 - 
 
89 
        _messages.push(res.data.data);
 - 
 
90 
        setMessages(_messages);
 - 
 
91 
      } catch (error) {
 - 
 
92 
        console.log(">>: err0r > ", error);
 21 
 
93 
      } finally {
 - 
 
94 
        getMessages();
 - 
 
95 
      }
 22 
  const onClose = () => {
Línea 96... Línea 23...
96 
    }
 23 
    setVisible(false);
97 
  };
 24 
  };
98 
 
 - 
 
99 
  const getMoreMessages = () => {
 - 
 
100 
    if (page.last > page.current) {
 - 
 
101 
      let { current } = page;
 - 
 
102 
      current += 1;
 - 
 
103 
      if (!isGettingMessages) {
 - 
 
104 
        setIsGettingMessages(true);
 - 
 
105 
        setPage({
 - 
 
106 
          ...page,
 - 
 
107 
          current,
 - 
 
108 
        });
 - 
 
109 
        getMessages(selectedConversation, current, true);
 25 
 
- 
 
 26 
  const handleCloseChat = () => {
- 
 
 27 
    console.log(">>: close chat");
- 
 
 28 
  };
- 
 
 29 
 
- 
 
 30 
  return (
- 
 
 31 
    <>
- 
 
 32 
      <main className="conversation-page">
- 
 
 33 
        <Sidebar
- 
 
 34 
          onClick={(conversation) => handleChangeConversation(conversation)}
- 
 
 35 
          conversations={[...chatUsers, ...chatGroups]}
- 
 
 36 
          selectedConversation={selectedConversation}
- 
 
 37 
        />
- 
 
 38 
        {!selectedConversation ? (
- 
 
 39 
          <EmptySection />
- 
 
 40 
        ) : (
- 
 
 41 
          <Chat entity={selectedConversation} onCloseChat={handleCloseChat} />
- 
 
 42 
        )}
- 
 
 43 
      </main>
- 
 
 44 
      <DesktopChat.ChatModal show={visible} onClose={onClose} />
- 
 
 45 
    </>
- 
 
 46 
  );
- 
 
 47 
};
- 
 
 48 
 
- 
 
 49 
const ChatModal = ({ show, onClose }) => {
110 
      }
 50 
  const [inmailPersons, setInmailPersons] = useState([]);
111 
    }
 51 
  const [search, setSearch] = useState("");
112 
  };
 52 
 
Línea 113... Línea 53...
113 
  const onClose = () => {
 53 
  const handleChange = (searchValue) => {
114 
    setVisible(false);
 - 
 
115 
  };
 - 
 
116 
 
 54 
    setSearch(searchValue);
- 
 
 55 
  };
117 
  const handleChange = async (e) => {
 56 
 
- 
 
 57 
  const searchUsers = async () => {
- 
 
 58 
    try {
- 
 
 59 
      const { data: response } = await axios.get(
118 
    const value = e.target.value;
 60 
        `/helpers/search-people?search=${search}`
119 
    setSearch(value);
 61 
      );
120 
    try {
 62 
      const { success, data } = response;
- 
 
 63 
 
- 
 
 64 
      if (!success) {
121 
      const res = await axios.get("/helpers/search-people?search=" + value);
 65 
        console.log("Ha ocurrido un error");
122 
      if (res.data.success) {
 66 
      }
123 
        setInmailPersons(res.data.data);
 67 
 
124 
      }
 68 
      setInmailPersons(data);
Línea 133... Línea 77...
133 
    setTimeout(() => {
 77 
    setTimeout(() => {
134 
      window.location.reload();
 78 
      window.location.reload();
135 
    }, 1000);
 79 
    }, 1000);
136 
  };
 80 
  };
Línea 137... Línea 81...
137 
 
 81 
 
138 
  const handleCloseChat = () => {
 82 
  useEffect(() => {
139 
    console.log(">>: close chat");
 83 
    searchUsers();
Línea 140... Línea 84...
140 
  };
 84 
  }, [search]);
141 
 
 - 
 
142 
  return (
 - 
 
143 
    <>
 85 
 
144 
      {loading && (
 - 
 
145 
        <StyledSpinnerContainer>
 86 
  return (
146 
          <Spinner />
 - 
 
147 
        </StyledSpinnerContainer>
 87 
    <Modal show={show} onHide={onClose}>
148 
      )}
 88 
      <Modal.Header closeButton>
149 
      <Modal show={visible} onHide={onClose}>
 89 
        <Modal.Title>Crear sala de Chat</Modal.Title>
150 
        <div className="card">
 - 
 
151 
          <div className="card-body">
 90 
      </Modal.Header>
152 
            <h3 className="card-title font-weight-bold">Crear sala de Chat</h3>
 91 
      <Modal.Body>
153 
            <div class="form-group">
 92 
        <div class="form-group">
154 
              <label for="search-people">Direccion de email</label>
 93 
          <label for="search-people">Direccion de email</label>
155 
              <input
 94 
          <input
156 
                type="email"
 - 
 
157 
                className="form-control"
 95 
            type="email"
158 
                id="search-people"
 96 
            className="form-control"
159 
                aria-describedby="Buscador de personas"
 97 
            aria-describedby="Buscador de personas"
160 
                placeholder="Escribe el nombre de la persona"
 - 
 
161 
                onChange={handleChange}
 - 
 
162 
              />
 - 
 
163 
            </div>
 - 
 
164 
            <div className="container">
 - 
 
165 
              {inmailPersons.map((element) => {
 - 
 
166 
                return (
 - 
 
167 
                  <div className="row" key={element.value}>
 - 
 
168 
                    <div className="col-8">
 - 
 
169 
                      <p> {element.text} </p>
 - 
 
170 
                    </div>
 - 
 
171 
                    <div className="col-4">
 - 
 
172 
                      <button
 - 
 
173 
                        className="btn btn-primary"
 - 
 
174 
                        onClick={() => handleInmailPerson(element.value)}
 - 
 
175 
                      >
 - 
 
176 
                        <i className="fa fa-check" />
 - 
 
177 
                      </button>
 - 
 
178 
                    </div>
 - 
 
179 
                  </div>
 - 
 
180 
                );
 - 
 
181 
              })}
 - 
 
182 
            </div>
 - 
 
183 
            <a href="#" onClick={onClose} className="btn btn-danger">
 - 
 
184 
              Cerrar
 98 
            placeholder="Escribe el nombre de la persona"
185 
            </a>
 99 
            onChange={handleChange}
186 
          </div>
 - 
 
187 
        </div>
 - 
 
188 
      </Modal>
 100 
          />
189 
      <section className="messages-page">
 - 
 
190 
        <div className="messages-sec">
 - 
 
191 
          <div className="row">
 - 
 
192 
            <div className="col-lg-4 col-md-12 no-pdd">
 - 
 
193 
              <div className="chat_contacts">
 - 
 
194 
                <h2 className="chat-title">Personas y grupos</h2>
 101 
        </div>
195 
                <Sidebar
 - 
 
196 
                  onClick={(conversation) =>
 102 
        <div className="container">
197 
                    handleChangeConversation(conversation)
 - 
 
198 
                  }
 103 
          {inmailPersons.map((element) => {
199 
                  conversations={[...props.chatUsers, ...props.chatGroups]}
 - 
 
200 
                  selectedConversation={selectedConversation}
 - 
 
201 
                />
 - 
 
202 
              </div>
 104 
            return (
203 
            </div>
 - 
 
204 
            <div className="col-12 col-md-8">
 - 
 
205 
              {!!selectedConversation ? (
 - 
 
206 
                <Chat
 - 
 
207 
                  entity={selectedConversation}
 - 
 
208 
                  onCloseChat={handleCloseChat}
 - 
 
209 
                />
 - 
 
210 
              ) : (
 105 
              <div className="row" key={element.value}>
211 
                <div>
 106 
                <div className="col-8">
- 
 
 107 
                  <p> {element.text} </p>
- 
 
 108 
                </div>
- 
 
 109 
                <div className="col-4">
- 
 
 110 
                  <button
212 
                  <p>Seleccione un chat</p>
 111 
                    className="btn btn-primary"
- 
 
 112 
                    onClick={() => handleInmailPerson(element.value)}
- 
 
 113 
                  >
213 
                </div>
 114 
                    <i className="fa fa-check" />
214 
              )}
 115 
                  </button>
- 
 
 116 
                </div>
- 
 
 117 
              </div>
215 
            </div>
 118 
            );
- 
 
 119 
          })}
- 
 
 120 
        </div>
- 
 
 121 
      </Modal.Body>
- 
 
 122 
      <Modal.Footer>
216 
          </div>
 123 
        <button onClick={onClose} className="btn btn-secondary">
- 
 
 124 
          Cerrar
217 
        </div>
 125 
        </button>
218 
      </section>
 126 
      </Modal.Footer>
219 
    </>
 127 
    </Modal>
- 
 
 128 
  );
- 
 
 129 
};
- 
 
 130 
 
- 
 
 131 
DesktopChat.ChatModal = ChatModal;