From 20d1a90e65d08c16f30d8d9adac005dda7f4dad1 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 20 Mar 2024 17:56:22 +0000
Subject: fix(mobile): Fix flicker on search

---
 .../components/bookmarks/UpdatingBookmarkList.tsx  | 52 ++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx

(limited to 'apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx')

diff --git a/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx b/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
new file mode 100644
index 00000000..8495ee22
--- /dev/null
+++ b/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
@@ -0,0 +1,52 @@
+import { Text } from "react-native";
+import { api } from "@/lib/trpc";
+
+import type { ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
+
+import FullPageSpinner from "../ui/FullPageSpinner";
+import BookmarkList2 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, {
+    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 (
+    <BookmarkList2
+      bookmarks={data.pages.flatMap((p) => p.bookmarks)}
+      header={header}
+      onRefresh={onRefresh}
+      fetchNextPage={fetchNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      isRefreshing={isPending || isPlaceholderData}
+    />
+  );
+}
-- 
cgit v1.2.3-70-g09d2