blob: acb94edb9cd43fa72da16b701c1132a8600e0870 (
plain) (
blame)
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
|
"use client";
import Link from "next/link";
import { useNewListModal } from "@/components/dashboard/sidebar/NewListModal";
import { Button } from "@/components/ui/button";
import { api } from "@/lib/trpc";
import { keepPreviousData } from "@tanstack/react-query";
import { Plus } from "lucide-react";
import type { ZBookmarkList } from "@hoarder/trpc/types/lists";
function ListItem({
name,
icon,
path,
}: {
name: string;
icon: string;
path: string;
}) {
return (
<Link href={path}>
<div className="rounded-md border border-gray-200 bg-background px-4 py-2 text-lg">
<p className="text-nowrap">
{icon} {name}
</p>
</div>
</Link>
);
}
export default function AllListsView({
initialData,
}: {
initialData: ZBookmarkList[];
}) {
const { setOpen: setIsNewListModalOpen } = useNewListModal();
let { data: lists } = api.lists.list.useQuery(undefined, {
initialData: { lists: initialData },
placeholderData: keepPreviousData,
});
// TODO: This seems to be a bug in react query
lists ||= { lists: initialData };
return (
<div className="flex flex-col flex-wrap gap-2 md:flex-row">
<Button
className="my-auto flex h-full"
onClick={() => setIsNewListModalOpen(true)}
>
<Plus />
<span className="my-auto">New List</span>
</Button>
<ListItem name="Favourites" icon="⭐️" path={`/dashboard/favourites`} />
<ListItem name="Archive" icon="🗄️" path={`/dashboard/archive`} />
{lists.lists.map((l) => (
<ListItem
key={l.id}
name={l.name}
icon={l.icon}
path={`/dashboard/lists/${l.id}`}
/>
))}
</div>
);
}
|
