From 2169e2b6e82618b33867dc7482917fe9cbf87a96 Mon Sep 17 00:00:00 2001 From: Cassio Santos Date: Wed, 3 Jun 2020 15:17:23 -0300 Subject: [PATCH] before remove infinity scrol --- backend/controllers/message.js | 23 +++- backend/controllers/session.json | 2 +- .../MessageSearch/useMessageSerach.js | 51 ++++++--- frontend/src/pages/ChatBox/ChatBox.js | 108 ++++++++++++------ 4 files changed, 126 insertions(+), 58 deletions(-) diff --git a/backend/controllers/message.js b/backend/controllers/message.js index fac431b..2429696 100644 --- a/backend/controllers/message.js +++ b/backend/controllers/message.js @@ -3,6 +3,7 @@ const Message = require("../models/Message"); const Contact = require("../models/Contact"); const { getIO } = require("../socket"); const { getWbot } = require("./wbot"); +const sequelize = require("sequelize"); const { MessageMedia } = require("whatsapp-web.js"); @@ -35,10 +36,20 @@ exports.getContactMessages = async (req, res, next) => { const io = getIO(); const { contactId } = req.params; - const { search, page = 1 } = req.query; + const { searchParam, pageNumber = 1 } = req.query; - let limit = 5; - let offset = limit * (page - 1); + const lowerSerachParam = searchParam.toLowerCase(); + + const whereCondition = { + messageBody: sequelize.where( + sequelize.fn("LOWER", sequelize.col("messageBody")), + "LIKE", + "%" + lowerSerachParam + "%" + ), + }; + + let limit = 10; + let offset = limit * (pageNumber - 1); try { const contact = await Contact.findByPk(contactId); @@ -50,13 +61,17 @@ exports.getContactMessages = async (req, res, next) => { setMessagesAsRead(contactId); + const messagesFound = await contact.countMessages({ + where: whereCondition, + }); const contactMessages = await contact.getMessages({ + where: whereCondition, limit, offset, order: [["createdAt", "DESC"]], }); - return res.json(contactMessages.reverse()); + return res.json({ messages: contactMessages.reverse(), messagesFound }); } catch (err) { next(err); } diff --git a/backend/controllers/session.json b/backend/controllers/session.json index 38138e9..2fd99be 100644 --- a/backend/controllers/session.json +++ b/backend/controllers/session.json @@ -1 +1 @@ -{"WABrowserId":"\"W5pw0Llb60mSeV7WOHnk8A==\"","WASecretBundle":"{\"key\":\"alDLbPjonDFzCh5PEPql9cy59LNh1HFG/AZJVoucuYI=\",\"encKey\":\"FQ1MZ2eIH9hKV4dqFoBYTv1/89aopcMAa4CXgh/9csM=\",\"macKey\":\"alDLbPjonDFzCh5PEPql9cy59LNh1HFG/AZJVoucuYI=\"}","WAToken1":"\"GvHbBS6HkZD8f5nYpOxt5qsna4XaDx3JPsjoxwKiM6g=\"","WAToken2":"\"1@P1h9eDyW0m0ILzNfgs6sEF35E66OndfdlOjm3oYzeV13cg82FjBbRvhsma9+p5+/R7zjMUv6L+l/gg==\""} \ No newline at end of file +{"WABrowserId":"\"W5pw0Llb60mSeV7WOHnk8A==\"","WASecretBundle":"{\"key\":\"alDLbPjonDFzCh5PEPql9cy59LNh1HFG/AZJVoucuYI=\",\"encKey\":\"FQ1MZ2eIH9hKV4dqFoBYTv1/89aopcMAa4CXgh/9csM=\",\"macKey\":\"alDLbPjonDFzCh5PEPql9cy59LNh1HFG/AZJVoucuYI=\"}","WAToken1":"\"SNPReadfNoQL/i4IzN6BWtMxFsAkB5S1rvYwNsEywWs=\"","WAToken2":"\"1@6K32SNdV0LtNeieRuXYWmwUaGMsC18JBxEIlraW3rBgxeZ4DbiD2WtYs1Ekv/QO5RDPieBfHuWzZPw==\""} \ No newline at end of file diff --git a/frontend/src/components/MessageSearch/useMessageSerach.js b/frontend/src/components/MessageSearch/useMessageSerach.js index aa44e04..988c01e 100644 --- a/frontend/src/components/MessageSearch/useMessageSerach.js +++ b/frontend/src/components/MessageSearch/useMessageSerach.js @@ -1,22 +1,43 @@ import { useEffect, useState } from "react"; import api from "../../util/api"; -const useMessageSerach = (query, pageNumber) => { - useEffect(() => { - const fetchMessages = async () => { - try { - const res = await api.get("/messages/" + contactId, { - headers: { Authorization: "Bearer " + token }, - params: { serach: query, page: pageNumber }, - }); - setListMessages(res.data); - } catch (err) { - alert(err); - } - }; - }, [query, pageNumber]); +const useMessageSerach = (query, pageNumber, token, contactId) => { + const [loading, setLoading] = useState(true); + const [error, setError] = useState(false); + const [listMessages, setListMessages] = useState([]); + const [hasMore, setHasMore] = useState(false); - return null; + useEffect(() => setListMessages([]), [contactId, query]); + + useEffect(() => { + console.log(pageNumber); + setLoading(true); + setError(false); + const delayDebounceFn = setTimeout(() => { + console.log(query); + const fetchMessages = async () => { + try { + const res = await api.get("/messages/" + contactId, { + headers: { Authorization: "Bearer " + token }, + params: { searchParam: query, pageNumber: pageNumber }, + }); + setListMessages(prevMessages => { + return [...res.data.messages, ...prevMessages]; + }); + setHasMore(res.data.messages.length > 0); + setLoading(false); + console.log(res.data); + } catch (err) { + console.log(err); + setError(true); + } + }; + fetchMessages(); + }, 1000); + return () => clearTimeout(delayDebounceFn); + }, [query, pageNumber, contactId, token]); + + return { loading, error, listMessages, hasMore, setListMessages }; }; export default useMessageSerach; diff --git a/frontend/src/pages/ChatBox/ChatBox.js b/frontend/src/pages/ChatBox/ChatBox.js index 580d546..43dc952 100644 --- a/frontend/src/pages/ChatBox/ChatBox.js +++ b/frontend/src/pages/ChatBox/ChatBox.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from "react"; +import React, { useState, useEffect, useRef, useCallback } from "react"; // import { Card } from "react-bootstrap"; alterei pra DIV, remover caso não dê problemas import { FiPaperclip, FiSend, FiX, FiSmile } from "react-icons/fi"; import { RiSendPlane2Line } from "react-icons/ri"; @@ -18,6 +18,7 @@ import ScrollToBottom from "react-scroll-to-bottom"; import "react-toastify/dist/ReactToastify.css"; import "./ChatBox.css"; +import useMessageSerach from "../../components/MessageSearch/useMessageSerach"; // const executeScroll = myRef => // myRef.current.scrollIntoView({ @@ -28,47 +29,49 @@ import "./ChatBox.css"; const ChatBox = ({ currentPeerContact }) => { const SERVER_URL = "http://localhost:8080/"; const contactId = currentPeerContact.id; - const unreadMessages = currentPeerContact.messages; + const userId = localStorage.getItem("userId"); const username = localStorage.getItem("username"); const token = localStorage.getItem("token"); - const mediaInitialState = { preview: "", raw: "", name: "" }; - // const [isLoading, setIsLoading] = useState(true); - const [listMessages, setListMessages] = useState([]); + const mediaInitialState = { preview: "", raw: "", name: "" }; + const [inputMessage, setInputMessage] = useState(""); const [media, setMedia] = useState(mediaInitialState); const [showEmoji, setShowEmoji] = useState(false); + const [query, setQuery] = useState(""); + const [pageNumber, setPageNumber] = useState(1); + + const { + listMessages, + setListMessages, + hasMore, + loading, + error, + } = useMessageSerach(query, pageNumber, token, contactId); + + const scrollPosition = useRef(); + const observer = useRef(); + const firstMessageRef = useCallback( + node => { + if (observer.current) observer.current.disconnect(); + observer.current = new IntersectionObserver(entries => { + if (entries[0].isIntersecting && hasMore) { + console.log("Visible"); + setPageNumber(prevPageNumber => prevPageNumber + 1); + } + }); + if (node) observer.current.observe(node); + }, + [loading, hasMore] + ); + // let lastMessageRef = useRef(); // useEffect(() => { // executeScroll(lastMessageRef); - // }, [isLoading]); - - useEffect(() => { - const fetchMessages = async () => { - // setIsLoading(true); - try { - const res = await api.get("/messages/" + contactId, { - headers: { Authorization: "Bearer " + token }, - params: { page: 3 }, - }); - setListMessages(res.data); - // setIsLoading(false); - } catch (err) { - alert(err); - } - }; - - fetchMessages(); - - return () => { - setInputMessage(""); - setShowEmoji(false); - setMedia({}); - }; - }, [contactId, unreadMessages, token]); + // }, [loading]); useEffect(() => { const socket = openSocket(SERVER_URL); @@ -87,13 +90,17 @@ const ChatBox = ({ currentPeerContact }) => { return () => { socket.disconnect(); + setInputMessage(""); + setQuery(""); + setShowEmoji(false); + setPageNumber(1); + setMedia({}); }; }, [contactId]); const updateMessageAck = message => { let id = message.id; setListMessages(prevState => { - console.log("mudando o ack da mensagem"); let aux = [...prevState]; let messageIndex = aux.findIndex(message => message.id === id); aux[messageIndex].ack = message.ack; @@ -172,7 +179,10 @@ const ChatBox = ({ currentPeerContact }) => { setShowEmoji(false); }; - console.log(listMessages); + const handleSearch = e => { + setQuery(e.target.value); + setPageNumber(1); + }; const renderMsgAck = message => { //todo remove timestamp logic from main return and adopt moment to timestamps @@ -353,6 +363,24 @@ const ChatBox = ({ currentPeerContact }) => { ); + } else if (index === 3) { + viewListMessages.push( +
+
+ {message.messageBody} + + {moment(message.createdAt) + .tz("America/Sao_Paulo") + .format("HH:mm")}{" "} + {renderMsgAck(message)} + +
+
+ ); } else { viewListMessages.push(
@@ -394,13 +422,17 @@ const ChatBox = ({ currentPeerContact }) => {
Status do contato
-
- -
- {renderMessages()} - {/*
*/} +
+
- +
+ {/* */} +
+ {renderMessages()} + + {/*
Last Message
*/} +
+ {/* */} {media.preview ? (