blob: e7281931f6a2fb72ce9a96bf0f330afed79ba5ed (
plain)
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
|
'use client'
import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { z } from 'zod'
const recentGroupsSchema = z.array(
z.object({
id: z.string().min(1),
name: z.string(),
}),
)
type RecentGroups = z.infer<typeof recentGroupsSchema>
type State = { status: 'pending' } | { status: 'success'; groups: RecentGroups }
export function RecentGroupList() {
const [state, setState] = useState<State>({ status: 'pending' })
useEffect(() => {
const groupsInStorage = getRecentGroups()
setState({ status: 'success', groups: groupsInStorage })
}, [])
return (
<ul className="flex flex-col gap-2 mt-2">
{state.status === 'pending' ? (
<li>
<em>Loading recent groups…</em>
</li>
) : (
state.groups.map(({ id, name }) => (
<li key={id}>
<Button asChild variant="outline">
<Link href={`/groups/${id}`}>{name}</Link>
</Button>
</li>
))
)}
</ul>
)
}
|
