Створення даних через Server Actions

DATABASE_URL="file:./dev.db"

npm install prisma @prisma/client
npx prisma migrate dev --name create_posts

import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient();

if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}

"use server";

import { revalidatePath } from "next/cache";
import { prisma } from "@/lib/prisma";

export type CreatePostState = {
  ok: boolean;
  message: string;
  fieldErrors?: {
    title?: string;
    content?: string;
  };
  postId?: number;
};

export async function createPost(
  _previousState: CreatePostState,
  formData: FormData,
): Promise<CreatePostState> {
  const titleValue = formData.get("title");
  const contentValue = formData.get("content");

  if (
    typeof titleValue !== "string" ||
    typeof contentValue !== "string"
  ) {
    return {
      ok: false,
      message: "Некоректні дані форми.",
    };
  }

  const title = titleValue.trim();
  const content = contentValue.trim();

  const fieldErrors: CreatePostState["fieldErrors"] = {};

  if (title.length < 3) {
    fieldErrors.title = "Заголовок має містити щонайменше 3 символи.";
  }

  if (content.length < 10) {
    fieldErrors.content = "Текст має містити щонайменше 10 символів.";
  }

  if (Object.keys(fieldErrors).length > 0) {
    return {
      ok: false,
      message: "Перевірте правильність заповнення форми.",
      fieldErrors,
    };
  }

  try {
    const post = await prisma.post.create({
      data: {
        title,
        content,
      },
    });

    revalidatePath("/posts");

    return {
      ok: true,
      message: "Публікацію успішно створено.",
      postId: post.id,
    };
  } catch {
    return {
      ok: false,
      message: "Не вдалося створити публікацію. Спробуйте ще раз.",
    };
  }
}

const titleValue = formData.get("title");

if (typeof titleValue !== "string") {
  // Значення відсутнє або має неправильний тип
}

const title = titleValue.trim();

return {
  ok: true,
  message: "Публікацію успішно створено.",
  postId: post.id,
};

return {
  ok: false,
  message: "Перевірте правильність заповнення форми.",
  fieldErrors: {
    title: "Заголовок надто короткий.",
  },
};

"use client";

import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import {
  createPost,
  type CreatePostState,
} from "@/app/actions/posts";

const initialState: CreatePostState = {
  ok: false,
  message: "",
};

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? "Збереження..." : "Створити публікацію"}
    </button>
  );
}

export default function PostForm() {
  const [state, formAction] = useActionState(
    createPost,
    initialState,
  );

  return (
    <form action={formAction}>
      <div>
        <label htmlFor="title">Заголовок</label>

        <input
          id="title"
          name="title"
          type="text"
          aria-invalid={Boolean(state.fieldErrors?.title)}
        />

        {state.fieldErrors?.title && (
          <p role="alert">{state.fieldErrors.title}</p>
        )}
      </div>

      <div>
        <label htmlFor="content">Текст</label>

        <textarea
          id="content"
          name="content"
          rows={8}
          aria-invalid={Boolean(state.fieldErrors?.content)}
        />

        {state.fieldErrors?.content && (
          <p role="alert">{state.fieldErrors.content}</p>
        )}
      </div>

      <SubmitButton />

      {state.message && (
        <p
          role="status"
          aria-live="polite"
        >
          {state.message}
        </p>
      )}
    </form>
  );
}

import PostForm from "./PostForm";

export default function NewPostPage() {
  return (
    <main>
      <h1>Нова публікація</h1>
      <PostForm />
    </main>
  );
}

revalidatePath("/posts");

const post = await prisma.post.create({
  data: {
    title,
    content,
  },
});

revalidatePath("/posts");

revalidatePath("/articles");

try {
  const post = await prisma.post.create({
    data: {
      title,
      content,
    },
  });

  revalidatePath("/posts");

  return {
    ok: true,
    message: "Публікацію успішно створено.",
    postId: post.id,
  };
} catch (error) {
  console.error("Помилка створення публікації:", error);

  return {
    ok: false,
    message: "Не вдалося створити публікацію.",
  };
}

"use client";

// Так робити не можна:
// prisma.post.create(...)

<input id="title" />

<input id="title" name="title" />

const { pending } = useFormStatus();

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