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)/lists.tsx | 67 ++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 packages/mobile/app/dashboard/(tabs)/lists.tsx

(limited to 'packages/mobile/app/dashboard/(tabs)/lists.tsx')

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}
+    />
+  );
+}
-- 
cgit v1.2.3-70-g09d2

