Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 15836 Rev 15839
Línea 13... Línea 13...
13 
 
 13 
 
14 
const permittedFiles =
 14 
const permittedFiles =
Línea 15... Línea 15...
15 
  "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
 15 
  "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
16 
 
 16 
 
17 
const Chat = ({ entity }) => {
 17 
const Chat = ({ entity }) => {
- 
 
 18 
  const [oldMessages, setOldMessages] = useState([]);
- 
 
 19 
  const [messages, setmessages] = useState([]);
- 
 
 20 
  const [totalPages, setTotalPages] = useState(1);
- 
 
 21 
  const [currentPage, setCurrentPage] = useState(1);
18 
  const [messages, setMessages] = useState([]);
 22 
  const [loading, setLoading] = useState(false);
19 
  const [newMessages, setNewMessages] = useState([]);
 23 
 
20 
  const [showEmojione, setShowEmojione] = useState(false);
 - 
 
21 
  const [selectedFile, setSelectedFile] = useState("");
 - 
 
22 
  const [pages, setPages] = useState(1);
 - 
 
23 
  const [currentPage, setCurrentPage] = useState(1);
 - 
 
Línea 24... Línea 24...
24 
  const [oldMessages, setOldMessages] = useState([]);
 24 
  const [showEmojione, setShowEmojione] = useState(false);
Línea 25... Línea 25...
25 
  const [urlSearch, setUrlSearch] = useState("");
 25 
  const [selectedFile, setSelectedFile] = useState("");
26 
 
 26 
 
Línea 39... Línea 39...
39 
    url_close,
 39 
    url_close,
40 
    url_mark_seen,
 40 
    url_mark_seen,
41 
    type,
 41 
    type,
42 
  } = entity;
 42 
  } = entity;
Línea 43... Línea -...
43 
 
 - 
 
44 
  let heartBeatInterval;
 - 
 
45 
 
 43 
 
46 
  useEffect(() => {
 44 
  useEffect(() => {
47 
    clearInterval(heartBeatInterval);
 45 
    let timeInterval;
48 
    heartBeatInterval = setInterval(() => {
 46 
    if (loading) return;
49 
      chatHeartbeat();
 47 
    timeInterval = setTimeout(() => chatHeartbeat(), 2000);
50 
    }, 800);
 48 
 
51 
    return () => {
 49 
    return () => {
52 
      clearInterval(heartBeatInterval);
 50 
      clearTimeout(timeInterval);
53 
    };
 51 
    };
Línea 54... Línea 52...
54 
  }, [newMessages, oldMessages]);
 52 
  }, [loading, entity]);
55 
 
 53 
 
56 
  // infiniteScroll
 54 
  // infiniteScroll
57 
  useEffect(() => {
 55 
  useEffect(() => {
Línea 65... Línea 63...
65 
      observer.observe(loadMoreEl.current);
 63 
      observer.observe(loadMoreEl.current);
66 
    }
 64 
    }
67 
    return () => {
 65 
    return () => {
68 
      observer.disconnect();
 66 
      observer.disconnect();
69 
    };
 67 
    };
70 
  }, [pages]);
 68 
  }, [totalPages]);
Línea 71... Línea 69...
71 
 
 69 
 
72 
  useEffect(() => {
 70 
  useEffect(() => {
73 
    loadOldMessages();
 71 
    loadOldMessages();
Línea 74... Línea 72...
74 
  }, [currentPage]);
 72 
  }, [currentPage]);
75 
 
 73 
 
76 
  useEffect(async () => {
 - 
 
77 
    const resData = (await axios.post(url_mark_seen)).data;
 74 
  useEffect(() => {
Línea 78... Línea 75...
78 
    resData;
 75 
    axios.post(url_mark_seen);
79 
  }, []);
 76 
  }, []);
80 
 
 - 
 
81 
  // heartbeat function
 - 
 
