aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx17
-rw-r--r--src/app/groups/[groupId]/expenses/create/page.tsx13
-rw-r--r--src/app/groups/[groupId]/expenses/export/json/route.ts1
-rw-r--r--src/app/groups/[groupId]/layout.tsx6
-rw-r--r--src/app/groups/layout.tsx6
-rw-r--r--src/app/layout.tsx5
-rw-r--r--src/app/page.tsx2
-rw-r--r--src/components/group-form.tsx77
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>