From 564f1920138dd7e5661f6320ad1821a756127f96 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Thu, 14 Dec 2023 17:04:39 -0500
Subject: [PATCH] Remove route interception

---
 .../[expenseId]/edit/page.tsx                 |  0
 .../{(.)expenses => expenses}/create/page.tsx |  0
 .../expenses/[expenseId]/edit/page.tsx        | 26 -------------------
 .../groups/[groupId]/expenses/create/page.tsx | 24 -----------------
 .../[groupId]/expenses/expense-list.tsx       |  9 +++++--
 src/app/groups/[groupId]/expenses/page.tsx    |  2 +-
 src/app/groups/[groupId]/not-found.tsx        |  8 ++++++
 src/components/expense-form.tsx               | 12 +++++----
 8 files changed, 23 insertions(+), 58 deletions(-)
 rename src/app/groups/[groupId]/@modal/{(.)expenses => expenses}/[expenseId]/edit/page.tsx (100%)
 rename src/app/groups/[groupId]/@modal/{(.)expenses => expenses}/create/page.tsx (100%)
 delete mode 100644 src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
 delete mode 100644 src/app/groups/[groupId]/expenses/create/page.tsx
 create mode 100644 src/app/groups/[groupId]/not-found.tsx

diff --git a/src/app/groups/[groupId]/@modal/(.)expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/@modal/expenses/[expenseId]/edit/page.tsx
similarity index 100%
rename from src/app/groups/[groupId]/@modal/(.)expenses/[expenseId]/edit/page.tsx
rename to src/app/groups/[groupId]/@modal/expenses/[expenseId]/edit/page.tsx
diff --git a/src/app/groups/[groupId]/@modal/(.)expenses/create/page.tsx b/src/app/groups/[groupId]/@modal/expenses/create/page.tsx
similarity index 100%
rename from src/app/groups/[groupId]/@modal/(.)expenses/create/page.tsx
rename to src/app/groups/[groupId]/@modal/expenses/create/page.tsx
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
deleted file mode 100644
index aeefaa5..0000000
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ExpensePage } from '@/app/groups/[groupId]/expenses/expense-page'
-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 (
-    <ExpensePage title="Edit expense">
-      <ExpenseForm group={group} expense={expense} />
-    </ExpensePage>
-  )
-}
diff --git a/src/app/groups/[groupId]/expenses/create/page.tsx b/src/app/groups/[groupId]/expenses/create/page.tsx
deleted file mode 100644
index 87f9c5b..0000000
--- a/src/app/groups/[groupId]/expenses/create/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ExpensePage } from '@/app/groups/[groupId]/expenses/expense-page'
-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 CreateExpensePage({
-  params: { groupId },
-}: {
-  params: { groupId: string }
-}) {
-  const group = await getGroup(groupId)
-  if (!group) notFound()
-
-  return (
-    <ExpensePage title="Create expense">
-      <ExpenseForm group={group} />
-    </ExpensePage>
-  )
-}
diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
index 798a5f8..adc6e7a 100644
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -33,7 +33,9 @@ export function ExpenseList({
           expense.isReimbursement && 'italic',
         )}
         onClick={() => {
-          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
+          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`, {
+            scroll: false,
+          })
         }}
       >
         <div>
@@ -66,7 +68,10 @@ export function ExpenseList({
             {currency} {(expense.amount / 100).toFixed(2)}
           </div>
           <Button size="icon" variant="link" className="-my-2" asChild>
-            <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
+            <Link
+              href={`/groups/${groupId}/expenses/${expense.id}/edit`}
+              scroll={false}
+            >
               <ChevronRight className="w-4 h-4" />
             </Link>
           </Button>
diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index 5285cb8..64987a3 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -35,7 +35,7 @@ export default async function GroupExpensesPage({
         </CardHeader>
         <CardHeader>
           <Button asChild size="icon">
-            <Link href={`/groups/${groupId}/expenses/create`}>
+            <Link href={`/groups/${groupId}/expenses/create`} scroll={false}>
               <Plus />
             </Link>
           </Button>
diff --git a/src/app/groups/[groupId]/not-found.tsx b/src/app/groups/[groupId]/not-found.tsx
new file mode 100644
index 0000000..bb00545
--- /dev/null
+++ b/src/app/groups/[groupId]/not-found.tsx
@@ -0,0 +1,8 @@
+'use client'
+import { redirect, useParams } from 'next/navigation'
+
+export default function NotFound() {
+  const { groupId } = useParams()
+  console.log('Not found!', { groupId })
+  redirect(`/groups/${groupId}`)
+}
diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index b4cf150..a5cae6e 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -65,11 +65,13 @@ export function ExpenseForm({ group, expense }: Props) {
   return (
     <Form {...form}>
       <form
-        onSubmit={form.handleSubmit((values) =>
-          expense
-            ? updateExpenseAction(group.id, expense.id, values)
-            : createExpenseAction(group.id, values),
-        )}
+        onSubmit={form.handleSubmit(async (values) => {
+          if (expense) {
+            await updateExpenseAction(group.id, expense.id, values)
+          } else {
+            await createExpenseAction(group.id, values)
+          }
+        })}
       >
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
           <FormField