From 04572a8e5081b1e4871e273cde9dbaaa44c52fe0 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 21:43:44 +0000
Subject: structure: Create apps dir and copy tooling dir from t3-turbo repo

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

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

diff --git a/apps/mobile/components/bookmarks/BookmarkList.tsx b/apps/mobile/components/bookmarks/BookmarkList.tsx
new file mode 100644
index 00000000..8e408709
--- /dev/null
+++ b/apps/mobile/components/bookmarks/BookmarkList.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import { Text, View } from "react-native";
+import Animated, { LinearTransition } from "react-native-reanimated";
+
+import BookmarkCard from "./BookmarkCard";
+import FullPageSpinner from "../ui/FullPageSpinner";
+
+import { api } from "@/lib/trpc";
+
+export default function BookmarkList({
+  favourited,
+  archived,
+  ids,
+}: {
+  favourited?: boolean;
+  archived?: boolean;
+  ids?: string[];
+}) {
+  const apiUtils = api.useUtils();
+  const [refreshing, setRefreshing] = useState(false);
+  const { data, isPending, isPlaceholderData } =
+    api.bookmarks.getBookmarks.useQuery({
+      favourited,
+      archived,
+      ids,
+    });
+
+  useEffect(() => {
+    setRefreshing(isPending || isPlaceholderData);
+  }, [isPending, isPlaceholderData]);
+
+  if (isPending || !data) {
+    return <FullPageSpinner />;
+  }
+
+  const onRefresh = () => {
+    apiUtils.bookmarks.getBookmarks.invalidate();
+    apiUtils.bookmarks.getBookmark.invalidate();
+  };
+
+  return (
+    <Animated.FlatList
+      itemLayoutAnimation={LinearTransition}
+      contentContainerStyle={{
+        gap: 15,
+        marginVertical: 15,
+        alignItems: "center",
+      }}
+      renderItem={(b) => <BookmarkCard bookmark={b.item} />}
+      ListEmptyComponent={
+        <View className="h-full items-center justify-center">
+          <Text className="text-xl">No Bookmarks</Text>
+        </View>
+      }
+      data={data.bookmarks}
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+      keyExtractor={(b) => b.id}
+    />
+  );
+}
-- 
cgit v1.2.3-70-g09d2