Ask the user who they are when opening a group for the first time (#7)

This commit is contained in:
Sebastien Castiel
2024-01-09 08:53:51 -05:00
parent 6bd3299331
commit 1b9e624004
9 changed files with 600 additions and 42 deletions

View File

@@ -1,3 +1,4 @@
import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
import { Button } from '@/components/ui/button'
import {
@@ -24,45 +25,52 @@ export default async function GroupExpensesPage({
}: {
params: { groupId: string }
}) {
return (
<Card className="mb-4">
<div className="flex flex-1">
<CardHeader className="flex-1">
<CardTitle>Expenses</CardTitle>
<CardDescription>
Here are the expenses that you created for your group.
</CardDescription>
</CardHeader>
<CardHeader>
<Button asChild size="icon">
<Link href={`/groups/${groupId}/expenses/create`}>
<Plus />
</Link>
</Button>
</CardHeader>
</div>
const group = await getGroup(groupId)
if (!group) notFound()
<CardContent className="p-0">
<Suspense
fallback={[0, 1, 2].map((i) => (
<div
key={i}
className="border-t flex justify-between items-center px-6 py-4 text-sm"
>
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-16 rounded-full" />
<Skeleton className="h-4 w-32 rounded-full" />
return (
<>
<Card className="mb-4">
<div className="flex flex-1">
<CardHeader className="flex-1">
<CardTitle>Expenses</CardTitle>
<CardDescription>
Here are the expenses that you created for your group.
</CardDescription>
</CardHeader>
<CardHeader>
<Button asChild size="icon">
<Link href={`/groups/${groupId}/expenses/create`}>
<Plus />
</Link>
</Button>
</CardHeader>
</div>
<CardContent className="p-0">
<Suspense
fallback={[0, 1, 2].map((i) => (
<div
key={i}
className="border-t flex justify-between items-center px-6 py-4 text-sm"
>
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-16 rounded-full" />
<Skeleton className="h-4 w-32 rounded-full" />
</div>
<div>
<Skeleton className="h-4 w-16 rounded-full" />
</div>
</div>
<div>
<Skeleton className="h-4 w-16 rounded-full" />
</div>
</div>
))}
>
<Expenses groupId={groupId} />
</Suspense>
</CardContent>
</Card>
))}
>
<Expenses groupId={groupId} />
</Suspense>
</CardContent>
</Card>
<ActiveUserModal group={group} />
</>
)
}