Làm chủ React Server Components (RSC) & Server Actions trong Next.js App Router

"use server";

import { z } from "zod";
import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";

const feedbackSchema = z.object({
  name: z.string().min(2, "Tên quá ngắn"),
  email: z.string().email("Email không hợp lệ"),
  message: z.string().min(10, "Nội dung phản hồi tối thiểu 10 ký tự"),
});

export async function submitFeedbackAction(prevState: any, formData: FormData) {
  const rawData = {
    name: formData.get("name"),
    email: formData.get("email"),
    message: formData.get("message"),
  };

  const parsed = feedbackSchema.safeParse(rawData);
  if (!parsed.success) {
    return { success: false, errors: parsed.error.flatten().fieldErrors };
  }

  try {
    await db.feedbacks.create({ data: parsed.data });
    // Làm mới cache trang feedbacks ngay lập tức
    revalidatePath("/admin/feedbacks");
    return { success: true, message: "Cảm ơn bạn đã gửi phản hồi!" };
  } catch (error) {
    return { success: false, message: "Đã có lỗi xảy ra từ máy chủ." };
  }
}

"use client";

import { useActionState } from "react";
import { submitFeedbackAction } from "@/actions/feedback";

export function FeedbackForm() {
  const [state, formAction, isPending] = useActionState(submitFeedbackAction, null);

  return (
    <form action={formAction} className="space-y-4 max-w-md">
      {state?.success && (
        <p className="p-3 rounded bg-emerald-500/10 text-emerald-400 text-sm">
          {state.message}
        </p>
      )}

      <div>
        <input name="name" placeholder="Họ và tên" className="w-full p-2 bg-zinc-900 border rounded" />
        {state?.errors?.name && <span className="text-xs text-red-400">{state.errors.name[0]}</span>}
      </div>

      <div>
        <textarea name="message" placeholder="Nội dung" className="w-full p-2 bg-zinc-900 border rounded" />
        {state?.errors?.message && <span className="text-xs text-red-400">{state.errors.message[0]}</span>}
      </div>

      <button
        disabled={isPending}
        type="submit"
        className="px-4 py-2 bg-emerald-500 text-black font-semibold rounded disabled:opacity-50"
      >
        {isPending ? "Đang gửi phản hồi..." : "Gửi ngay"}
      </button>
    </form>
  );
}