improvement: use handleScroll instead lib to infinite scroll

frontend/package.json

@@ -19,7 +19,6 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-infinite-scroll-reverse": "^1.0.3",
-    "react-infinite-scroller": "^1.2.4",
     "react-linkify": "^1.0.0-alpha",
     "react-modal-image": "^2.5.0",
     "react-router-dom": "^5.2.0",

frontend/src/components/Tickets/index.js

@@ -3,7 +3,6 @@ import { useHistory, useParams } from "react-router-dom";
 import openSocket from "socket.io-client";
 import { format } from "date-fns";
 import { toast } from "react-toastify";
-import InfiniteScroll from "react-infinite-scroller";
 
 import { makeStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
@@ -27,7 +26,7 @@ import TabPanel from "../TabPanel";
 import api from "../../services/api";
 
 const useStyles = makeStyles(theme => ({
-	contactsWrapper: {
+	ticketsWrapper: {
 		position: "relative",
 		display: "flex",
 		height: "100%",
@@ -330,6 +329,15 @@ const Tickets = () => {
 		setTab("search");
 	};
 
+	const handleScroll = e => {
+		if (count === tickets.length || loading) return;
+		const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+
+		if (scrollHeight - (scrollTop + 100) < clientHeight) {
+			loadMore();
+		}
+	};
+
 	const handleChangeTab = (event, newValue) => {
 		setTab(newValue);
 	};
@@ -357,38 +365,8 @@ const Tickets = () => {
 		return ticketsFound;
 	};
 
-	const CustomInfiniteScroll = ({ children, loadingKey }) => {
-		return (
-			<InfiniteScroll
-				pageStart={0}
-				loadMore={() => !loading && loadMore()}
-				hasMore={count > tickets.length}
-				useWindow={false}
-				initialLoad={false}
-				threshold={100}
-				loader={<TicketsSkeleton key={loadingKey} />}
-			>
-				<List style={{ paddingTop: 0 }}>{children}</List>
-			</InfiniteScroll>
-		);
-	};
-
-	const CustomTicketList = ({ ...rest }) => {
-		return (
-			<TicketsList
-				tickets={tickets}
-				loading={loading}
-				handleSelectTicket={handleSelectTicket}
-				showAllTickets={showAllTickets}
-				ticketId={ticketId}
-				handleAcepptTicket={handleAcepptTicket}
-				{...rest}
-			/>
-		);
-	};
-
 	return (
-		<Paper elevation={0} variant="outlined" className={classes.contactsWrapper}>
+		<Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
 			<NewTicketModal
 				modalOpen={newTicketModalOpen}
 				onClose={e => setNewTicketModalOpen(false)}
@@ -433,8 +411,13 @@ const Tickets = () => {
 					/>
 				</div>
 			</Paper>
-			<TabPanel value={tab} name={"open"} className={classes.contactsWrapper}>
+			<TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
-				<Paper square elevation={0} className={classes.halfTicketsList}>
+				<Paper
+					square
+					elevation={0}
+					className={classes.halfTicketsList}
+					onScroll={handleScroll}
+				>
 					<div className={classes.ticketsListHeader}>
 						Atendendo
 						<span className={classes.ticketsCount}>
@@ -464,19 +447,27 @@ const Tickets = () => {
 						</div>
 					</div>
 					<List style={{ paddingTop: 0 }}>
-						{loading ? (
+						<TicketsList
-							<TicketsSkeleton />
+							tickets={tickets}
-						) : (
+							loading={loading}
-							<CustomTicketList
+							handleSelectTicket={handleSelectTicket}
-								noTicketsTitle="Pronto pra mais?"
+							showAllTickets={showAllTickets}
-								noTicketsMessage="Aceite um ticket da fila para começar."
+							ticketId={ticketId}
-								status="open"
+							handleAcepptTicket={handleAcepptTicket}
-								userId={userId}
+							noTicketsTitle="Pronto pra mais?"
-							/>
+							noTicketsMessage="Aceite um ticket da fila para começar."
-						)}
+							status="open"
+							userId={userId}
+						/>
+						{loading && <TicketsSkeleton />}
 					</List>
 				</Paper>
-				<Paper square elevation={0} className={classes.halfTicketsList}>
+				<Paper
+					square
+					elevation={0}
+					className={classes.halfTicketsList}
+					onScroll={handleScroll}
+				>
 					<div className={classes.ticketsListHeader}>
 						Aguardando
 						<span className={classes.ticketsCount}>
@@ -484,7 +475,13 @@ const Tickets = () => {
 						</span>
 					</div>
 					<List style={{ paddingTop: 0 }}>
-						<CustomTicketList
+						<TicketsList
+							tickets={tickets}
+							loading={loading}
+							handleSelectTicket={handleSelectTicket}
+							showAllTickets={showAllTickets}
+							ticketId={ticketId}
+							handleAcepptTicket={handleAcepptTicket}
 							noTicketsTitle="Tudo resolvido"
 							noTicketsMessage="Nenhum Ticket pendente"
 							status="pending"
@@ -493,22 +490,48 @@ const Tickets = () => {
 					</List>
 				</Paper>
 			</TabPanel>
-			<TabPanel value={tab} name="closed" className={classes.contactsWrapper}>
+			<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
-				<Paper square elevation={0} className={classes.fullHeightTicketsList}>
+				<Paper
-					<CustomInfiniteScroll loadingKey="loading-closed">
+					square
-						<CustomTicketList status="closed" userId={null} />
+					elevation={0}
-					</CustomInfiniteScroll>
+					className={classes.fullHeightTicketsList}
+					onScroll={handleScroll}
+				>
+					<List style={{ paddingTop: 0 }}>
+						<TicketsList
+							tickets={tickets}
+							loading={loading}
+							handleSelectTicket={handleSelectTicket}
+							showAllTickets={showAllTickets}
+							ticketId={ticketId}
+							handleAcepptTicket={handleAcepptTicket}
+							status="closed"
+							userId={null}
+						/>
+					</List>
 				</Paper>
 			</TabPanel>
-			<TabPanel value={tab} name="search" className={classes.contactsWrapper}>
+			<TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
-				<Paper square elevation={0} className={classes.fullHeightTicketsList}>
+				<Paper
-					<CustomInfiniteScroll loadingKey="loading-all">
+					square
-						<CustomTicketList
+					elevation={0}
+					className={classes.fullHeightTicketsList}
+					onScroll={handleScroll}
+				>
+					<List style={{ paddingTop: 0 }}>
+						<TicketsList
+							tickets={tickets}
+							loading={loading}
+							handleSelectTicket={handleSelectTicket}
+							showAllTickets={showAllTickets}
+							ticketId={ticketId}
+							handleAcepptTicket={handleAcepptTicket}
 							noTicketsTitle="Nada encontrado"
 							noTicketsMessage="Tente buscar por outro termo"
 							status="all"
 						/>
-					</CustomInfiniteScroll>
+					</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.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.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==
@@ -9249,13 +9249,6 @@ react-infinite-scroll-reverse@^1.0.3:
   dependencies:
     prop-types "15.7.2"
 
-react-infinite-scroller@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"
-  integrity sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==
-  dependencies:
-    prop-types "^15.5.8"
-
 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"