From c3d262648d8303f324c841071de2e6448eb665b0 Mon Sep 17 00:00:00 2001 From: canove Date: Sat, 8 Aug 2020 17:35:42 -0300 Subject: [PATCH] improvement: remove ifinite scroll lib --- backend/src/controllers/MessageController.js | 5 +- frontend/package.json | 1 - frontend/src/components/MessagesList/index.js | 46 +++++++++++++------ frontend/src/components/Tickets/index.js | 16 ++++--- frontend/yarn.lock | 9 +--- 5 files changed, 45 insertions(+), 32 deletions(-) diff --git a/backend/src/controllers/MessageController.js b/backend/src/controllers/MessageController.js index 70a222a..10158b9 100644 --- a/backend/src/controllers/MessageController.js +++ b/backend/src/controllers/MessageController.js @@ -73,6 +73,8 @@ exports.index = async (req, res, next) => { order: [["createdAt", "DESC"]], }); + const count = await ticket.countMessages(); + const serializedMessages = ticketMessages.map(message => { return { ...message.dataValues, @@ -86,7 +88,8 @@ exports.index = async (req, res, next) => { return res.json({ messages: serializedMessages.reverse(), - ticket: ticket, + ticket, + count, }); }; diff --git a/frontend/package.json b/frontend/package.json index 459c388..1040025 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,7 +18,6 @@ "qrcode.react": "^1.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-infinite-scroll-reverse": "^1.0.3", "react-linkify": "^1.0.0-alpha", "react-modal-image": "^2.5.0", "react-router-dom": "^5.2.0", diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 84144a7..9be8d00 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -4,7 +4,6 @@ import { useParams, useHistory } from "react-router-dom"; import { toast } from "react-toastify"; import { isSameDay, parseISO, format } from "date-fns"; import openSocket from "socket.io-client"; -import InfiniteScrollReverse from "react-infinite-scroll-reverse"; import ModalImage from "react-modal-image"; import { makeStyles } from "@material-ui/core/styles"; @@ -99,6 +98,7 @@ const useStyles = makeStyles(theme => ({ flexDirection: "column", flexGrow: 1, padding: "20px 20px 20px 20px", + // scrollBehavior: "smooth", overflowY: "scroll", "&::-webkit-scrollbar": { width: "8px", @@ -233,8 +233,8 @@ const MessagesList = () => { const [contact, setContact] = useState({}); const [ticket, setTicket] = useState({}); const [messagesList, setMessagesList] = useState([]); - const [hasMore, setHasMore] = useState(false); - const [pageNumber, setPageNumber] = useState(0); + const [count, setCount] = useState(0); + const [pageNumber, setPageNumber] = useState(1); const [drawerOpen, setDrawerOpen] = useState(false); const lastMessageRef = useRef(); @@ -246,17 +246,18 @@ const MessagesList = () => { const delayDebounceFn = setTimeout(() => { const fetchMessages = async () => { try { - const res = await api.get("/messages/" + ticketId, { + const { data } = await api.get("/messages/" + ticketId, { params: { pageNumber }, }); - setContact(res.data.ticket.contact); - setTicket(res.data.ticket); + setContact(data.ticket.contact); + setTicket(data.ticket); setMessagesList(prevMessages => { - return [...res.data.messages, ...prevMessages]; + return [...data.messages, ...prevMessages]; }); - setHasMore(res.data.messages.length > 0); + setCount(data.count); + // setHasMore(res.data.messages.length > 0); setLoading(false); - if (pageNumber === 1 && res.data.messages.length > 1) { + if (pageNumber === 1 && data.messages.length > 1) { scrollToBottom(); } } catch (err) { @@ -414,6 +415,23 @@ const MessagesList = () => { } }; + const handleScroll = e => { + if (count === messagesList.length) return; + const { scrollTop } = e.currentTarget; + + if (scrollTop === 0) { + document.getElementById("messagesList").scrollTop = 50; + } + + if (loading) { + return; + } + + if (scrollTop < 50) { + loadMore(); + } + }; + const renderDailyTimestamps = (message, index) => { if (index === 0) { return ( @@ -593,15 +611,13 @@ const MessagesList = () => { )}
- {messagesList.length > 0 ? renderMessages() : []} - +
{loading ? (
diff --git a/frontend/src/components/Tickets/index.js b/frontend/src/components/Tickets/index.js index ed7d7a7..aa76001 100644 --- a/frontend/src/components/Tickets/index.js +++ b/frontend/src/components/Tickets/index.js @@ -162,7 +162,7 @@ const Tickets = () => { const userId = +localStorage.getItem("userId"); const { ticketId } = useParams(); const [tickets, setTickets] = useState([]); - const [loading, setLoading] = useState(); + const [loading, setLoading] = useState(false); const [searchParam, setSearchParam] = useState(""); const [tab, setTab] = useState("open"); const [newTicketModalOpen, setNewTicketModalOpen] = useState(false); @@ -338,7 +338,7 @@ const Tickets = () => { } }; - const handleChangeTab = (event, newValue) => { + const handleChangeTab = (e, newValue) => { setTab(newValue); }; @@ -482,11 +482,12 @@ const Tickets = () => { showAllTickets={showAllTickets} ticketId={ticketId} handleAcepptTicket={handleAcepptTicket} - noTicketsTitle="Tudo resolvido" - noTicketsMessage="Nenhum Ticket pendente" + noTicketsTitle="Tudo resolvido!" + noTicketsMessage="Nenhum ticket pendente." status="pending" userId={null} /> + {loading && } @@ -508,6 +509,7 @@ const Tickets = () => { status="closed" userId={null} /> + {loading && } @@ -526,12 +528,12 @@ const Tickets = () => { showAllTickets={showAllTickets} ticketId={ticketId} handleAcepptTicket={handleAcepptTicket} - noTicketsTitle="Nada encontrado" - noTicketsMessage="Tente buscar por outro termo" + noTicketsTitle="Nada encontrado!" + noTicketsMessage="Tente buscar por outro termo." status="all" /> + {loading && } - {loading && }