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/app/dashboard/(tabs)/_layout.tsx   |  9 ++-
 packages/mobile/app/dashboard/(tabs)/lists.tsx     | 67 ++++++++++++++++++++++
 packages/mobile/app/dashboard/_layout.tsx          | 17 +++++-
 packages/mobile/app/dashboard/archive.tsx          | 11 ++++
 packages/mobile/app/dashboard/favourites.tsx       | 11 ++++
 packages/mobile/app/dashboard/lists/[slug].tsx     | 31 ++++++++++
 .../mobile/components/bookmarks/BookmarkList.tsx   | 14 ++++-
 7 files changed, 157 insertions(+), 3 deletions(-)
 create mode 100644 packages/mobile/app/dashboard/(tabs)/lists.tsx
 create mode 100644 packages/mobile/app/dashboard/archive.tsx
 create mode 100644 packages/mobile/app/dashboard/favourites.tsx
 create mode 100644 packages/mobile/app/dashboard/lists/[slug].tsx

(limited to 'packages')

diff --git a/packages/mobile/app/dashboard/(tabs)/_layout.tsx b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
index c15f37f1..74557eda 100644
--- a/packages/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,5 +1,5 @@
 import { Tabs } from "expo-router";
-import { Home, Settings } from "lucide-react-native";
+import { ClipboardList, Home, Settings } from "lucide-react-native";
 import React from "react";
 
 export default function TabLayout() {
@@ -12,6 +12,13 @@ export default function TabLayout() {
           tabBarIcon: ({ color }) => <Home color={color} />,
         }}
       />
+      <Tabs.Screen
+        name="lists"
+        options={{
+          title: "Lists",
+          tabBarIcon: ({ color }) => <ClipboardList color={color} />,
+        }}
+      />
       <Tabs.Screen
         name="settings"
         options={{
diff --git a/packages/mobile/app/dashboard/(tabs)/lists.tsx b/packages/mobile/app/dashboard/(tabs)/lists.tsx
new file mode 100644
index 00000000..b534ddda
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/lists.tsx
@@ -0,0 +1,67 @@
+import { Link } from "expo-router";
+import { useEffect, useState } from "react";
+import { FlatList, View } from "react-native";
+
+import { api } from "@/lib/trpc";
+
+export default function Lists() {
+  const [refreshing, setRefreshing] = useState(false);
+  const { data: lists, isPending } = api.lists.list.useQuery();
+  const apiUtils = api.useUtils();
+
+  useEffect(() => {
+    setRefreshing(isPending);
+  }, [isPending]);
+
+  if (!lists) {
+    // Add spinner
+    return <View />;
+  }
+
+  const onRefresh = () => {
+    apiUtils.lists.list.invalidate();
+  };
+
+  const links = [
+    {
+      id: "fav",
+      logo: "⭐️",
+      name: "Favourites",
+      href: "/dashboard/favourites",
+    },
+    {
+      id: "arch",
+      logo: "🗄️",
+      name: "Archive",
+      href: "/dashboard/archive",
+    },
+  ];
+
+  links.push(
+    ...lists.lists.map((l) => ({
+      id: l.id,
+      logo: l.icon,
+      name: l.name,
+      href: `/dashboard/lists/${l.id}`,
+    })),
+  );
+
+  return (
+    <FlatList
+      contentContainerStyle={{
+        gap: 10,
+        marginTop: 10,
+      }}
+      renderItem={(l) => (
+        <View className="mx-2 block rounded-xl border border-gray-100 bg-white px-4 py-2">
+          <Link key={l.item.id} href={l.item.href} className="text-lg">
+            {l.item.logo} {l.item.name}
+          </Link>
+        </View>
+      )}
+      data={links}
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+    />
+  );
+}
diff --git a/packages/mobile/app/dashboard/_layout.tsx b/packages/mobile/app/dashboard/_layout.tsx
index 590c82b1..4dd03d95 100644
--- a/packages/mobile/app/dashboard/_layout.tsx
+++ b/packages/mobile/app/dashboard/_layout.tsx
@@ -3,7 +3,22 @@ import { Stack } from "expo-router/stack";
 export default function Dashboard() {
   return (
     <Stack>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen
+        name="(tabs)"
+        options={{ headerShown: false, title: "Home" }}
+      />
+      <Stack.Screen
+        name="favourites"
+        options={{
+          title: "⭐️ Favourites",
+        }}
+      />
+      <Stack.Screen
+        name="archive"
+        options={{
+          title: "🗄️ Archive",
+        }}
+      />
     </Stack>
   );
 }
diff --git a/packages/mobile/app/dashboard/archive.tsx b/packages/mobile/app/dashboard/archive.tsx
new file mode 100644
index 00000000..d75cfe22
--- /dev/null
+++ b/packages/mobile/app/dashboard/archive.tsx
@@ -0,0 +1,11 @@
+import { View } from "react-native";
+
+import BookmarkList from "@/components/bookmarks/BookmarkList";
+
+export default function Archive() {
+  return (
+    <View>
+      <BookmarkList archived />
+    </View>
+  );
+}
diff --git a/packages/mobile/app/dashboard/favourites.tsx b/packages/mobile/app/dashboard/favourites.tsx
new file mode 100644
index 00000000..90374f18
--- /dev/null
+++ b/packages/mobile/app/dashboard/favourites.tsx
@@ -0,0 +1,11 @@
+import { View } from "react-native";
+
+import BookmarkList from "@/components/bookmarks/BookmarkList";
+
+export default function Favourites() {
+  return (
+    <View>
+      <BookmarkList archived={false} favourited />
+    </View>
+  );
+}
diff --git a/packages/mobile/app/dashboard/lists/[slug].tsx b/packages/mobile/app/dashboard/lists/[slug].tsx
new file mode 100644
index 00000000..5ebc4446
--- /dev/null
+++ b/packages/mobile/app/dashboard/lists/[slug].tsx
@@ -0,0 +1,31 @@
+import { useLocalSearchParams, Stack } from "expo-router";
+import { View } from "react-native";
+
+import BookmarkList from "@/components/bookmarks/BookmarkList";
+import { api } from "@/lib/trpc";
+
+export default function ListView() {
+  const { slug } = useLocalSearchParams();
+  if (typeof slug !== "string") {
+    throw new Error("Unexpected param type");
+  }
+  const { data: list } = api.lists.get.useQuery({ listId: slug });
+
+  if (!list) {
+    // TODO: Spinner
+    return <View />;
+  }
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: `${list.icon} ${list.name}`,
+        }}
+      />
+      <View>
+        <BookmarkList archived={false} ids={list.bookmarks} />
+      </View>
+    </>
+  );
+}
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