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
|
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
import type { ZGetBookmarksRequest } from "@karakeep/shared/types/bookmarks";
import { useTRPC } from "@karakeep/shared-react/trpc";
import { BookmarkTypes } from "@karakeep/shared/types/bookmarks";
import FullPageError from "../FullPageError";
import FullPageSpinner from "../ui/FullPageSpinner";
import BookmarkList from "./BookmarkList";
export default function UpdatingBookmarkList({
query,
header,
}: {
query: Omit<ZGetBookmarksRequest, "sortOrder" | "includeContent">; // Sort order is not supported in mobile yet
header?: React.ReactElement;
}) {
const api = useTRPC();
const queryClient = useQueryClient();
const {
data,
isPending,
isPlaceholderData,
error,
fetchNextPage,
isFetchingNextPage,
refetch,
} = useInfiniteQuery(
api.bookmarks.getBookmarks.infiniteQueryOptions(
{ ...query, useCursorV2: true, includeContent: false },
{
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.bookmarks.getBookmarks.pathFilter());
queryClient.invalidateQueries(api.bookmarks.getBookmark.pathFilter());
};
return (
<BookmarkList
bookmarks={data.pages
.flatMap((p) => p.bookmarks)
.filter((b) => b.content.type != BookmarkTypes.UNKNOWN)}
header={header}
onRefresh={onRefresh}
fetchNextPage={fetchNextPage}
isFetchingNextPage={isFetchingNextPage}
isRefreshing={isPending || isPlaceholderData}
/>
);
}
|
