Fix form bugs

dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx

@@ -1,19 +1,30 @@
-import { fetchInvoiceById, fetchCustomerNames } from '@/app/lib/data';
-import { notFound } from 'next/navigation';
 import Form from '@/app/ui/invoices/edit-form';
+import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
+import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
+import { notFound } from 'next/navigation';
 
 export default async function Page({ params }: { params: { id: string } }) {
   const id = params.id;
   const invoice = await fetchInvoiceById(id);
-  const customerNames = await fetchCustomerNames();
+  const customers = await fetchCustomers();
 
   if (!invoice) {
     notFound();
   }
 
   return (
     <main>
-      <Form invoice={invoice} customerNames={customerNames} id={id} />
+      <Breadcrumbs
+        breadcrumbs={[
+          { label: 'Invoices', href: '/dashboard/invoices' },
+          {
+            label: 'Edit Invoice',
+            href: `/dashboard/invoices/${id}/edit`,
+            active: true,
+          },
+        ]}
+      />
+      <Form invoice={invoice} customers={customers} />
     </main>
   );
 }

dashboard/15-final/app/dashboard/invoices/create/page.tsx

@@ -1,12 +1,23 @@
-import { fetchCustomerNames } from '@/app/lib/data';
+import { fetchCustomers } from '@/app/lib/data';
 import Form from '@/app/ui/invoices/create-form';
+import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 
 export default async function Page() {
-  const customerNames = await fetchCustomerNames();
+  const customers = await fetchCustomers();
 
   return (
     <main>
-      <Form customerNames={customerNames} />
+      <Breadcrumbs
+        breadcrumbs={[
+          { label: 'Invoices', href: '/dashboard/invoices' },
+          {
+            label: 'Create Invoice',
+            href: '/dashboard/invoices/create',
+            active: true,
+          },
+        ]}
+      />
+      <Form customers={customers} />
     </main>
   );
 }

dashboard/15-final/app/lib/actions.ts

@@ -58,15 +58,16 @@ export async function createInvoice(prevState: State, formData: FormData) {
       INSERT INTO invoices (customer_id, amount, status, date)
       VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
     `;
-
-    revalidatePath('/dashboard/invoices');
-    redirect('/dashboard/invoices');
   } catch (error) {
     // If a database error occurs, return a more specific error.
     return {
       message: 'Database error: Failed to create invoice.',
     };
   }
+
+  // Revalidate cache and redirect user to invoices page
+  revalidatePath('/dashboard/invoices');
+  redirect('/dashboard/invoices');
 }
 
 export async function updateInvoice(prevState: State, formData: FormData) {
@@ -93,12 +94,12 @@ export async function updateInvoice(prevState: State, formData: FormData) {
       SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
       WHERE id = ${id}
     `;
-
-    revalidatePath('/dashboard/invoices');
-    redirect('/dashboard/invoices');
   } catch (error) {
     return { message: 'Database error: Failed to update invoice.' };
   }
+
+  revalidatePath('/dashboard/invoices');
+  redirect('/dashboard/invoices');
 }
 
 export async function deleteInvoice(formData: FormData) {

dashboard/15-final/app/lib/data.ts

@@ -1,13 +1,13 @@
 import { sql } from '@vercel/postgres';
-import { formatCurrency } from './utils';
 import {
-  Revenue,
-  InvoicesTable,
+  CustomerField,
   CustomersTable,
   InvoiceForm,
-  CustomerName,
+  InvoicesTable,
   LatestInvoiceRaw,
+  Revenue,
 } from './definitions';
+import { formatCurrency } from './utils';
 
 export async function fetchRevenue() {
   try {
@@ -141,11 +141,10 @@ export async function fetchInvoiceById(id: string) {
     const data = await sql<InvoiceForm>`
       SELECT
         invoices.id,
+        invoices.customer_id,
         invoices.amount,
-        invoices.status,
-        customers.name
+        invoices.status
       FROM invoices
-      JOIN customers ON invoices.customer_id = customers.id
       WHERE invoices.id = ${id};
     `;
 
@@ -162,9 +161,9 @@ export async function fetchInvoiceById(id: string) {
   }
 }
 
-export async function fetchCustomerNames() {
+export async function fetchCustomers() {
   try {
-    const data = await sql<CustomerName>`
+    const data = await sql<CustomerField>`
       SELECT
         id,
         name

dashboard/15-final/app/lib/definitions.ts

@@ -75,14 +75,14 @@ export type FormattedCustomersTable = {
   total_paid: string;
 };
 
-export type CustomerName = {
+export type CustomerField = {
   id: string;
   name: string;
 };
 
 export type InvoiceForm = {
   id: string;
-  name: string;
+  customer_id: string;
   amount: number;
   status: 'pending' | 'paid';
 };

dashboard/15-final/app/ui/invoices/breadcrumbs.tsx

@@ -8,7 +8,11 @@ interface Breadcrumb {
   active?: boolean;
 }
 
-export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: Breadcrumb[] }) {
+export default function Breadcrumbs({
+  breadcrumbs,
+}: {
+  breadcrumbs: Breadcrumb[];
+}) {
   return (
     <nav aria-label="Breadcrumb" className="mb-6 block">
       <ol className={clsx(lusitana.className, 'flex text-xl md:text-2xl')}>