aboutsummaryrefslogtreecommitdiffstats
path: root/apps/mobile/components/bookmarks
diff options
context:
space:
mode:
Diffstat (limited to 'apps/mobile/components/bookmarks')
-rw-r--r--apps/mobile/components/bookmarks/BookmarkList.tsx31
1 files changed, 27 insertions, 4 deletions
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 />
+ )
+ }
/>
);
}