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>

src/components/expense-documents-input.tsx

@@ -11,6 +11,8 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
+  DialogDescription,
+  DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog'
 import { ToastAction } from '@/components/ui/toast'
@@ -157,6 +159,8 @@ export function DocumentThumbnail({
         </Button>
       </DialogTrigger>
       <DialogContent className="p-4 w-[100vw] max-w-[100vw] h-[100dvh] max-h-[100dvh] sm:max-w-[calc(100vw-32px)] sm:max-h-[calc(100dvh-32px)] [&>:last-child]:hidden">
+        <DialogTitle className="sr-only">Document</DialogTitle>
+        <DialogDescription className="sr-only"></DialogDescription>
         <div className="flex flex-col gap-4">
           <div className="flex justify-end">
             <Button

src/components/group-form.tsx

@@ -30,7 +30,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Locale } from '@/i18n'
+import { Locale } from '@/i18n/request'
 import { getGroup } from '@/lib/api'
 import { defaultCurrencyList, getCurrency } from '@/lib/currency'
 import { GroupFormValues, groupFormSchema } from '@/lib/schemas'
@@ -65,13 +65,14 @@ export function GroupForm({
       ? {
           name: group.name,
           information: group.information ?? '',
-          currency: group.currency,
-          currencyCode: group.currencyCode,
+          currency: group.currency ?? '',
+          currencyCode: group.currencyCode ?? '',
           participants: group.participants,
         }
       : {
           name: '',
           information: '',
+          currency: '',
           currencyCode: process.env.NEXT_PUBLIC_DEFAULT_CURRENCY_CODE || 'USD', // TODO: If NEXT_PUBLIC_DEFAULT_CURRENCY_CODE, is not set, determine the default currency code based on locale
           participants: [
             { name: t('Participants.John') },

src/components/locale-switcher.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Locale, localeLabels } from '@/i18n'
+import { Locale, localeLabels } from '@/i18n/request'
 import { setUserLocale } from '@/lib/locale'
 import { useLocale } from 'next-intl'
 

src/components/ui/command.tsx

@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className
     )}
     {...props}

src/i18n/request.ts

@@ -1,6 +1,6 @@
 import deepmerge from 'deepmerge'
 import { getRequestConfig } from 'next-intl/server'
-import { getUserLocale } from './lib/locale'
+import { getUserLocale } from '../lib/locale'
 
 export const localeLabels = {
   id: 'Bahasa Indonesia',
@@ -37,14 +37,14 @@ export const defaultLocale: Locale = 'en-US'
 
 export default getRequestConfig(async () => {
   const locale = await getUserLocale()
-  const localeMessages = (await import(`../messages/${locale}.json`)).default
+  const localeMessages = (await import(`../../messages/${locale}.json`)).default
 
   let messages: any
   if (locale === defaultLocale) {
     messages = localeMessages
   } else {
     messages = deepmerge(
-      (await import(`../messages/${defaultLocale}.json`)).default,
+      (await import(`../../messages/${defaultLocale}.json`)).default,
       localeMessages,
     ) as any
   }

src/lib/currency.ts

@@ -1,4 +1,4 @@
-import { Locale } from '@/i18n'
+import { Locale } from '@/i18n/request'
 import currencyList from './currency-data.json'
 
 export type Currency = {

src/lib/locale.ts

@@ -1,6 +1,6 @@
 'use server'
 
-import { Locale, Locales, defaultLocale, locales } from '@/i18n'
+import { Locale, Locales, defaultLocale, locales } from '@/i18n/request'
 import { match } from '@formatjs/intl-localematcher'
 import Negotiator from 'negotiator'
 import { cookies, headers } from 'next/headers'
@@ -27,17 +27,17 @@ export async function getUserLocale() {
   let locale
 
   // Prio 1: use existing cookie
-  locale = cookies().get(COOKIE_NAME)?.value
+  locale = (await cookies()).get(COOKIE_NAME)?.value
 
   // Prio 2: use `accept-language` header
   // Prio 3: use default locale
   if (!locale) {
-    locale = getAcceptLanguageLocale(headers(), locales)
+    locale = getAcceptLanguageLocale(await headers(), locales)
   }
 
   return locale
 }
 
 export async function setUserLocale(locale: Locale) {
-  cookies().set(COOKIE_NAME, locale)
+  ;(await cookies()).set(COOKIE_NAME, locale)
 }

src/scripts/generateCurrencyData.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Locale, locales } from '@/i18n'
+import { Locale, locales } from '@/i18n/request'
 import {
   Currency,
   supportedCurrencyCodeType,