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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
'use client'
import { getGroupsAction } from '@/app/groups/actions'
import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
import { Button } from '@/components/ui/button'
import { getGroups } from '@/lib/api'
import { Calendar, Loader2, Users } from 'lucide-react'
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: 'partial'; groups: RecentGroups }
| {
status: 'complete'
groups: RecentGroups
groupsDetails: Awaited<ReturnType<typeof getGroups>>
}
type Props = {
getGroupsAction: (groupIds: string[]) => ReturnType<typeof getGroups>
}
export function RecentGroupList() {
const [state, setState] = useState<State>({ status: 'pending' })
useEffect(() => {
const groupsInStorage = getRecentGroups()
setState({ status: 'partial', groups: groupsInStorage })
getGroupsAction(groupsInStorage.map((g) => g.id)).then((groupsDetails) => {
setState({ status: 'complete', groups: groupsInStorage, groupsDetails })
})
}, [])
if (state.status === 'pending') {
return (
<p>
<Loader2 className="w-4 m-4 mr-2 inline animate-spin" /> Loading recent
groups…
</p>
)
}
if (state.groups.length === 0) {
return (
<div className="text-sm space-y-2">
<p>You have not visited any group recently.</p>
<p>
<Button variant="link" asChild className="-m-4">
<Link href={`/groups/create`}>Create one</Link>
</Button>{' '}
or ask a friend to send you the link to an existing one.
</p>
</div>
)
}
return (
<ul className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
{state.groups.map((group) => {
const details =
state.status === 'complete'
? state.groupsDetails.find((d) => d.id === group.id)
: null
return (
<li key={group.id}>
<Button variant="outline" className="h-fit w-full py-3" asChild>
<Link href={`/groups/${group.id}`} className="text-base">
<div className="w-full flex flex-col gap-1">
<div className="text-base">{group.name}</div>
<div className="text-muted-foreground font-normal text-xs">
{details ? (
<div className="w-full flex items-center justify-between">
<div className="flex items-center">
<Users className="w-3 h-3 inline mr-1" />
<span>{details._count.participants}</span>
</div>
<div className="flex items-center">
<Calendar className="w-3 h-3 inline mx-1" />
<span>
{new Date(details.createdAt).toLocaleDateString(
'en-US',
{
dateStyle: 'medium',
},
)}
</span>
</div>
</div>
) : (
<>
<Loader2 className="w-3 h-3 mr-1 inline animate-spin" />
</>
)}
</div>
</div>
</Link>
</Button>
</li>
)
})}
</ul>
)
}
|
