1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import { useEffect, useRef, useState } from "react";
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";
import type { ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
import FullPageSpinner from "../ui/FullPageSpinner";
import BookmarkCard from "./BookmarkCard";
export default function BookmarkList({
query,
header,
}: {
query: ZGetBookmarksRequest;
header?: React.ReactElement;
}) {
const apiUtils = api.useUtils();
const [refreshing, setRefreshing] = useState(false);
const flatListRef = useRef(null);
useScrollToTop(flatListRef);
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 />;
}
const onRefresh = () => {
apiUtils.bookmarks.getBookmarks.invalidate();
apiUtils.bookmarks.getBookmark.invalidate();
};
return (
<Animated.FlatList
ref={flatListRef}
itemLayoutAnimation={LinearTransition}
ListHeaderComponent={header}
contentContainerStyle={{
gap: 15,
marginBottom: 15,
}}
renderItem={(b) => <BookmarkCard bookmark={b.item} />}
ListEmptyComponent={
<View className="items-center justify-center pt-4">
<Text className="text-xl">No Bookmarks</Text>
</View>
}
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 />
)
}
/>
);
}
|
