🚑 fixes infinite scroll

kalashshah · Mar 14, 2022 · 67a5bcc · 67a5bcc
1 parent 18c7e07
commit 67a5bcc
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/expense-app/components/TransactionList.tsx b/expense-app/components/TransactionList.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   StyleSheet,
   Text,
@@ -53,9 +53,12 @@ const Item = ({ item, nav }: ItemProps) => (
 interface ListProps {
   data: ITransaction[];
   nav: DrawerNavigationProp<DrawerRoutes, "Transaction">;
+  endReached: () => void;
 }
 
-const TransactionList = ({ data, nav }: ListProps) => {
+const TransactionList = ({ data, nav, endReached }: ListProps) => {
+  const [callOnScrollEnd, setCallOnScrollEnd] = useState(false);
+
   return (
     <SafeAreaView style={styles.container}>
       {data.length > 0 ? (
@@ -65,6 +68,11 @@ const TransactionList = ({ data, nav }: ListProps) => {
           renderItem={({ item }) => <Item {...{ item, nav }} />}
           keyExtractor={(item) => item._id}
           showsVerticalScrollIndicator={false}
+          onEndReached={() => setCallOnScrollEnd(true)}
+          onMomentumScrollEnd={() => {
+            if (callOnScrollEnd) endReached();
+            setCallOnScrollEnd(false);
+          }}
         />
       ) : (
         <View style={styles.empty}>

diff --git a/expense-app/screens/Transaction.tsx b/expense-app/screens/Transaction.tsx
@@ -21,26 +21,61 @@ const Transaction = ({
   const [isIncome, setIsIncome] = useState<boolean>(false);
   const [selected, setSelected] = useState<number>(5);
   const [page, setPage] = useState<number>(1);
+  const [reachedEnd, setReachedEnd] = useState<boolean>(false);
   let cancelToken: CancelTokenSource;
 
   useEffect(() => {
     if (cancelToken) cancelToken.cancel("Cancelled");
     cancelToken = axios.CancelToken.source();
+    setPage(1);
+    setReachedEnd(false);
 
     const link = `/transaction/${isIncome ? "income" : "expense"}`;
     axiosInstance
       .get(link, {
         params: {
           ...(searchPhrase !== "" ? { search: searchPhrase } : {}),
           date: getDate(selected),
-          page,
+          page: 1,
         },
         cancelToken: cancelToken.token,
       })
       .then((res) => setTransactions(res.data))
       .catch(() => {});
   }, [isIncome, selected, searchPhrase]);
 
+  useEffect(() => {
+    console.log("reached end", reachedEnd);
+    console.log("page", page);
+    const link = `/transaction/${isIncome ? "income" : "expense"}`;
+    axiosInstance
+      .get(link, {
+        params: {
+          ...(searchPhrase !== "" ? { search: searchPhrase } : {}),
+          date: getDate(selected),
+          page,
+        },
+      })
+      .then((res) => {
+        setTransactions((current) => {
+          if (current === null || res.data === undefined) {
+            setReachedEnd(true);
+            return [];
+          } else if (res.data.length === 0) {
+            setReachedEnd(true);
+            return current;
+          }
+          const transactions: any = {};
+          if (res.data.length < 10) setReachedEnd(true);
+          [...current, ...(res.data as ITransaction[])].forEach(
+            (transaction) => (transactions[transaction._id] = transaction)
+          );
+          return Object.values(transactions);
+        });
+      })
+      .catch(() => {});
+  }, [page]);
+
   if (!transactions) return <Loading />;
 
   return (
@@ -55,7 +90,13 @@ const Transaction = ({
       <View style={styles.button}>
         <ToggleButton left="Income" right="Expense" setIsOn={setIsIncome} />
       </View>
-      <TransactionList data={transactions} nav={navigation} />
+      <TransactionList
+        data={transactions}
+        nav={navigation}
+        endReached={() => {
+          if (!reachedEnd) setPage((page) => page + 1);
+        }}
+      />
     </SafeAreaView>
   );
 };