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
|
import { useEffect, useState } from "react";
import { FlatList, Text, View } from "react-native";
import BookmarkCard from "./BookmarkCard";
import { api } from "@/lib/trpc";
export default function BookmarkList({
favourited,
archived,
ids,
}: {
favourited?: boolean;
archived?: boolean;
ids?: string[];
}) {
const apiUtils = api.useUtils();
const [refreshing, setRefreshing] = useState(false);
const { data, isPending, isPlaceholderData } =
api.bookmarks.getBookmarks.useQuery({
favourited,
archived,
ids,
});
useEffect(() => {
setRefreshing(isPending || isPlaceholderData);
}, [isPending, isPlaceholderData]);
if (isPending || !data) {
// TODO: Add a spinner
return;
}
const onRefresh = () => {
apiUtils.bookmarks.getBookmarks.invalidate();
apiUtils.bookmarks.getBookmark.invalidate();
};
if (!data.bookmarks.length) {
return (
<View className="h-full items-center justify-center">
<Text className="text-xl">No Bookmarks</Text>
</View>
);
}
return (
<View className="px-3">
<FlatList
contentContainerStyle={{
marginTop: 10,
gap: 10,
}}
renderItem={(b) => <BookmarkCard key={b.item.id} bookmark={b.item} />}
data={data.bookmarks}
refreshing={refreshing}
onRefresh={onRefresh}
/>
</View>
);
}
|