82 
  const chatHeartbeat = async () => {
 - 
 
83 
    axios.get(url_get_all_messages).then((response) => {
 77 
 
84 
      const resData = response.data;
 - 
 
85 
      const isNewProp = url_get_all_messages !== urlSearch;
 - 
 
86 
      if (resData.success) {
 - 
 
87 
        const updatedNewMessages = resData.data.items.slice();
 - 
 
88 
        let newNewMessages = [];
 - 
 
89 
        updatedNewMessages.map((updatedNewMessage) => {
 78 
  // heartbeat function
90 
          const existInNewMessages = newMessages.findIndex(
 79 
  const chatHeartbeat = () => {
91 
            (newMessage) => newMessage.id === updatedNewMessage.id
 80 
    setLoading(true);
92 
          );
 81 
    axios
93 
          if (existInNewMessages === -1) {
 - 
 
94 
            newNewMessages = [updatedNewMessage, ...newNewMessages];
 82 
      .get(url_get_all_messages)
95 
            setPages(resData.data.pages);
 83 
      .then(({ data: response }) => {
96 
          }
 84 
        const { data, success } = response;
97 
        });
 85 
 
- 
 
 86 
        if (!success) {
- 
 
 87 
          return console.log("Ha ocurrido un error");
- 
 
 88 
        }
- 
 
 89 
 
- 
 
 90 
        const messageResponse = [...data.items].reverse();
- 
 
 91 
        const updatedMessages = messageResponse.reduce(
- 
 
 92 
          (acum, updatedMessage) => {
- 
 
 93 
            if (
- 
 
 94 
              messages.findIndex(
- 
 
 95 
                (message) => message.id === updatedMessage.id
- 
 
 96 
              ) === -1
- 
 
 97 
            ) {
- 
 
 98 
              acum = [...acum, updatedMessage];
- 
 
 99 
            }
- 
 
 100 
            return acum;
- 
 
 101 
          },
- 
 
 102 
          []
- 
 
 103 
        );
- 
 
 104 
 
- 
 
 105 
        if (updatedMessages.length > 0) {
98 
        if (newNewMessages.length > 0) {
 106 
          setmessages([...messages, ...updatedMessages]);
99 
          setNewMessages((prevState) => [...prevState, ...newNewMessages]);
 107 
          setTotalPages(data.pages);
- 
 
 108 
          scrollToBottom();
100 
        }
 109 
        }
Línea 101... Línea 110...
101 
      }
 110 
      })
102 
    });
 111 
      .finally(() => setLoading(false));
103 
  };
 - 
 
104 
 
 - 
 
105 
  // utilsFunctions
 112 
  };
106 
  const scrollToBottom = () => {
 113 
 
107 
    ("scrolled");
 114 
  // utilsFunctions
Línea 108... Línea 115...
108 
    const element = bottomToScroll.current;
 115 
  const scrollToBottom = () => {
Línea 136... Línea 143...
136 
  };
 143 
  };
Línea 137... Línea 144...
137 
 
 144 
 
138 
  const handleObserver = async (entities) => {
 145 
  const handleObserver = async (entities) => {
139 
    const target = entities[0];
 146 
    const target = entities[0];
140 
    if (target.isIntersecting) {
 147 
    if (target.isIntersecting) {
141 
      if (currentPage < pages) {
 148 
      if (currentPage < totalPages) {
142 
        setCurrentPage((prevState) => prevState + 1);
 149 
        setCurrentPage((prevState) => prevState + 1);
143 
        bottomToScroll.current.scrollBy(0, 200);
 150 
        bottomToScroll.current.scrollBy(0, 200);
144 
      }
 151 
      }
145 
    }
 152 
    }
Línea 146... Línea 153...
146 
  };
 153 
  };
147 
 
 154 
 
148 
  const loadOldMessages = async () => {
 155 
  const loadOldMessages = async () => {
149 
    if (currentPage < pages && currentPage > 1) {
 156 
    if (currentPage < totalPages && currentPage > 1) {
150 
    }
 157 
    }
151 
    await axios
 158 
    await axios
152 
      .get(url_get_all_messages, {
 159 
      .get(url_get_all_messages, {
Línea 194... Línea 201...
194 
 
 201 
 
195 
  return (
 202 
  return (
196 
    <div className={styles.chat}>
 203 
    <div className={styles.chat}>
197 
      <div className={styles.messagesContainer} ref={bottomToScroll}>
 204 
      <div className={styles.messagesContainer} ref={bottomToScroll}>
198 
        <div className={styles.messageWrapper}>
 205 
        <div className={styles.messageWrapper}>
199 
          {currentPage < pages && (
 206 
          {currentPage < totalPages && (
200 
            <p ref={loadMoreEl} className="mt-2">
 207 
            <p ref={loadMoreEl} className="mt-2">
201 
              Cargando...
 208 
              Cargando...
202 
            </p>
 209 
            </p>
203 
          )}
 210 
          )}
204 
          <Messages
 211 
          <Messages
205 
            oldMessages={oldMessages}
 212 
            oldMessages={oldMessages}
206 
            newMessages={newMessages}
 213 
            messages={messages}
207 
            onScrollToBottom={scrollToBottom}
 214 
            onScrollToBottom={scrollToBottom}
208 
            chatType={type}
 215 
            chatType={type}
209 
          />
 216 
          />
210 
          <div ref={divToScroll}></div>
 217 
          <div ref={divToScroll}></div>