diff options
| author | MohamedBassem <me@mbassem.com> | 2024-03-13 21:43:44 +0000 |
|---|---|---|
| committer | Mohamed Bassem <me@mbassem.com> | 2024-03-14 16:40:45 +0000 |
| commit | 04572a8e5081b1e4871e273cde9dbaaa44c52fe0 (patch) | |
| tree | 8e993acb732a50d1306d4d6953df96c165c57f57 /apps/mobile/app/dashboard/(tabs)/lists.tsx | |
| parent | 2df08ed08c065e8b91bc8df0266bd4bcbb062be4 (diff) | |
| download | karakeep-04572a8e5081b1e4871e273cde9dbaaa44c52fe0.tar.zst | |
structure: Create apps dir and copy tooling dir from t3-turbo repo
Diffstat (limited to 'apps/mobile/app/dashboard/(tabs)/lists.tsx')
| -rw-r--r-- | apps/mobile/app/dashboard/(tabs)/lists.tsx | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx new file mode 100644 index 00000000..b534ddda --- /dev/null +++ b/apps/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} + /> + ); +} |
