Upgrade dependencies (#479)

Migrate to latest versions of Next.js, React, Radix, etc.

src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx

@@ -7,10 +7,11 @@ export const metadata: Metadata = {
 }
 
 export default async function EditExpensePage({
-  params: { groupId, expenseId },
+  params,
 }: {
-  params: { groupId: string; expenseId: string }
+  params: Promise<{ groupId: string; expenseId: string }>
 }) {
+  const { groupId, expenseId } = await params
   return (
     <EditExpenseForm
       groupId={groupId}

src/app/groups/[groupId]/expenses/category-icon.tsx

@@ -48,6 +48,7 @@ export function CategoryIcon({
   ...props
 }: { category: Category | null } & LucideProps) {
   const Icon = getCategoryIcon(`${category?.grouping}/${category?.name}`)
+  // eslint-disable-next-line react-hooks/static-components
   return <Icon {...props} />
 }
 

src/app/groups/[groupId]/expenses/create-from-receipt-button-actions.ts

@@ -12,7 +12,7 @@ export async function extractExpenseInformationFromImage(imageUrl: string) {
   const categories = await getCategories()
 
   const body: ChatCompletionCreateParamsNonStreaming = {
-    model: 'gpt-4-turbo',
+    model: 'gpt-5-nano',
     messages: [
       {
         role: 'user',

src/app/groups/[groupId]/expenses/create/page.tsx

@@ -7,10 +7,11 @@ export const metadata: Metadata = {
 }
 
 export default async function ExpensePage({
-  params: { groupId },
+  params,
 }: {
-  params: { groupId: string }
+  params: Promise<{ groupId: string }>
 }) {
+  const { groupId } = await params
   return (
     <CreateExpenseForm
       groupId={groupId}

src/app/groups/[groupId]/expenses/expense-form.tsx

@@ -33,7 +33,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Locale } from '@/i18n'
+import { Locale } from '@/i18n/request'
 import { randomId } from '@/lib/api'
 import { defaultCurrencyList, getCurrency } from '@/lib/currency'
 import { RuntimeFeatureFlags } from '@/lib/featureFlags'

src/app/groups/[groupId]/expenses/export/csv/route.ts

@@ -24,8 +24,9 @@ const prisma = new PrismaClient()
 
 export async function GET(
   req: Request,
-  { params: { groupId } }: { params: { groupId: string } },
+  { params }: { params: Promise<{ groupId: string }> },
 ) {
+  const { groupId } = await params
   const group = await prisma.group.findUnique({
     where: { id: groupId },
     select: {

src/app/groups/[groupId]/expenses/export/json/route.ts

@@ -4,8 +4,9 @@ import { NextResponse } from 'next/server'
 
 export async function GET(
   req: Request,
-  { params: { groupId } }: { params: { groupId: string } },
+  { params }: { params: Promise<{ groupId: string }> },
 ) {
+  const { groupId } = await params
   const group = await prisma.group.findUnique({
     where: { id: groupId },
     select: {

src/app/groups/[groupId]/information/page.tsx

@@ -5,10 +5,11 @@ export const metadata: Metadata = {
   title: 'Group Information',
 }
 
-export default function InformationPage({
-  params: { groupId },
+export default async function InformationPage({
+  params,
 }: {
-  params: { groupId: string }
+  params: Promise<{ groupId: string }>
 }) {
+  const { groupId } = await params
   return <GroupInformation groupId={groupId} />
 }

src/app/groups/[groupId]/layout.tsx

@@ -4,14 +4,13 @@ import { PropsWithChildren } from 'react'
 import { GroupLayoutClient } from './layout.client'
 
 type Props = {
-  params: {
+  params: Promise<{
     groupId: string
-  }
+  }>
 }
 
-export async function generateMetadata({
-  params: { groupId },
-}: Props): Promise<Metadata> {
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { groupId } = await params
   const group = await cached.getGroup(groupId)
 
   return {
@@ -22,9 +21,10 @@ export async function generateMetadata({
   }
 }
 
-export default function GroupLayout({
+export default async function GroupLayout({
   children,
-  params: { groupId },
+  params,
 }: PropsWithChildren<Props>) {
+  const { groupId } = await params
   return <GroupLayoutClient groupId={groupId}>{children}</GroupLayoutClient>
 }

src/app/groups/[groupId]/page.tsx

@@ -1,9 +1,10 @@
 import { redirect } from 'next/navigation'
 
 export default async function GroupPage({
-  params: { groupId },
+  params,
 }: {
-  params: { groupId: string }
+  params: Promise<{ groupId: string }>
 }) {
+  const { groupId } = await params
   redirect(`/groups/${groupId}/expenses`)
 }

src/app/groups/[groupId]/reimbursement-list.tsx

@@ -33,8 +33,8 @@ export function ReimbursementList({
           <div className="flex flex-col gap-1 items-start sm:flex-row sm:items-baseline sm:gap-4">
             <div>
               {t.rich('owes', {
-                from: getParticipant(reimbursement.from)?.name,
-                to: getParticipant(reimbursement.to)?.name,
+                from: getParticipant(reimbursement.from)?.name ?? '',
+                to: getParticipant(reimbursement.to)?.name ?? '',
                 strong: (chunks) => <strong>{chunks}</strong>,
               })}
             </div>