From f53d1173329f92fcbade3dbe84f28cd594b7a0d2 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Thu, 12 Oct 2023 14:59:43 +0100
Subject: [PATCH] Update error page styles (#210)

Co-authored-by: Stephanie Dietz <49788645+StephDietz@users.noreply.github.com>
---
 .../app/dashboard/invoices/[id]/edit/not-found.tsx   |  6 +++---
 dashboard/15-final/app/dashboard/invoices/error.tsx  |  2 +-
 dashboard/15-final/app/lib/actions.ts                | 12 ++++++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

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
index 49f490d..444667f 100644
--- a/dashboard/15-final/app/dashboard/invoices/[id]/edit/not-found.tsx
+++ b/dashboard/15-final/app/dashboard/invoices/[id]/edit/not-found.tsx
@@ -4,12 +4,12 @@ import { FaceFrownIcon } from '@heroicons/react/24/outline';
 export default function NotFound() {
   return (
     <main className="flex h-full flex-col items-center justify-center gap-2">
-      <FaceFrownIcon className="w-12 text-gray-400" />
-      <h2 className="text-lg font-semibold">Not Found</h2>
+      <FaceFrownIcon className="w-10 text-gray-400" />
+      <h2 className="text-xl font-semibold">404 Not Found</h2>
       <p>Could not find the requested invoice.</p>
       <Link
         href="/dashboard/invoices"
-        className="mt-4 rounded-md bg-black px-4 py-2 text-sm text-white"
+        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
       >
         Go Back
       </Link>
diff --git a/dashboard/15-final/app/dashboard/invoices/error.tsx b/dashboard/15-final/app/dashboard/invoices/error.tsx
index d01f433..551faa9 100644
--- a/dashboard/15-final/app/dashboard/invoices/error.tsx
+++ b/dashboard/15-final/app/dashboard/invoices/error.tsx
@@ -18,7 +18,7 @@ export default function Error({
     <main className="flex h-full flex-col items-center justify-center">
       <h2 className="text-center">Something went wrong!</h2>
       <button
-        className="mt-4 rounded-md bg-black px-4 py-2 text-sm text-white"
+        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
         onClick={
           // Attempt to recover by trying to re-render the invoices route
           () => reset()
diff --git a/dashboard/15-final/app/lib/actions.ts b/dashboard/15-final/app/lib/actions.ts
index 5496177..4850ea3 100644
--- a/dashboard/15-final/app/lib/actions.ts
+++ b/dashboard/15-final/app/lib/actions.ts
@@ -13,7 +13,9 @@ const FormSchema = z.object({
   amount: z.coerce
     .number()
     .gt(0, { message: 'Please enter an amount greater than $0.' }),
-  status: z.enum(['pending', 'paid']),
+  status: z.enum(['pending', 'paid'], {
+    invalid_type_error: 'Please select an invoice status.',
+  }),
   date: z.string(),
 });
 
@@ -61,7 +63,7 @@ export async function createInvoice(prevState: State, formData: FormData) {
   } catch (error) {
     // If a database error occurs, return a more specific error.
     return {
-      message: 'Database error: Failed to create invoice.',
+      message: 'Database Error: Failed to Create Invoice.',
     };
   }
 
@@ -95,7 +97,7 @@ export async function updateInvoice(prevState: State, formData: FormData) {
       WHERE id = ${id}
     `;
   } catch (error) {
-    return { message: 'Database error: Failed to update invoice.' };
+    return { message: 'Database Error: Failed to Update Invoice.' };
   }
 
   revalidatePath('/dashboard/invoices');
@@ -103,6 +105,8 @@ export async function updateInvoice(prevState: State, formData: FormData) {
 }
 
 export async function deleteInvoice(formData: FormData) {
+  throw new Error('Failed to Delete Invoice');
+
   const { id } = DeleteInvoice.parse({
     id: formData.get('id'),
   });
@@ -112,6 +116,6 @@ export async function deleteInvoice(formData: FormData) {
     revalidatePath('/dashboard/invoices');
     return { message: 'Deleted Invoice' };
   } catch (error) {
-    return { message: 'Database error: Failed to delete invoice.' };
+    return { message: 'Database Error: Failed to Delete Invoice.' };
   }
 }