Move breadcrumbs from <Form> up to the <Page> (#208)

* Move breadcrumbs up to page

* Use default exports

* Remove extra divs

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

@@ -1,6 +1,7 @@
 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';
 
 export default async function Page({ params }: { params: { id: string } }) {
   const id = params.id;
@@ -13,6 +14,16 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   return (
     <main>
+      <Breadcrumbs
+        breadcrumbs={[
+          { label: 'Invoices', href: '/dashboard/invoices' },
+          {
+            label: 'Edit Invoice',
+            href: `/dashboard/invoices/${id}/edit`,
+            active: true,
+          },
+        ]}
+      />
       <Form invoice={invoice} customerNames={customerNames} id={id} />
     </main>
   );

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

@@ -1,11 +1,22 @@
 import { fetchCustomerNames } 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();
 
   return (
     <main>
+      <Breadcrumbs
+        breadcrumbs={[
+          { label: 'Invoices', href: '/dashboard/invoices' },
+          {
+            label: 'Create Invoice',
+            href: '/dashboard/invoices/create',
+            active: true,
+          },
+        ]}
+      />
       <Form customerNames={customerNames} />
     </main>
   );

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

@@ -1,7 +1,7 @@
 import Pagination from '@/app/ui/invoices/pagination';
 import Search from '@/app/ui/search';
-import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import Table from '@/app/ui/invoices/table';
+import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import { lusitana } from '@/app/ui/fonts';
 import { InvoicesTableSkeleton } from '@/app/ui/dashboard/skeletons';
 import { Suspense } from 'react';
@@ -17,6 +17,7 @@ export default async function Page({
 }) {
   const query = searchParams?.query || '';
   const currentPage = Number(searchParams?.page) || 1;
+
   const totalPages = await fetchInvoicesPages(query);
 
   return (

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')}>

dashboard/15-final/app/ui/invoices/create-form.tsx

@@ -1,18 +1,17 @@
 'use client';
 
-import { createInvoice } from '@/app/lib/actions';
 import { CustomerName } from '@/app/lib/definitions';
 import Link from 'next/link';
-// @ts-ignore React types do not yet include useFormState
-import { experimental_useFormState as useFormState } from 'react-dom';
 import {
   CheckIcon,
   ClockIcon,
   CurrencyDollarIcon,
   UserCircleIcon,
 } from '@heroicons/react/24/outline';
 import { Button } from '../button';
-import { Breadcrumbs } from './breadcrumbs';
+import { createInvoice } from '@/app/lib/actions';
+// @ts-ignore React types do not yet include useFormState
+import { experimental_useFormState as useFormState } from 'react-dom';
 
 export default function Form({
   customerNames,
@@ -23,163 +22,148 @@ export default function Form({
   const [state, dispatch] = useFormState(createInvoice, initialState);
 
   return (
-    <div>
-      <Breadcrumbs
-        breadcrumbs={[
-          { label: 'Invoices', href: '/dashboard/invoices' },
-          {
-            label: 'Create Invoice',
-            href: '/dashboard/invoices/create',
-            active: true,
-          },
-        ]}
-      />
-      <form action={dispatch}>
-        <div className="rounded-md bg-gray-50 p-4 md:p-6">
-          {/* Customer Name */}
-          <div className="mb-4">
-            <label
-              htmlFor="customer"
-              className="mb-2 block text-sm font-medium"
+    <form action={dispatch}>
+      <div className="rounded-md bg-gray-50 p-4 md:p-6">
+        {/* Customer Name */}
+        <div className="mb-4">
+          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
+            Choose customer
+          </label>
+          <div className="relative">
+            <select
+              id="customer"
+              name="customerId"
+              className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              defaultValue=""
+              aria-describedby="customer-error"
             >
-              Choose customer
-            </label>
-            <div className="relative">
-              <select
-                id="customer"
-                name="customerId"
-                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-                defaultValue=""
-                aria-describedby="customer-error"
-              >
-                <option value="" disabled>
-                  Select a customer
+              <option value="" disabled>
+                Select a customer
+              </option>
+              {customerNames.map((name) => (
+                <option key={name.id} value={name.id}>
+                  {name.name}
                 </option>
-                {customerNames.map((name) => (
-                  <option key={name.id} value={name.id}>
-                    {name.name}
-                  </option>
-                ))}
-              </select>
-              <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
+              ))}
+            </select>
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
+          </div>
+
+          {state.errors?.customerId ? (
+            <div
+              id="customer-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.customerId.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
             </div>
+          ) : null}
+        </div>
 
-            {state.errors?.customerId ? (
-              <div
-                id="customer-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.customerId.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            ) : null}
+        {/* Invoice Amount */}
+        <div className="mb-4">
+          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
+            Choose an amount
+          </label>
+          <div className="relative mt-2 rounded-md">
+            <div className="relative">
+              <input
+                id="amount"
+                name="amount"
+                type="number"
+                placeholder="Enter USD amount"
+                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+                aria-describedby="amount-error"
+                style={
+                  { '-moz-appearance': 'textfield' } as React.CSSProperties
+                }
+              />
+              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
           </div>
 
-          {/* Invoice Amount */}
-          <div className="mb-4">
-            <label htmlFor="amount" className="mb-2 block text-sm font-medium">
-              Choose an amount
-            </label>
-            <div className="relative mt-2 rounded-md">
-              <div className="relative">
-                <input
-                  id="amount"
-                  name="amount"
-                  type="number"
-                  placeholder="Enter USD amount"
-                  className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
-                  aria-describedby="amount-error"
-                  style={
-                    { '-moz-appearance': 'textfield' } as React.CSSProperties
-                  }
-                />
-                <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-              </div>
+          {state.errors?.amount ? (
+            <div
+              id="amount-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.amount.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
             </div>
+          ) : null}
+        </div>
 
-            {state.errors?.amount ? (
-              <div
-                id="amount-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.amount.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
+        {/* Invoice Status */}
+        <div>
+          <label htmlFor="status" className="mb-2 block text-sm font-medium">
+            Set the invoice status
+          </label>
+          <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
+            <div className="flex gap-4">
+              <div className="flex items-center">
+                <input
+                  id="pending"
+                  name="status"
+                  type="radio"
+                  value="pending"
+                  className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+                />
+                <label
+                  htmlFor="pending"
+                  className="ml-2 flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300"
+                >
+                  Pending <ClockIcon className="h-4 w-4" />
+                </label>
               </div>
-            ) : null}
-          </div>
-
-          {/* Invoice Status */}
-          <div>
-            <label htmlFor="status" className="mb-2 block text-sm font-medium">
-              Set the invoice status
-            </label>
-            <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
-              <div className="flex gap-4">
-                <div className="flex items-center">
-                  <input
-                    id="pending"
-                    name="status"
-                    type="radio"
-                    value="pending"
-                    className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
-                  />
-                  <label
-                    htmlFor="pending"
-                    className="ml-2 flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300"
-                  >
-                    Pending <ClockIcon className="h-4 w-4" />
-                  </label>
-                </div>
-                <div className="flex items-center">
-                  <input
-                    id="paid"
-                    name="status"
-                    type="radio"
-                    value="paid"
-                    className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
-                  />
-                  <label
-                    htmlFor="paid"
-                    className="ml-2 flex items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white dark:text-gray-300"
-                  >
-                    Paid <CheckIcon className="h-4 w-4" />
-                  </label>
-                </div>
+              <div className="flex items-center">
+                <input
+                  id="paid"
+                  name="status"
+                  type="radio"
+                  value="paid"
+                  className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+                />
+                <label
+                  htmlFor="paid"
+                  className="ml-2 flex items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white dark:text-gray-300"
+                >
+                  Paid <CheckIcon className="h-4 w-4" />
+                </label>
               </div>
             </div>
-            {state.errors?.status ? (
-              <div
-                aria-describedby="status-error"
-                aria-live="polite"
-                className="mt-2 text-sm text-red-500"
-              >
-                {state.errors.status.map((error: string) => (
-                  <p key={error}>{error}</p>
-                ))}
-              </div>
-            ) : null}
           </div>
-
-          {state.message ? (
-            <div aria-live="polite" className="my-2 text-sm text-red-500">
-              <p>{state.message}</p>
+          {state.errors?.status ? (
+            <div
+              aria-describedby="status-error"
+              aria-live="polite"
+              className="mt-2 text-sm text-red-500"
+            >
+              {state.errors.status.map((error: string) => (
+                <p key={error}>{error}</p>
+              ))}
             </div>
           ) : null}
         </div>
-        <div className="mt-6 flex justify-end gap-4">
-          <Link
-            href="/dashboard/invoices"
-            className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
-          >
-            Cancel
-          </Link>
-          <Button type="submit">Create Invoice</Button>
-        </div>
-      </form>
-    </div>
+
+        {state.message ? (
+          <div aria-live="polite" className="my-2 text-sm text-red-500">
+            <p>{state.message}</p>
+          </div>
+        ) : null}
+      </div>
+      <div className="mt-6 flex justify-end gap-4">
+        <Link
+          href="/dashboard/invoices"
+          className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
+        >
+          Cancel
+        </Link>
+        <Button type="submit">Create Invoice</Button>
+      </div>
+    </form>
   );
 }