Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 15833 Rev 15834
Línea -... Línea 1...
- 
 
 1 
import React, { useEffect, useRef, useState } from "react";
1 
import { axios } from "../../../utils";
 2 
import { axios } from "../../../utils";
2 
import React, { useEffect, useRef } from "react";
 - 
 
3 
import { useState } from "react";
 - 
 
4 
 
 - 
 
5 
import styles from "./chat.module.scss";
 - 
 
6 
import { useForm } from "react-hook-form";
 3 
import { useForm } from "react-hook-form";
- 
 
 4 
 
7 
import Emojione from "./emojione/Emojione";
 5 
import Emojione from "./emojione/Emojione";
8 
import FileModal from "./fileModal/FileModal";
 6 
import FileModal from "./fileModal/FileModal";
9 
import Messages from "./messages/Messages";
 7 
import Messages from "./messages/Messages";
- 
 
 8 
import AttachFileIcon from "@mui/icons-material/AttachFile";
- 
 
 9 
import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
- 
 
 10 
 
- 
 
 11 
import styles from "./chat.module.scss";
Línea 10... Línea 12...
10 
 
 12 
 
11 
const permittedFiles =
 13 
const permittedFiles =
Línea 12... Línea 14...
12 
  "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
 14 
  "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
13 
 
 - 
 
14 
const Chat = (props) => {
 - 
 
15 
  // props destructuring
 - 
 
16 
  const {
 - 
 
17 
    url_get_all_messages,
 - 
 
18 
    url_send,
 - 
 
19 
    url_upload,
 - 
 
20 
    url_close,
 - 
 
21 
    url_mark_seen,
 - 
 
22 
    type,
 - 
 
23 
  } = props.entity;
 - 
 
24 
 
 - 
 
25 
  // react hook form
 - 
 
26 
  const { handleSubmit, register } = useForm();
 - 
 
27 
 
 15 
 
28 
  // states
 16 
const Chat = ({ entity }) => {
29 
  const [messages, setMessages] = useState([]);
 17 
  const [messages, setMessages] = useState([]);
30 
  const [newMessages, setNewMessages] = useState([]);
 18 
  const [newMessages, setNewMessages] = useState([]);
31 
  const [showEmojione, setShowEmojione] = useState(false);
 19 
  const [showEmojione, setShowEmojione] = useState(false);
32 
  const [selectedFile, setSelectedFile] = useState("");
 20 
  const [selectedFile, setSelectedFile] = useState("");
33 
  const [pages, setPages] = useState(1);
 21 
  const [pages, setPages] = useState(1);
- 
 
 22 
  const [currentPage, setCurrentPage] = useState(1);
- 
 
 23 
  const [oldMessages, setOldMessages] = useState([]);
- 
 
 24 
  const [urlSearch, setUrlSearch] = useState("");
Línea 34... Línea -...
34 
  const [currentPage, setCurrentPage] = useState(1);
 - 
 
35 
  const [oldMessages, setOldMessages] = useState([]);
 25 
 
36 
 
 26 
  const { handleSubmit, register } = useForm();
37 
  // refs
 27 
 
38 
  const bottomToScroll = useRef(null);
 28 
  const bottomToScroll = useRef(null);
39 
  const inputTextEl = useRef(null);
 29 
  const inputTextEl = useRef(null);
- 
 
 30 
  const fileInputEl = useRef(null);
- 
 
 31 
  const loadMoreEl = useRef();
40 
  const fileInputEl = useRef(null);
 32 
  const divToScroll = useRef(null);
- 
 
 33 
 
- 
 
 34 
  const {
- 
 
 35 
    url_get_all_messages,
- 
 
 36 
    url_send,
- 
 
 37 
    url_upload,
- 
 
 38 
    url_close,
- 
 
 39 
    url_mark_seen,
41 
  const loadMoreEl = useRef();
 40 
    type,
Línea 42... Línea -...
42 
  const divToScroll = useRef(null);
 - 
 
43 
  const [urlSearch, setUrlSearch] = useState(url_get_all_messages || "");
 41 
  } = entity;
44 
  let heartBeatInterval;
 - 
 
45 
 
 42 
 
46 
  // useEffects
 43 
  let heartBeatInterval;
47 
  useEffect(() => {
 44 
 
48 
    /* setInterval */
 45 
  useEffect(() => {
49 
    clearInterval(heartBeatInterval);
 46 
    clearInterval(heartBeatInterval);
Línea 78... Línea 75...
78 
  useEffect(async () => {
 75 
  useEffect(async () => {
79 
    const resData = (await axios.post(url_mark_seen)).data;
 76 
    const resData = (await axios.post(url_mark_seen)).data;
80 
    resData;
 77 
    resData;
81 
  }, []);
 78 
  }, []);
Línea 82... Línea -...
82 
 
 - 
 
83 
  // useEffect(() => {
 - 
 
84 
  //   shouldScrollToBottom.current = true;
 - 
 
85 
  // }, [newMessages]);
 - 
 
86 
 
 - 
 
87 
  // useEffect(() => {
 - 
 
88 
  //   setMessages([...oldMessages, ...newMessages]);
 - 
 
89 
  //    ("before scroll");
 - 
 
90 
  // }, [newMessages, oldMessages]);
 - 
 
91 
 
 - 
 
92 
  // useEffect(() => {
 - 
 
93 
  //   if (shouldScrollToBottom.current) {
 - 
 
94 
  //     scrollToBottom();
 - 
 
95 
  //     shouldScrollToBottom.current = false;
 - 
 
96 
  //   }
 - 
 
97 
  // }, [shouldScrollToBottom.current]);
 - 
 
98 
 
 79 
 
99 
  // heartbeat function
 80 
  // heartbeat function
100 
  const chatHeartbeat = async () => {
 81 
  const chatHeartbeat = async () => {
101 
    axios.get(url_get_all_messages).then((response) => {
 82 
    axios.get(url_get_all_messages).then((response) => {
102 
      const resData = response.data;
 83 
      const resData = response.data;
Línea 213... Línea 194...
213 
  return (
 194 
  return (
214 
    <div className={styles.chat}>
 195 
    <div className={styles.chat}>
215 
      <div className={styles.messagesContainer} ref={bottomToScroll}>
 196 
      <div className={styles.messagesContainer} ref={bottomToScroll}>
216 
        <div className={styles.messageWrapper}>
 197 
        <div className={styles.messageWrapper}>
217 
          {currentPage < pages && (
 198 
          {currentPage < pages && (
218 
            <p ref={loadMoreEl} style={{ marginTop: ".5rem" }}>
 199 
            <p ref={loadMoreEl} className="mt-2">
219 
              Cargando...
 200 
              Cargando...
220 
            </p>
 201 
            </p>
221 
          )}
 202 
          )}
222 
          <Messages
 203 
          <Messages
223 
            oldMessages={oldMessages}
 204 
            oldMessages={oldMessages}