From be518d51eaf57a1f0e04b7608d9a4362a516eb85 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 02:43:57 +0000
Subject: mobile: All bookmarks homepage

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

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

diff --git a/packages/mobile/components/bookmarks/BookmarkList.tsx b/packages/mobile/components/bookmarks/BookmarkList.tsx
new file mode 100644
index 00000000..bb4b8668
--- /dev/null
+++ b/packages/mobile/components/bookmarks/BookmarkList.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { FlatList } from "react-native";
+
+import BookmarkCard from "./BookmarkCard";
+
+import { api } from "@/lib/trpc";
+
+export default function BookmarkList({
+  favourited,
+  archived,
+}: {
+  favourited?: boolean;
+  archived?: boolean;
+}) {
+  const apiUtils = api.useUtils();
+  const [refreshing, setRefreshing] = useState(false);
+  const { data, isPending, isPlaceholderData } =
+    api.bookmarks.getBookmarks.useQuery({
+      favourited,
+      archived,
+    });
+
+  useEffect(() => {
+    setRefreshing(isPending || isPlaceholderData);
+  }, [isPending, isPlaceholderData]);
+
+  if (isPending || !data) {
+    // TODO: Add a spinner
+    return;
+  }
+
+  const onRefresh = () => {
+    apiUtils.bookmarks.getBookmarks.invalidate();
+    apiUtils.bookmarks.getBookmark.invalidate();
+  };
+
+  return (
+    <FlatList
+      contentContainerStyle={{
+        gap: 10,
+      }}
+      renderItem={(b) => <BookmarkCard key={b.item.id} bookmark={b.item} />}
+      data={data.bookmarks}
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+    />
+  );
+}
-- 
cgit v1.3-1-g0d28