Валідація даних у Server Actions

"use server";

import { z } from "zod";

const taskSchema = z.object({
  title: z
    .string()
    .trim()
    .min(3, "Назва має містити щонайменше 3 символи")
    .max(80, "Назва має містити не більше 80 символів"),

  priority: z.enum(["low", "medium", "high"], {
    errorMap: () => ({
      message: "Оберіть коректний пріоритет",
    }),
  }),

  estimateMinutes: z.preprocess(
    (value) => {
      if (typeof value !== "string" || value.trim() === "") {
        return value;
      }

      return Number(value);
    },
    z
      .number({
        invalid_type_error: "Вкажіть оцінку часу",
      })
      .int("Оцінка часу має бути цілим числом")
      .min(1, "Мінімальна оцінка — 1 хвилина")
      .max(480, "Максимальна оцінка — 480 хвилин"),
  ),
});

export type CreateTaskState = {
  ok: boolean;
  message?: string;
  errors?: Record<string, string[]>;
};

export async function createTask(
  previousState: CreateTaskState,
  formData: FormData,
): Promise<CreateTaskState> {
  // Попередній стан потрібен API useActionState, але в цій дії він не використовується
  void previousState;

  const rawData = {
    title: formData.get("title"),
    priority: formData.get("priority"),
    estimateMinutes: formData.get("estimateMinutes"),
  };

  const result = taskSchema.safeParse(rawData);

  if (!result.success) {
    const errors = result.error.issues.reduce<Record<string, string[]>>(
      (accumulator, issue) => {
        const field = issue.path[0];

        if (typeof field === "string") {
          accumulator[field] ??= [];
          accumulator[field].push(issue.message);
        }

        return accumulator;
      },
      {},
    );

    return {
      ok: false,
      message: "Перевірте введені дані",
      errors,
    };
  }

  const task = result.data;

  // Тут має виконуватися мутація, наприклад запис до бази даних.
  // На цьому прикладі виводимо вже перевірені дані в консоль.
  console.log("Створено завдання:", task);

  return {
    ok: true,
    message: "Завдання успішно створено",
  };
}

"use client";

import { useActionState } from "react";
import {
  createTask,
  type CreateTaskState,
} from "@/app/actions/tasks";

const initialState: CreateTaskState = {
  ok: false,
};

export function CreateTaskForm() {
  const [state, formAction, isPending] = useActionState(
    createTask,
    initialState,
  );

  return (
    <form action={formAction}>
      <div>
        <label htmlFor="title">Назва</label>
        <input id="title" name="title" type="text" />
        {state.errors?.title?.[0] && (
          <p>{state.errors.title[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="priority">Пріоритет</label>
        <select id="priority" name="priority" defaultValue="">
          <option value="" disabled>
            Оберіть пріоритет
          </option>
          <option value="low">Низький</option>
          <option value="medium">Середній</option>
          <option value="high">Високий</option>
        </select>
        {state.errors?.priority?.[0] && (
          <p>{state.errors.priority[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="estimateMinutes">
          Оцінка часу в хвилинах
        </label>
        <input
          id="estimateMinutes"
          name="estimateMinutes"
          type="number"
        />
        {state.errors?.estimateMinutes?.[0] && (
          <p>{state.errors.estimateMinutes[0]}</p>
        )}
      </div>

      <button type="submit" disabled={isPending}>
        {isPending ? "Збереження..." : "Створити завдання"}
      </button>

      {state.message && <p>{state.message}</p>}
    </form>
  );
}

import { CreateTaskForm } from "./create-task-form";

export default function TasksPage() {
  return (
    <main>
      <h1>Нове завдання</h1>
      <CreateTaskForm />
    </main>
  );
}

<input name="estimateMinutes" type="number" />

"30"

z.preprocess(
  (value) => {
    if (typeof value !== "string" || value.trim() === "") {
      return value;
    }

    return Number(value);
  },
  z.number().int().min(1).max(480),
)

const prioritySchema = z.enum(["low", "medium", "high"]);

prioritySchema.parse("low"); // "low"
prioritySchema.parse("high"); // "high"

const result = taskSchema.safeParse(rawData);

if (!result.success) {
  return {
    ok: false,
    errors: getErrors(result.error),
  };
}

// Мутація виконується лише після успішної валідації
await saveTask(result.data);

type TaskInput = z.infer<typeof taskSchema>;

type TaskInput = {
  title: string;
  priority: "low" | "medium" | "high";
  estimateMinutes: number;
};

async function saveTask(task: TaskInput) {
  // Збереження перевіреного завдання
}

<input
  name="title"
  required
  minLength={3}
  maxLength={80}
/>

type TaskInput = {
  title: string;
};

export async function createTask(task: TaskInput) {
  // TypeScript не перевіряє фактичний запит під час виконання
}

const title = formData.get("title") as string;

// Мутація до перевірки
await saveTask({ title });

const result = taskSchema.safeParse({ title });

const result = taskSchema.safeParse({
  title: formData.get("title"),
});

if (!result.success) {
  return {
    ok: false,
    message: "Некоректна назва",
  };
}

await saveTask(result.data);