improvement: remove ifinite scroll lib

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,
 	});
 };
 

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",

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 = () => {
 					)}
 				</Card>
 				<div className={classes.messagesListWrapper}>
-					<InfiniteScrollReverse
+					<div
+						id="messagesList"
 						className={classes.messagesList}
-						hasMore={hasMore}
-						isLoading={loading}
-						loadMore={loadMore}
-						loadArea={10}
+						onScroll={handleScroll}
 					>
 						{messagesList.length > 0 ? renderMessages() : []}
-					</InfiniteScrollReverse>
+					</div>
 					<MessageInput />
 					{loading ? (
 						<div>

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 && <TicketsSkeleton />}
 					</List>
 				</Paper>
 			</TabPanel>
@@ -508,6 +509,7 @@ const Tickets = () => {
 							status="closed"
 							userId={null}
 						/>
+						{loading && <TicketsSkeleton />}
 					</List>
 				</Paper>
 			</TabPanel>
@@ -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 && <TicketsSkeleton />}
 					</List>
-					{loading && <TicketsSkeleton />}
 				</Paper>
 			</TabPanel>
 			<audio id="sound" preload="auto">

frontend/yarn.lock

@@ -9012,7 +9012,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9242,13 +9242,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-infinite-scroll-reverse@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/react-infinite-scroll-reverse/-/react-infinite-scroll-reverse-1.0.3.tgz#d581dff5e7d5fd264b267203cc8c0dc08d2f8e0c"
-  integrity sha512-sbACmGs42B06eVnsqlCh3z5Qs7/RepuFSEPc31ByrLDFXurhZYdVT4lCB/IvMugevIWwVIOsiN/Pr0JBfhm+IQ==
-  dependencies:
-    prop-types "15.7.2"
-
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"