aboutsummaryrefslogtreecommitdiffstats
path: root/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
blob: 87f115f9885b43413a73ac695269d5537edbc3f9 (plain) (blame)
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
import { Text } from "react-native";
import { api } from "@/lib/trpc";

import type { ZGetBookmarksRequest } from "@hoarder/shared/types/bookmarks";
import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";

import FullPageSpinner from "../ui/FullPageSpinner";
import BookmarkList from "./BookmarkList";

export default function UpdatingBookmarkList({
  query,
  header,
}: {
  query: ZGetBookmarksRequest;
  header?: React.ReactElement;
}) {
  const apiUtils = api.useUtils();
  const {
    data,
    isPending,
    isPlaceholderData,
    error,
    fetchNextPage,
    isFetchingNextPage,
  } = api.bookmarks.getBookmarks.useInfiniteQuery(
    { ...query, useCursorV2: true },
    {
      initialCursor: null,
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    },
  );

  if (error) {
    return <Text>{JSON.stringify(error)}</Text>;
  }

  if (isPending || !data) {
    return <FullPageSpinner />;
  }

  const onRefresh = () => {
    apiUtils.bookmarks.getBookmarks.invalidate();
    apiUtils.bookmarks.getBookmark.invalidate();
  };

  return (
    <BookmarkList
      bookmarks={data.pages
        .flatMap((p) => p.bookmarks)
        .filter((b) => b.content.type != BookmarkTypes.UNKNWON)}
      header={header}
      onRefresh={onRefresh}
      fetchNextPage={fetchNextPage}
      isFetchingNextPage={isFetchingNextPage}
      isRefreshing={isPending || isPlaceholderData}
    />
  );
}