From 3a4b858c03bf775e63521f8f0e0a5e9e304dbceb Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 04:27:21 +0000
Subject: mobile: Add support for viewing lists

---
 packages/mobile/components/bookmarks/BookmarkList.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

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

diff --git a/packages/mobile/components/bookmarks/BookmarkList.tsx b/packages/mobile/components/bookmarks/BookmarkList.tsx
index bb4b8668..223b1bf4 100644
--- a/packages/mobile/components/bookmarks/BookmarkList.tsx
+++ b/packages/mobile/components/bookmarks/BookmarkList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FlatList } from "react-native";
+import { FlatList, Text, View } from "react-native";
 
 import BookmarkCard from "./BookmarkCard";
 
@@ -8,9 +8,11 @@ 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);
@@ -18,6 +20,7 @@ export default function BookmarkList({
     api.bookmarks.getBookmarks.useQuery({
       favourited,
       archived,
+      ids,
     });
 
   useEffect(() => {
@@ -34,9 +37,18 @@ export default function BookmarkList({
     apiUtils.bookmarks.getBookmark.invalidate();
   };
 
+  if (!data.bookmarks.length) {
+    return (
+      <View className="h-full items-center justify-center">
+        <Text className="text-xl">No Bookmarks</Text>
+      </View>
+    );
+  }
+
   return (
     <FlatList
       contentContainerStyle={{
+        marginTop: 10,
         gap: 10,
       }}
       renderItem={(b) => <BookmarkCard key={b.item.id} bookmark={b.item} />}
-- 
cgit v1.2.3-70-g09d2

