📜 Forms Implementation

Introduction

In this article I will show the full implementation of all form components.

Overview
FolderStructure
Card
ActionState
TicketUpsertForm
SubmitButton
FieldError
UpsertTicket
Zod Validation
Form
useActionFeedback
Toast Message

---

FolderStructure

Implementing a form, will need a few components. One way to organize them, is shown in the diagram below:

src/
├── app/
├── components/
│   └── form/
│       ├── hooks/
│       │   └── use-action-feedback.ts
│       ├── utils/
│       │   └── to-action-state.ts
│       ├── field-error.tsx
│       ├── form.tsx
│       └── submit-button.tsx
└── features/
    └── ticket/
        ├── actions/
        │   └── upsert-ticket.ts
        └── components/
            └── ticket-upsert-form.tsx

---

Card

For sharing UI across forms.

Having an UI that is consistent across the whole application should always be a goal when developing. Thats why I am going to start with creating a Card Component, which I then can reuse later for different kind of forms that I can then pass down as a parameter. This card is technically not part of the form components but it acts as a wrapper component for a consistent UI.

Since this Card Component can be used in different applications, I am going to place it to:

src/components/card-compact.tsx

Details
👨🏽‍💻 Card Component

---

ActionState

Messenger between form submit and components

src/components/form/utils/to-action-state.ts

Details
👨🏽‍💻 to-action-state.ts
📜 ActionState explained

---

TicketUpsertForm

Custom form for or update or create a ticket

src/features/ticket/components/ticket-upsert-form.tsx

Details
👨🏽‍💻 ticket-upsert-from.tsx
📜 TicketUpsertForm explained

SubmitButton

src/components/form/submit-button.tsx

Details
👨🏽‍💻 submit-button.tsx
📜 SubmitButton explained

FieldError

Message that shows the zod validation issue to the user

src/components/form/field-error.tsx

Details
👨🏽‍💻 field-error.tsx
📜 FieldError

---

UpsertTicket

The function that gets called when submitted which will try to update the database

src/features/ticket/actions/upsert-ticket.ts

Details
👨🏽‍💻 upsert-ticket.ts
📜 UpsertTicket explained

Zod Validation

With zod I can easily check if the user input matches my criteria’s. It’s important to mention that the zod schema needs to be synced with the prisma schema.

Example of a zod schema

const upsertTicketSchema = z.object({
  title: z.string().min(1, "title can't be empty").max(191),
  content: z.string().min(1).max(1024),
});

The corresponding prisma schema content variable

model Ticket {
  content   String       @db.VarChar(1024)
}

And the parse attempt that might throw an error

try {
    const data = upsertTicketSchema.parse({
      title: formData.get("title"),
      content: formData.get("content"),
    });
  } catch (error) {
    return fromErrorToActionState(error, formData);
  }

---

Form

For sharing logic across forms.

All forms across the whole application should not only share the same UI but also the same behavior. Whenever the submitting fails or succeeds, the user should be notified via a toaster message. Since I don’t want to implement the logic for the toaster in every single form, I will abstract it into a reusable form component.

src/components/form/form.tsx

Details
👨🏽‍💻 form.tsx
📜 Form explained

useActionFeedback

src/components/form/hooks/use-action-feedback.ts

Details
👨🏽‍💻 use-action-feedback.tsx
📜 useActionFeedback explained

---

Toast Message

The toaster message can be installed via shadcn

Sources
https://ui.shadcn.com/docs/components/radix/sonner
https://sonner.emilkowal.ski/

And should be placed in the root layout.tsx

<ThemeProvider>
    <Header></Header>
    <main>
        {children}
    </main>
    <Toaster expand />
</ThemeProvider>

Note: The expand parameter will allow the toaster messages to be displayed on top of each other instead of being stacked behind each other.

---

Source
🎥 Road to Next Video > Forms with Server Actions
🎥 Road to Next Video > Forms