diff --git a/dashboard/15-final/app/dashboard/invoices/[id]/edit/not-found.tsx b/dashboard/15-final/app/dashboard/invoices/[id]/edit/not-found.tsx new file mode 100644 index 0000000..2cea3cb --- /dev/null +++ b/dashboard/15-final/app/dashboard/invoices/[id]/edit/not-found.tsx @@ -0,0 +1,15 @@ +import Link from 'next/link'; +import { FaceFrownIcon } from '@heroicons/react/24/outline'; + +export default function NotFound() { + return ( +
+ +

Not Found

+

Could not find the requested invoice.

+ +
+ ); +} diff --git a/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx b/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx index b3d5cc7..00beb03 100644 --- a/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx +++ b/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx @@ -1,6 +1,6 @@ -import { notFound } from 'next/navigation'; import { fetchInvoiceById, fetchAllCustomers } from '@/app/lib/data'; import { updateInvoice } from '@/app/lib/actions'; +import { notFound } from 'next/navigation'; export default async function Page({ params }: { params: { id: string } }) { const id = params.id; diff --git a/dashboard/15-final/app/dashboard/invoices/error.tsx b/dashboard/15-final/app/dashboard/invoices/error.tsx new file mode 100644 index 0000000..d01f433 --- /dev/null +++ b/dashboard/15-final/app/dashboard/invoices/error.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { useEffect } from 'react'; + +export default function Error({ + error, + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + useEffect(() => { + // Optionally log the error to an error reporting service + console.error(error); + }, [error]); + + return ( +
+

Something went wrong!

+ +
+ ); +} diff --git a/dashboard/15-final/app/lib/actions.ts b/dashboard/15-final/app/lib/actions.ts index 9309a69..ac5c77f 100644 --- a/dashboard/15-final/app/lib/actions.ts +++ b/dashboard/15-final/app/lib/actions.ts @@ -26,13 +26,17 @@ export async function createInvoice(formData: FormData) { const amountInCents = amount * 100; const date = new Date().toISOString().split('T')[0]; - await sql` - INSERT INTO invoices (customer_id, amount, status, date) - VALUES (${customerId}, ${amountInCents}, ${status}, ${date}) - `; + try { + await sql` + INSERT INTO invoices (customer_id, amount, status, date) + VALUES (${customerId}, ${amountInCents}, ${status}, ${date}) + `; - revalidatePath('/dashboard/invoices'); - redirect('/dashboard/invoices'); + revalidatePath('/dashboard/invoices'); + redirect('/dashboard/invoices'); + } catch (error) { + throw new Error('Failed to Create Invoice'); + } } export async function updateInvoice(formData: FormData) { @@ -45,14 +49,18 @@ export async function updateInvoice(formData: FormData) { const amountInCents = amount * 100; - await sql` - UPDATE invoices - SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status} - WHERE id = ${id} - `; + try { + await sql` + UPDATE invoices + SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status} + WHERE id = ${id} + `; - revalidatePath('/dashboard/invoices'); - redirect('/dashboard/invoices'); + revalidatePath('/dashboard/invoices'); + redirect('/dashboard/invoices'); + } catch (error) { + throw new Error('Failed to Update Invoice'); + } } export async function deleteInvoice(formData: FormData) { @@ -60,6 +68,11 @@ export async function deleteInvoice(formData: FormData) { id: formData.get('id'), }); - await sql`DELETE FROM invoices WHERE id = ${id}`; - revalidatePath('/dashboard/invoices'); + try { + await sql`DELETE FROM invoices WHERE id = ${id}`; + revalidatePath('/dashboard/invoices'); + return { message: 'Deleted Invoice' }; + } catch (error) { + throw new Error('Failed to Delete Invoice'); + } } diff --git a/dashboard/15-final/app/lib/data.ts b/dashboard/15-final/app/lib/data.ts index bbad858..62e0811 100644 --- a/dashboard/15-final/app/lib/data.ts +++ b/dashboard/15-final/app/lib/data.ts @@ -149,12 +149,14 @@ export async function fetchInvoiceById(id: string) { amount: invoice.amount / 100, })); - return invoice[0] as { - id: string; - amount: number; - status: string; - name: string; - }; + return invoice[0] as + | { + id: string; + amount: number; + status: string; + name: string; + } + | undefined; } catch (error) { console.error('Database Error:', error); throw new Error('Failed to fetch invoice.');