diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx | 17 | ||||
| -rw-r--r-- | src/app/groups/[groupId]/expenses/create/page.tsx | 13 | ||||
| -rw-r--r-- | src/app/groups/[groupId]/expenses/export/json/route.ts | 1 | ||||
| -rw-r--r-- | src/app/groups/[groupId]/layout.tsx | 6 | ||||
| -rw-r--r-- | src/app/groups/layout.tsx | 6 | ||||
| -rw-r--r-- | src/app/layout.tsx | 5 | ||||
| -rw-r--r-- | src/app/page.tsx | 2 | ||||
| -rw-r--r-- | src/components/group-form.tsx | 77 |
8 files changed, 72 insertions, 55 deletions
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx index 984d30f..8455d4d 100644 --- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx +++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx @@ -9,6 +9,7 @@ import { import { expenseFormSchema } from '@/lib/schemas' import { Metadata } from 'next' import { notFound, redirect } from 'next/navigation' +import { Suspense } from 'react' export const metadata: Metadata = { title: 'Edit expense', @@ -39,12 +40,14 @@ export default async function EditExpensePage({ } return ( - <ExpenseForm - group={group} - expense={expense} - categories={categories} - onSubmit={updateExpenseAction} - onDelete={deleteExpenseAction} - /> + <Suspense> + <ExpenseForm + group={group} + expense={expense} + categories={categories} + onSubmit={updateExpenseAction} + onDelete={deleteExpenseAction} + /> + </Suspense> ) } diff --git a/src/app/groups/[groupId]/expenses/create/page.tsx b/src/app/groups/[groupId]/expenses/create/page.tsx index adbdff9..29a060f 100644 --- a/src/app/groups/[groupId]/expenses/create/page.tsx +++ b/src/app/groups/[groupId]/expenses/create/page.tsx @@ -3,6 +3,7 @@ import { createExpense, getCategories, getGroup } from '@/lib/api' import { expenseFormSchema } from '@/lib/schemas' import { Metadata } from 'next' import { notFound, redirect } from 'next/navigation' +import { Suspense } from 'react' export const metadata: Metadata = { title: 'Create expense', @@ -25,10 +26,12 @@ export default async function ExpensePage({ } return ( - <ExpenseForm - group={group} - categories={categories} - onSubmit={createExpenseAction} - /> + <Suspense> + <ExpenseForm + group={group} + categories={categories} + onSubmit={createExpenseAction} + /> + </Suspense> ) } diff --git a/src/app/groups/[groupId]/expenses/export/json/route.ts b/src/app/groups/[groupId]/expenses/export/json/route.ts index 0fd8ad8..ff14ae7 100644 --- a/src/app/groups/[groupId]/expenses/export/json/route.ts +++ b/src/app/groups/[groupId]/expenses/export/json/route.ts @@ -6,7 +6,6 @@ export async function GET( req: Request, { params: { groupId } }: { params: { groupId: string } }, ) { - console.log({ groupId }) const prisma = await getPrisma() const group = await prisma.group.findUnique({ where: { id: groupId }, diff --git a/src/app/groups/[groupId]/layout.tsx b/src/app/groups/[groupId]/layout.tsx index 3e649e7..fc76b61 100644 --- a/src/app/groups/[groupId]/layout.tsx +++ b/src/app/groups/[groupId]/layout.tsx @@ -5,7 +5,7 @@ import { getGroup } from '@/lib/api' import { Metadata } from 'next' import Link from 'next/link' import { notFound } from 'next/navigation' -import { PropsWithChildren } from 'react' +import { PropsWithChildren, Suspense } from 'react' type Props = { params: { @@ -41,7 +41,9 @@ export default async function GroupLayout({ </h1> <div className="flex gap-2 justify-between"> - <GroupTabs groupId={groupId} /> + <Suspense> + <GroupTabs groupId={groupId} /> + </Suspense> <ShareButton group={group} /> </div> </div> diff --git a/src/app/groups/layout.tsx b/src/app/groups/layout.tsx index 3b8b10e..02f136b 100644 --- a/src/app/groups/layout.tsx +++ b/src/app/groups/layout.tsx @@ -1,11 +1,11 @@ -import { PropsWithChildren } from 'react' +import { PropsWithChildren, Suspense } from 'react' export default function GroupsLayout({ children }: PropsWithChildren<{}>) { return ( - <> + <Suspense> <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6"> {children} </main> - </> + </Suspense> ) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f8bff4c..30a0227 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,6 +7,7 @@ import { env } from '@/lib/env' import type { Metadata, Viewport } from 'next' import Image from 'next/image' import Link from 'next/link' +import { Suspense } from 'react' import './globals.css' export const metadata: Metadata = { @@ -71,7 +72,9 @@ export default function RootLayout({ enableSystem disableTransitionOnChange > - <ProgressBar /> + <Suspense> + <ProgressBar /> + </Suspense> <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm z-50"> <Link className="flex items-center gap-2 hover:scale-105 transition-transform" diff --git a/src/app/page.tsx b/src/app/page.tsx index eb0e09d..8aa9bda 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,7 +3,7 @@ import { Github } from 'lucide-react' import Link from 'next/link' // FIX for https://github.com/vercel/next.js/issues/58615 -export const dynamic = 'force-dynamic' +// export const dynamic = 'force-dynamic' export default function HomePage() { return ( diff --git a/src/components/group-form.tsx b/src/components/group-form.tsx index fb4e0ae..27555ec 100644 --- a/src/components/group-form.tsx +++ b/src/components/group-form.tsx @@ -35,6 +35,7 @@ import { getGroup } from '@/lib/api' import { GroupFormValues, groupFormSchema } from '@/lib/schemas' import { zodResolver } from '@hookform/resolvers/zod' import { Save, Trash2 } from 'lucide-react' +import { useEffect, useState } from 'react' import { useFieldArray, useForm } from 'react-hook-form' export type Props = { @@ -68,15 +69,25 @@ export function GroupForm({ keyName: 'key', }) - let activeUser = 'None' + const [activeUser, setActiveUser] = useState<string | null>(null) + useEffect(() => { + if (activeUser === null) { + const currentActiveUser = + fields.find( + (f) => f.id === localStorage.getItem(`${group?.id}-activeUser`), + )?.name || 'None' + setActiveUser(currentActiveUser) + } + }, [activeUser, fields, group?.id]) const updateActiveUser = () => { + if (!activeUser) return if (group?.id) { const participant = group.participants.find((p) => p.name === activeUser) if (participant?.id) { localStorage.setItem(`${group.id}-activeUser`, participant.id) } else { - localStorage.setItem(`${group.id}-newUser`, activeUser) + localStorage.setItem(`${group.id}-activeUser`, activeUser) } } else { localStorage.setItem('newGroup-activeUser', activeUser) @@ -228,39 +239,35 @@ export function GroupForm({ </CardHeader> <CardContent> <div className="grid sm:grid-cols-2 gap-4"> - <FormItem> - <FormLabel>Active user</FormLabel> - <FormControl> - <Select - onValueChange={(value) => { - activeUser = value - }} - defaultValue={ - fields.find( - (f) => - f.id === - localStorage.getItem(`${group?.id}-activeUser`), - )?.name || 'None' - } - > - <SelectTrigger> - <SelectValue placeholder="Select a participant" /> - </SelectTrigger> - <SelectContent> - {[{ name: 'None' }, ...form.watch('participants')] - .filter((item) => item.name.length > 0) - .map(({ name }) => ( - <SelectItem key={name} value={name}> - {name} - </SelectItem> - ))} - </SelectContent> - </Select> - </FormControl> - <FormDescription> - User used as default for paying expenses. - </FormDescription> - </FormItem> + {activeUser !== null && ( + <FormItem> + <FormLabel>Active user</FormLabel> + <FormControl> + <Select + onValueChange={(value) => { + setActiveUser(value) + }} + defaultValue={activeUser} + > + <SelectTrigger> + <SelectValue placeholder="Select a participant" /> + </SelectTrigger> + <SelectContent> + {[{ name: 'None' }, ...form.watch('participants')] + .filter((item) => item.name.length > 0) + .map(({ name }) => ( + <SelectItem key={name} value={name}> + {name} + </SelectItem> + ))} + </SelectContent> + </Select> + </FormControl> + <FormDescription> + User used as default for paying expenses. + </FormDescription> + </FormItem> + )} </div> </CardContent> </Card> |
