Create a Dynamic Route: Create a new dynamic route segment, including the invoice id. This way, we tell the app which invoice we are working with;
Read the Invoice id: Grab the invoice id from the page parameters;
Fetch Specific Invoice: Get the information about the chosen invoice from the database;
Update Database: After making any necessary changes, update the invoice data in the database.

Back to the Project

1. Create a Dynamic Route

Based on changing data, we can make Dynamic Route Segments when we want flexible routes. Wrap a folder's name in square brackets to create a dynamic route. For instance, use [id], [post], or [slug] when we want variable segments in the route.

Navigate to the /invoices folder and create a new dynamic route named [id];
Add a new route called' edit' inside the /invoices/[id] folder. Include a page.tsx.

Result:

Let's examine the Table component in app/ui/invoices/table.tsx. We can observe that UpdateInvoice receives the invoice id.

app/ui/invoices/table.tsx

// ...

export default async function InvoicesTable({
  query,
  currentPage,
}: {
  query: string;
  currentPage: number;
}) {
  const invoices = await fetchFilteredInvoices(query, currentPage);

  return (
    <div className="mt-6 flow-root">
      <div className="inline-block min-w-full align-middle">
        <div className="rounded-xl bg-neutral-700 p-2 md:pt-0 ">
          <div className="md:hidden">{/* ... */}</div>
          <table className="hidden min-w-full text-gray-900 md:table">
            <thead className="rounded-lg text-left text-sm font-normal">
              {/* ... */}
            </thead>
            <tbody className="bg-neutral-700">
              {invoices?.map((invoice) => (
                <tr
                  key={invoice.id}
                  className="w-full border-b py-3 text-sm last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg"
                >
                  {/* ... */}
                  <td className="whitespace-nowrap py-3 pl-6 pr-3">
                    <div className="flex justify-end gap-3">
                      <UpdateInvoice id={invoice.id} />
                      <DeleteInvoice id={invoice.id} />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Go to the <UpdateInvoice /> (app/ui/invoices/buttons.tsx) component. We see that we use the id as a part of the href value.

app/ui/invoices/buttons.tsx

// ...

export function UpdateInvoice({ id }: { id: string }) {
  return (
    <Link
      href={`/dashboard/invoices/${id}/edit`}
      className="rounded-md border bg-sky-700 p-2 text-white hover:bg-white hover:text-neutral-900"
    >
      <PencilSquareIcon className="w-5" />
    </Link>
  );
}

// ...

2. Read the Invoice id

Insert the follwoing code into app/dashboard/invoices/[id]/edit/page.tsx.

It's similar to the create invoice page but uses a different form (from edit-form.tsx). The form should have default values for user's name, invoice amount, and status. To set these, we will fetch the specific invoice using its id. Page components accept a params prop. We modify the page to use this prop, allowing access to the id for fetching details.

app/dashboard/invoices/[id]/edit/page.tsx

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;

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: 'Invoices', href: '/dashboard/invoices' },
          {
            label: 'Edit Invoice',
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      <Form invoice={invoice} sellers={sellers} />
    </main>
  );
}

3. Fetch Specific Invoice

Next, we import new functions called fetchInvoiceById and fetchSellers.

fetchInvoiceById returns data for a specific invoice;
fetchSellers returns sellers for the form dropdown showing all sellers.

We can efficiently fetch both the invoice and sellers simultaneously using Promise.all.

app/dashboard/invoices/[id]/edit/page.tsx

import Form from '@/app/ui/invoices/edit-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchSellers, fetchInvoiceById } from '@/app/lib/data';

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;

  const [invoice, sellers] = await Promise.all([
    fetchInvoiceById(id),
    fetchSellers(),
  ]);

  return (
    <main>
      {/* ... */}
    </main>
  );
}

Let's test it! We can open the invoices page and click the edit button (pen symbol). This should redirect us to the form with a prefilled invoice.

4. Update Database

We need to send the id to the Server Action to update the correct record in the database. Here's how you can do it effectively:

Employ JS bind to pass the id to the Server Action. This ensures that any values sent to the Server Action are appropriately encoded.

Avoid passing id as an argument directly in the form action like this:

app/ui/invoices/edit-form.tsx

// ...
import { Button } from '@/app/ui/button';
import { updateInvoice } from '@/app/lib/actions';

export default function EditInvoiceForm({
  invoice,
  sellers,
}: {
  invoice: InvoiceForm;
  sellers: SellerField[];
}) {
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);

  return (
    <form action={updateInvoiceWithId}>
      <div className="rounded-md bg-neutral-700 p-4 md:p-6">
        {/* ... */}
      </div>
    </form>
  );
}

Next, we will proceed with the actions and create an action for updating the invoice.

app/lib/actions.ts

// ...

// Define specific schemas for creating invoices
const CreateInvoice = FormSchema.omit({ id: true, date: true });
const UpdateInvoice = FormSchema.omit({ id: true, date: true });

export async function createInvoice(formData: FormData) {
  // ...
}

export async function updateInvoice(id: string, formData: FormData) {
  const { sellerId, amount, status } = UpdateInvoice.parse({
    sellerId: formData.get('sellerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  const amountInCents = amount * 100;

  await sql`
    UPDATE invoices
    SET seller_id = ${sellerId}, amount = ${amountInCents}, status = ${status}
    WHERE id = ${id}
  `;

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

Try it out! After editing an invoice, submit the form, and you should be redirected to the invoices page with the updated invoice.

In Practice

Все було зрозуміло?

Секція 6. Розділ 6

Зміст курсу

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

Project Set Up Project File-Folder Strcture Styling Approaches Adding the Global CSS File Tailwind Styling CSS Modules Conditionally Applying Styles Custom Google Fonts Challenge: Adding Custom Google Font Images

3. Pages and Layouts

How Routing Works Challenge: Creating Page Creating a Common Layout Navigation Optimization Creating Active Links

4. Deployment and Database

Accounts Set Up Project Deployment Project Database Data Population

5. Working with Data

How to Fetch Data Working with the Dashboard Page Practice and Challenge: Retrieving Data Dynamic vs Static Rendering Loaders Specific Parts Loaders Challenge: Skeleton Loader Grouping Components for Loaders

6. Advanced Features

Invoices Page Search Functionality Pagination Server Actions Creating Item Updating Item Deleting Item Challenge: Form Validation

7. Authentication

Understanding Authentication Login Route NextAuth.js Authentication Configuration & Route Protection Password Hashing & Credentials Sign-in Functionality Connecting UI & Functionality Logout Functionality What's Next?

Next.js 14

Updating Item

Update an Invoice - Simple Steps

When updating an invoice, the process is quite similar to creating one. Here's a breakdown:

Create a Dynamic Route: Create a new dynamic route segment, including the invoice id. This way, we tell the app which invoice we are working with;
Read the Invoice id: Grab the invoice id from the page parameters;
Fetch Specific Invoice: Get the information about the chosen invoice from the database;
Update Database: After making any necessary changes, update the invoice data in the database.

Back to the Project

1. Create a Dynamic Route

Navigate to the /invoices folder and create a new dynamic route named [id];
Add a new route called' edit' inside the /invoices/[id] folder. Include a page.tsx.

Result:

Let's examine the Table component in app/ui/invoices/table.tsx. We can observe that UpdateInvoice receives the invoice id.

app/ui/invoices/table.tsx

// ...

export default async function InvoicesTable({
  query,
  currentPage,
}: {
  query: string;
  currentPage: number;
}) {
  const invoices = await fetchFilteredInvoices(query, currentPage);

  return (
    <div className="mt-6 flow-root">
      <div className="inline-block min-w-full align-middle">
        <div className="rounded-xl bg-neutral-700 p-2 md:pt-0 ">
          <div className="md:hidden">{/* ... */}</div>
          <table className="hidden min-w-full text-gray-900 md:table">
            <thead className="rounded-lg text-left text-sm font-normal">
              {/* ... */}
            </thead>
            <tbody className="bg-neutral-700">
              {invoices?.map((invoice) => (
                <tr
                  key={invoice.id}
                  className="w-full border-b py-3 text-sm last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg"
                >
                  {/* ... */}
                  <td className="whitespace-nowrap py-3 pl-6 pr-3">
                    <div className="flex justify-end gap-3">
                      <UpdateInvoice id={invoice.id} />
                      <DeleteInvoice id={invoice.id} />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Go to the <UpdateInvoice /> (app/ui/invoices/buttons.tsx) component. We see that we use the id as a part of the href value.

app/ui/invoices/buttons.tsx

// ...

export function UpdateInvoice({ id }: { id: string }) {
  return (
    <Link
      href={`/dashboard/invoices/${id}/edit`}
      className="rounded-md border bg-sky-700 p-2 text-white hover:bg-white hover:text-neutral-900"
    >
      <PencilSquareIcon className="w-5" />
    </Link>
  );
}

// ...

2. Read the Invoice id

Insert the follwoing code into app/dashboard/invoices/[id]/edit/page.tsx.

app/dashboard/invoices/[id]/edit/page.tsx

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;

  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: 'Invoices', href: '/dashboard/invoices' },
          {
            label: 'Edit Invoice',
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      <Form invoice={invoice} sellers={sellers} />
    </main>
  );
}

3. Fetch Specific Invoice

Next, we import new functions called fetchInvoiceById and fetchSellers.

fetchInvoiceById returns data for a specific invoice;
fetchSellers returns sellers for the form dropdown showing all sellers.

We can efficiently fetch both the invoice and sellers simultaneously using Promise.all.

app/dashboard/invoices/[id]/edit/page.tsx

import Form from '@/app/ui/invoices/edit-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchSellers, fetchInvoiceById } from '@/app/lib/data';

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;

  const [invoice, sellers] = await Promise.all([
    fetchInvoiceById(id),
    fetchSellers(),
  ]);

  return (
    <main>
      {/* ... */}
    </main>
  );
}

Let's test it! We can open the invoices page and click the edit button (pen symbol). This should redirect us to the form with a prefilled invoice.

4. Update Database

We need to send the id to the Server Action to update the correct record in the database. Here's how you can do it effectively:

Employ JS bind to pass the id to the Server Action. This ensures that any values sent to the Server Action are appropriately encoded.

Avoid passing id as an argument directly in the form action like this:

app/ui/invoices/edit-form.tsx

// ...
import { Button } from '@/app/ui/button';
import { updateInvoice } from '@/app/lib/actions';

export default function EditInvoiceForm({
  invoice,
  sellers,
}: {
  invoice: InvoiceForm;
  sellers: SellerField[];
}) {
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);

  return (
    <form action={updateInvoiceWithId}>
      <div className="rounded-md bg-neutral-700 p-4 md:p-6">
        {/* ... */}
      </div>
    </form>
  );
}

Next, we will proceed with the actions and create an action for updating the invoice.

app/lib/actions.ts

// ...

// Define specific schemas for creating invoices
const CreateInvoice = FormSchema.omit({ id: true, date: true });
const UpdateInvoice = FormSchema.omit({ id: true, date: true });

export async function createInvoice(formData: FormData) {
  // ...
}

export async function updateInvoice(id: string, formData: FormData) {
  const { sellerId, amount, status } = UpdateInvoice.parse({
    sellerId: formData.get('sellerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  const amountInCents = amount * 100;

  await sql`
    UPDATE invoices
    SET seller_id = ${sellerId}, amount = ${amountInCents}, status = ${status}
    WHERE id = ${id}
  `;

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

Try it out! After editing an invoice, submit the form, and you should be redirected to the invoices page with the updated invoice.

In Practice

Все було зрозуміло?

Секція 6. Розділ 6