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
|
import { View } from "react-native";
import FullPageError from "@/components/FullPageError";
import HighlightList from "@/components/highlights/HighlightList";
import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
import FullPageSpinner from "@/components/ui/FullPageSpinner";
import PageTitle from "@/components/ui/PageTitle";
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
import { useTRPC } from "@karakeep/shared-react/trpc";
export default function Highlights() {
const api = useTRPC();
const queryClient = useQueryClient();
const {
data,
isPending,
isPlaceholderData,
error,
fetchNextPage,
isFetchingNextPage,
refetch,
} = useInfiniteQuery(
api.highlights.getAll.infiniteQueryOptions(
{},
{
initialCursor: null,
getNextPageParam: (lastPage) => lastPage.nextCursor,
},
),
);
if (error) {
return <FullPageError error={error.message} onRetry={() => refetch()} />;
}
if (isPending || !data) {
return <FullPageSpinner />;
}
const onRefresh = () => {
queryClient.invalidateQueries(api.highlights.getAll.pathFilter());
};
return (
<CustomSafeAreaView edges={["top"]}>
<HighlightList
highlights={data.pages.flatMap((p) => p.highlights)}
header={
<View className="flex flex-row justify-between">
<PageTitle title="Highlights" />
</View>
}
onRefresh={onRefresh}
fetchNextPage={fetchNextPage}
isFetchingNextPage={isFetchingNextPage}
isRefreshing={isPending || isPlaceholderData}
/>
</CustomSafeAreaView>
);
}
|
