1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
import { useEffect, useState } from "react";
import { FlatList, Pressable, Text, View } from "react-native";
import { Link } from "expo-router";
import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
import PageTitle from "@/components/ui/PageTitle";
import { api } from "@/lib/trpc";
import { ChevronRight } from "lucide-react-native";
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 (
<CustomSafeAreaView>
<FlatList
ListHeaderComponent={<PageTitle title="Lists" />}
contentContainerStyle={{
gap: 5,
}}
renderItem={(l) => (
<Link asChild key={l.item.id} href={l.item.href}>
<Pressable className="mx-2 flex flex-row justify-between rounded-xl border border-gray-100 bg-white px-4 py-2">
<Text className="text-lg">
{l.item.logo} {l.item.name}
</Text>
<ChevronRight color="rgb(0, 122, 255)" />
</Pressable>
</Link>
)}
data={links}
refreshing={refreshing}
onRefresh={onRefresh}
/>
</CustomSafeAreaView>
);
}
|
