From 3e4959dd9d2701f857caec51b29d4f647964e37d Mon Sep 17 00:00:00 2001
From: Jakub Knetl <knetl.j@gmail.com>
Date: Wed, 3 Jan 2024 09:38:23 +0100
Subject: [PATCH] Chapter 12 - Implement deleting invoices

---
 app/lib/actions.ts          | 5 +++++
 app/ui/invoices/buttons.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/lib/actions.ts b/app/lib/actions.ts
index d9ad35a..88cbcdf 100644
--- a/app/lib/actions.ts
+++ b/app/lib/actions.ts
@@ -55,4 +55,9 @@ export async function updateInvoice(id: string, formData: FormData) {
 
     revalidatePath('/dashboard/invoices');
     redirect('/dashboard/invoices');
+}
+
+export async function deleteInvoice(id: string) {
+    await sql`DELETE FROM invoices WHERE id = ${id}`;
+    revalidatePath('/dashboard/invoices');
 }
\ No newline at end of file
diff --git a/app/ui/invoices/buttons.tsx b/app/ui/invoices/buttons.tsx
index 736d804..42298ec 100644
--- a/app/ui/invoices/buttons.tsx
+++ b/app/ui/invoices/buttons.tsx
@@ -1,5 +1,6 @@
 import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
+import {deleteInvoice} from "@/app/lib/actions";
 
 export function CreateInvoice() {
   return (
@@ -25,12 +26,13 @@ export function UpdateInvoice({ id }: { id: string }) {
 }
 
 export function DeleteInvoice({ id }: { id: string }) {
+  const deleteInvoiceWithId = deleteInvoice.bind(null, id);
   return (
-    <>
+    <form action={deleteInvoiceWithId}>
       <button className="rounded-md border p-2 hover:bg-gray-100">
         <span className="sr-only">Delete</span>
         <TrashIcon className="w-5" />
       </button>
-    </>
+    </form>
   );
 }