From fc8eb79b98bbea558bd614dc71dd66b72ab9b0c0 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 17 Mar 2024 13:12:11 +0000
Subject: feature: Implemente pagination support

---
 apps/mobile/components/bookmarks/BookmarkList.tsx | 31 ++++++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

(limited to 'apps/mobile/components/bookmarks/BookmarkList.tsx')

diff --git a/apps/mobile/components/bookmarks/BookmarkList.tsx b/apps/mobile/components/bookmarks/BookmarkList.tsx
index e7b5e5f2..8a19c045 100644
--- a/apps/mobile/components/bookmarks/BookmarkList.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Keyboard, Text, View } from "react-native";
+import { ActivityIndicator, Keyboard, Text, View } from "react-native";
 import Animated, { LinearTransition } from "react-native-reanimated";
 import { api } from "@/lib/trpc";
 import { useScrollToTop } from "@react-navigation/native";
@@ -20,13 +20,26 @@ export default function BookmarkList({
   const [refreshing, setRefreshing] = useState(false);
   const flatListRef = useRef(null);
   useScrollToTop(flatListRef);
-  const { data, isPending, isPlaceholderData } =
-    api.bookmarks.getBookmarks.useQuery(query);
+  const {
+    data,
+    isPending,
+    isPlaceholderData,
+    error,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = api.bookmarks.getBookmarks.useInfiniteQuery(query, {
+    initialCursor: null,
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+  });
 
   useEffect(() => {
     setRefreshing(isPending || isPlaceholderData);
   }, [isPending, isPlaceholderData]);
 
+  if (error) {
+    return <Text>{JSON.stringify(error)}</Text>;
+  }
+
   if (isPending || !data) {
     return <FullPageSpinner />;
   }
@@ -51,11 +64,21 @@ export default function BookmarkList({
           <Text className="text-xl">No Bookmarks</Text>
         </View>
       }
-      data={data.bookmarks}
+      data={data.pages.flatMap((p) => p.bookmarks)}
       refreshing={refreshing}
       onRefresh={onRefresh}
       onScrollBeginDrag={Keyboard.dismiss}
       keyExtractor={(b) => b.id}
+      onEndReached={() => fetchNextPage()}
+      ListFooterComponent={
+        isFetchingNextPage ? (
+          <View className="items-center">
+            <ActivityIndicator />
+          </View>
+        ) : (
+          <View />
+        )
+      }
     />
   );
 }
-- 
cgit v1.2.3-70-g09d2

