First attemps at using route interception and modals

src/app/groups/[groupId]/@modal/(.)expenses/[expenseId]/edit/page.tsx

@@ -0,0 +1,26 @@
+import { ExpenseModal } from '@/app/groups/[groupId]/@modal/expense-modal'
+import { ExpenseForm } from '@/components/expense-form'
+import { getExpense, getGroup } from '@/lib/api'
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+export const metadata: Metadata = {
+  title: 'Edit expense',
+}
+
+export default async function EditExpensePage({
+  params: { groupId, expenseId },
+}: {
+  params: { groupId: string; expenseId: string }
+}) {
+  const group = await getGroup(groupId)
+  if (!group) notFound()
+  const expense = await getExpense(groupId, expenseId)
+  if (!expense) notFound()
+
+  return (
+    <ExpenseModal title="Edit expense">
+      <ExpenseForm group={group} expense={expense} />
+    </ExpenseModal>
+  )
+}

src/app/groups/[groupId]/@modal/(.)expenses/create/page.tsx

@@ -0,0 +1,24 @@
+import { ExpenseModal } from '@/app/groups/[groupId]/@modal/expense-modal'
+import { ExpenseForm } from '@/components/expense-form'
+import { getGroup } from '@/lib/api'
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+export const metadata: Metadata = {
+  title: 'Create expense',
+}
+
+export default async function ExpensePage({
+  params: { groupId },
+}: {
+  params: { groupId: string }
+}) {
+  const group = await getGroup(groupId)
+  if (!group) notFound()
+
+  return (
+    <ExpenseModal title="Create expense">
+      <ExpenseForm group={group} />
+    </ExpenseModal>
+  )
+}

src/app/groups/[groupId]/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

src/app/groups/[groupId]/@modal/expense-modal.tsx

@@ -0,0 +1,30 @@
+'use client'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { useRouter } from 'next/navigation'
+import { ReactNode } from 'react'
+
+export function ExpenseModal({
+  children,
+  title,
+}: {
+  children: ReactNode
+  title: ReactNode
+}) {
+  const router = useRouter()
+
+  return (
+    <Dialog open onOpenChange={() => router.back()}>
+      <DialogContent className="w-full max-w-screen-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -1,8 +1,8 @@
+import { ExpensePage } from '@/app/groups/[groupId]/expenses/expense-page'
 import { ExpenseForm } from '@/components/expense-form'
-import { deleteExpense, getExpense, getGroup, updateExpense } from '@/lib/api'
-import { expenseFormSchema } from '@/lib/schemas'
+import { getExpense, getGroup } from '@/lib/api'
 import { Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
+import { notFound } from 'next/navigation'
 
 export const metadata: Metadata = {
   title: 'Edit expense',
@@ -18,25 +18,9 @@ export default async function EditExpensePage({
   const expense = await getExpense(groupId, expenseId)
   if (!expense) notFound()
 
-  async function updateExpenseAction(values: unknown) {
-    'use server'
-    const expenseFormValues = expenseFormSchema.parse(values)
-    await updateExpense(groupId, expenseId, expenseFormValues)
-    redirect(`/groups/${groupId}`)
-  }
-
-  async function deleteExpenseAction() {
-    'use server'
-    await deleteExpense(expenseId)
-    redirect(`/groups/${groupId}`)
-  }
-
   return (
-    <ExpenseForm
-      group={group}
-      expense={expense}
-      onSubmit={updateExpenseAction}
-      onDelete={deleteExpenseAction}
-    />
+    <ExpensePage title="Edit expense">
+      <ExpenseForm group={group} expense={expense} />
+    </ExpensePage>
   )
 }

src/app/groups/[groupId]/expenses/actions.ts

@@ -0,0 +1,28 @@
+'use server'
+import { createExpense, deleteExpense, updateExpense } from '@/lib/api'
+import { expenseFormSchema } from '@/lib/schemas'
+import { redirect } from 'next/navigation'
+
+export async function createExpenseAction(groupId: string, values: unknown) {
+  'use server'
+  const expenseFormValues = expenseFormSchema.parse(values)
+  await createExpense(expenseFormValues, groupId)
+  redirect(`/groups/${groupId}`)
+}
+
+export async function updateExpenseAction(
+  groupId: string,
+  expenseId: string,
+  values: unknown,
+) {
+  'use server'
+  const expenseFormValues = expenseFormSchema.parse(values)
+  await updateExpense(groupId, expenseId, expenseFormValues)
+  redirect(`/groups/${groupId}`)
+}
+
+export async function deleteExpenseAction(groupId: string, expenseId: string) {
+  'use server'
+  await deleteExpense(expenseId)
+  redirect(`/groups/${groupId}`)
+}

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

@@ -1,14 +1,14 @@
+import { ExpensePage } from '@/app/groups/[groupId]/expenses/expense-page'
 import { ExpenseForm } from '@/components/expense-form'
-import { createExpense, getGroup } from '@/lib/api'
-import { expenseFormSchema } from '@/lib/schemas'
+import { getGroup } from '@/lib/api'
 import { Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
+import { notFound } from 'next/navigation'
 
 export const metadata: Metadata = {
   title: 'Create expense',
 }
 
-export default async function ExpensePage({
+export default async function CreateExpensePage({
   params: { groupId },
 }: {
   params: { groupId: string }
@@ -16,12 +16,9 @@ export default async function ExpensePage({
   const group = await getGroup(groupId)
   if (!group) notFound()
 
-  async function createExpenseAction(values: unknown) {
-    'use server'
-    const expenseFormValues = expenseFormSchema.parse(values)
-    await createExpense(expenseFormValues, groupId)
-    redirect(`/groups/${groupId}`)
-  }
-
-  return <ExpenseForm group={group} onSubmit={createExpenseAction} />
+  return (
+    <ExpensePage title="Create expense">
+      <ExpenseForm group={group} />
+    </ExpensePage>
+  )
 }

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

@@ -0,0 +1,19 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { ReactNode } from 'react'
+
+export function ExpensePage({
+  children,
+  title,
+}: {
+  children: ReactNode
+  title: ReactNode
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export default function GroupExpensesLayout({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return <>{children}</>
+}

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

@@ -5,12 +5,13 @@ 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, ReactNode } from 'react'
 
 type Props = {
   params: {
     groupId: string
   }
+  modal: ReactNode
 }
 
 export async function generateMetadata({
@@ -28,6 +29,7 @@ export async function generateMetadata({
 
 export default async function GroupLayout({
   children,
+  modal,
   params: { groupId },
 }: PropsWithChildren<Props>) {
   const group = await getGroup(groupId)
@@ -47,6 +49,7 @@ export default async function GroupLayout({
       </div>
 
       {children}
+      {modal}
 
       <SaveGroupLocally group={{ id: group.id, name: group.name }} />
     </>