From 645489ace6b5ff9b6f0762ebd08f9a20b3522617 Mon Sep 17 00:00:00 2001 From: canove Date: Tue, 18 Aug 2020 14:57:58 -0300 Subject: [PATCH] improvement: moved hasMore logic to backend --- backend/src/controllers/MessageController.js | 9 +++-- backend/src/controllers/TicketController.js | 8 ++-- frontend/src/components/MessagesList/index.js | 8 ++-- frontend/src/components/Tickets/index.js | 40 +++++++++---------- 4 files changed, 36 insertions(+), 29 deletions(-) diff --git a/backend/src/controllers/MessageController.js b/backend/src/controllers/MessageController.js index 00e33d7..ea494f4 100644 --- a/backend/src/controllers/MessageController.js +++ b/backend/src/controllers/MessageController.js @@ -46,8 +46,8 @@ exports.index = async (req, res, next) => { ), }; - let limit = 20; - let offset = limit * (pageNumber - 1); + const limit = 20; + const offset = limit * (pageNumber - 1); const ticket = await Ticket.findByPk(ticketId, { include: [ @@ -90,10 +90,13 @@ exports.index = async (req, res, next) => { }; }); + const hasMore = count > offset + ticketMessages.length; + return res.json({ messages: serializedMessages.reverse(), ticket, count, + hasMore, }); }; @@ -163,5 +166,5 @@ exports.store = async (req, res, next) => { await setMessagesAsRead(ticket); - return res.json({ message: "Mensagem enviada", newMessage, ticket }); + return res.json({ newMessage, ticket }); }; diff --git a/backend/src/controllers/TicketController.js b/backend/src/controllers/TicketController.js index 4339940..d707a77 100644 --- a/backend/src/controllers/TicketController.js +++ b/backend/src/controllers/TicketController.js @@ -15,8 +15,8 @@ exports.index = async (req, res) => { searchParam = "", } = req.query; - let limit = 20; - let offset = limit * (pageNumber - 1); + const limit = 20; + const offset = limit * (pageNumber - 1); let whereCondition = {}; let includeCondition = [ @@ -96,7 +96,9 @@ exports.index = async (req, res) => { order: [["updatedAt", "DESC"]], }); - return res.json({ count, tickets }); + const hasMore = count > offset + tickets.length; + + return res.json({ count, tickets, hasMore }); }; exports.store = async (req, res) => { diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 02dc59f..80502fa 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -233,7 +233,7 @@ const MessagesList = () => { const [contact, setContact] = useState({}); const [ticket, setTicket] = useState({}); const [messagesList, setMessagesList] = useState([]); - const [count, setCount] = useState(0); + const [hasMore, setHasMore] = useState(false); const [pageNumber, setPageNumber] = useState(1); const [drawerOpen, setDrawerOpen] = useState(false); const lastMessageRef = useRef(); @@ -259,7 +259,7 @@ const MessagesList = () => { setMessagesList(prevMessages => { return [...data.messages, ...prevMessages]; }); - setCount(data.count); + setHasMore(data.hasMore); setLoading(false); if (pageNumber === 1 && data.messages.length > 1) { scrollToBottom(); @@ -339,7 +339,7 @@ const MessagesList = () => { }; const handleScroll = e => { - if (count === messagesList.length) return; + if (!hasMore) return; const { scrollTop } = e.currentTarget; if (scrollTop === 0) { @@ -355,6 +355,8 @@ const MessagesList = () => { } }; + console.log(messagesList); + const checkMessaageMedia = message => { if (message.mediaType === "image") { return ( diff --git a/frontend/src/components/Tickets/index.js b/frontend/src/components/Tickets/index.js index fbba430..4d090ee 100644 --- a/frontend/src/components/Tickets/index.js +++ b/frontend/src/components/Tickets/index.js @@ -170,7 +170,7 @@ const Tickets = () => { const [showAllTickets, setShowAllTickets] = useState(false); const [pageNumber, setPageNumber] = useState(1); - const [count, setCount] = useState(0); + const [hasMore, setHasMore] = useState(false); useEffect(() => { if (!("Notification" in window)) { @@ -193,17 +193,17 @@ const Tickets = () => { const { data } = await api.get("/tickets", { params: { searchParam, pageNumber, status: tab }, }); - setTickets(prevState => { - return [...prevState, ...data.tickets]; + data.tickets.forEach(ticket => { + updateTickets(ticket); }); - setCount(data.count); + setHasMore(data.hasMore); setLoading(false); } catch (err) { console.log(err); } }; fetchTickets(); - }, 1000); + }, 500); return () => clearTimeout(delayDebounceFn); }, [searchParam, pageNumber, token, tab]); @@ -212,14 +212,13 @@ const Tickets = () => { socket.emit("joinNotification"); socket.on("ticket", data => { - if (loading) return; - if (data.action === "updateUnread") { resetUnreadMessages(data); } if (data.action === "updateStatus" || data.action === "create") { - updateTickets(data); + console.log("WSS TICKET"); + updateTickets(data.ticket); } if (data.action === "delete") { @@ -232,10 +231,9 @@ const Tickets = () => { }); socket.on("appMessage", data => { - if (loading) return; - if (data.action === "create") { - updateTickets(data); + console.log("WSS MSG"); + updateTickets(data.ticket); if ( (ticketId && data.message.ticketId === +ticketId && @@ -250,22 +248,24 @@ const Tickets = () => { return () => { socket.disconnect(); }; - }, [history, ticketId, userId, loading]); + }, [history, ticketId, userId]); const loadMore = () => { setPageNumber(prevState => prevState + 1); }; - const updateTickets = ({ ticket }) => { + const updateTickets = ticket => { setTickets(prevState => { const ticketIndex = prevState.findIndex(t => t.id === ticket.id); if (ticketIndex !== -1) { - let aux = [...prevState]; + const aux = [...prevState]; aux[ticketIndex] = ticket; - aux.unshift(aux.splice(ticketIndex, 1)[0]); + if (ticket.unreadMessages > 0) { + aux.unshift(aux.splice(ticketIndex, 1)[0]); + } return aux; } else { - return [ticket, ...prevState]; + return [...prevState, ticket]; } }); }; @@ -274,12 +274,12 @@ const Tickets = () => { setTickets(prevState => { const ticketIndex = prevState.findIndex(ticket => ticket.id === ticketId); - if (ticketIndex === -1) { - return prevState; - } else { + if (ticketIndex !== -1) { let aux = [...prevState]; aux.splice(ticketIndex, 1); return aux; + } else { + return prevState; } }); }; @@ -338,7 +338,7 @@ const Tickets = () => { }; const handleScroll = e => { - if (count === tickets.length || loading) return; + if (!hasMore || loading) return; const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; if (scrollHeight - (scrollTop + 100) < clientHeight) {