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

---
 apps/mobile/components/bookmarks/BookmarkList.tsx | 54 +++++++----------------
 1 file changed, 15 insertions(+), 39 deletions(-)

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

diff --git a/apps/mobile/components/bookmarks/BookmarkList.tsx b/apps/mobile/components/bookmarks/BookmarkList.tsx
index 8a19c045..9176f66d 100644
--- a/apps/mobile/components/bookmarks/BookmarkList.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkList.tsx
@@ -1,53 +1,29 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { ActivityIndicator, Keyboard, Text, View } from "react-native";
 import Animated, { LinearTransition } from "react-native-reanimated";
-import { api } from "@/lib/trpc";
 import { useScrollToTop } from "@react-navigation/native";
 
-import type { ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
+import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
-import FullPageSpinner from "../ui/FullPageSpinner";
 import BookmarkCard from "./BookmarkCard";
 
 export default function BookmarkList({
-  query,
+  bookmarks,
   header,
+  onRefresh,
+  fetchNextPage,
+  isFetchingNextPage,
+  isRefreshing,
 }: {
-  query: ZGetBookmarksRequest;
+  bookmarks: ZBookmark[];
+  onRefresh: () => void,
+  isRefreshing: boolean,
+  fetchNextPage?: () => void,
   header?: React.ReactElement;
+  isFetchingNextPage?: boolean,
 }) {
-  const apiUtils = api.useUtils();
-  const [refreshing, setRefreshing] = useState(false);
   const flatListRef = useRef(null);
   useScrollToTop(flatListRef);
-  const {
-    data,
-    isPending,
-    isPlaceholderData,
-    error,
-    fetchNextPage,
-    isFetchingNextPage,
-  } = api.bookmarks.getBookmarks.useInfiniteQuery(query, {
-    initialCursor: null,
-    getNextPageParam: (lastPage) => lastPage.nextCursor,
-  });
-
-  useEffect(() => {
-    setRefreshing(isPending || isPlaceholderData);
-  }, [isPending, isPlaceholderData]);
-
-  if (error) {
-    return <Text>{JSON.stringify(error)}</Text>;
-  }
-
-  if (isPending || !data) {
-    return <FullPageSpinner />;
-  }
-
-  const onRefresh = () => {
-    apiUtils.bookmarks.getBookmarks.invalidate();
-    apiUtils.bookmarks.getBookmark.invalidate();
-  };
 
   return (
     <Animated.FlatList
@@ -64,12 +40,12 @@ export default function BookmarkList({
           <Text className="text-xl">No Bookmarks</Text>
         </View>
       }
-      data={data.pages.flatMap((p) => p.bookmarks)}
-      refreshing={refreshing}
+      data={bookmarks}
+      refreshing={isRefreshing}
       onRefresh={onRefresh}
       onScrollBeginDrag={Keyboard.dismiss}
       keyExtractor={(b) => b.id}
-      onEndReached={() => fetchNextPage()}
+      onEndReached={fetchNextPage}
       ListFooterComponent={
         isFetchingNextPage ? (
           <View className="items-center">
-- 
cgit v1.2.3-70-g09d2