From 32871e3ff4fc64752fef2783300130e99d010df7 Mon Sep 17 00:00:00 2001
From: Jakub Knetl <knetl.j@gmail.com>
Date: Wed, 3 Jan 2024 09:36:23 +0100
Subject: [PATCH] Chapter 12 - Implement updating an invoice

---
 app/dashboard/invoices/[id]/edit/page.tsx | 26 +++++++++++++++++++++++
 app/lib/actions.ts                        | 22 +++++++++++++++++++
 app/ui/invoices/buttons.tsx               |  2 +-
 app/ui/invoices/edit-form.tsx             |  5 ++++-
 4 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 app/dashboard/invoices/[id]/edit/page.tsx

diff --git a/app/dashboard/invoices/[id]/edit/page.tsx b/app/dashboard/invoices/[id]/edit/page.tsx
new file mode 100644
index 0000000..72f9a6b
--- /dev/null
+++ b/app/dashboard/invoices/[id]/edit/page.tsx
@@ -0,0 +1,26 @@
+import Form from '@/app/ui/invoices/edit-form';
+import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
+import {fetchCustomers, fetchInvoiceById} from '@/app/lib/data';
+
+export default async function Page({ params }: { params: { id: string } }) {
+    const id = params.id;
+    const [invoice, customers] = await Promise.all([
+        fetchInvoiceById(id),
+        fetchCustomers(),
+    ]);
+    return (
+        <main>
+            <Breadcrumbs
+                breadcrumbs={[
+                    { label: 'Invoices', href: '/dashboard/invoices' },
+                    {
+                        label: 'Edit Invoice',
+                        href: `/dashboard/invoices/${id}/edit`,
+                        active: true,
+                    },
+                ]}
+            />
+            <Form invoice={invoice} customers={customers} />
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/app/lib/actions.ts b/app/lib/actions.ts
index e4f9bd6..d9ad35a 100644
--- a/app/lib/actions.ts
+++ b/app/lib/actions.ts
@@ -13,6 +13,8 @@ const FormSchema = z.object({
     date: z.string(),
 });
 
+const UpdateInvoice = FormSchema.omit({ id: true, date: true });
+
 const CreateInvoice = FormSchema.omit({ id: true, date: true });
 
 export async function createInvoice(formData: FormData) {
@@ -31,6 +33,26 @@ export async function createInvoice(formData: FormData) {
     VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
   `;
 
+    revalidatePath('/dashboard/invoices');
+    redirect('/dashboard/invoices');
+}
+
+
+export async function updateInvoice(id: string, formData: FormData) {
+    const { customerId, amount, status } = UpdateInvoice.parse({
+        customerId: formData.get('customerId'),
+        amount: formData.get('amount'),
+        status: formData.get('status'),
+    });
+
+    const amountInCents = amount * 100;
+
+    await sql`
+    UPDATE invoices
+    SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
+    WHERE id = ${id}
+  `;
+
     revalidatePath('/dashboard/invoices');
     redirect('/dashboard/invoices');
 }
\ No newline at end of file
diff --git a/app/ui/invoices/buttons.tsx b/app/ui/invoices/buttons.tsx
index 0edfca3..736d804 100644
--- a/app/ui/invoices/buttons.tsx
+++ b/app/ui/invoices/buttons.tsx
@@ -16,7 +16,7 @@ export function CreateInvoice() {
 export function UpdateInvoice({ id }: { id: string }) {
   return (
     <Link
-      href="/dashboard/invoices"
+      href={`/dashboard/invoices/${id}/edit`}
       className="rounded-md border p-2 hover:bg-gray-100"
     >
       <PencilIcon className="w-5" />
diff --git a/app/ui/invoices/edit-form.tsx b/app/ui/invoices/edit-form.tsx
index 8673667..46f356a 100644
--- a/app/ui/invoices/edit-form.tsx
+++ b/app/ui/invoices/edit-form.tsx
@@ -9,6 +9,7 @@ import {
 } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { Button } from '@/app/ui/button';
+import { updateInvoice } from '@/app/lib/actions';
 
 export default function EditInvoiceForm({
   invoice,
@@ -17,8 +18,10 @@ export default function EditInvoiceForm({
   invoice: InvoiceForm;
   customers: CustomerField[];
 }) {
+
+  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
   return (
-    <form>
+    <form action={updateInvoiceWithId}>
       <div className="rounded-md bg-gray-50 p-4 md:p-6">
         {/* Customer Name */}
         <div className="mb-4">