Server Actions ile form

// app/newsletter/actions.ts
"use server";

import { z } from "zod";

const subscribeSchema = z.object({
  name: z.string().trim().min(2, "Adınız en az 2 karakter olmalı."),
  email: z.email("E-posta adresini ad@ornek.com biçiminde girin."),
});

export type SubscribeState = {
  status: "idle" | "error" | "success";
  message?: string;
  fieldErrors?: { name?: string[]; email?: string[] };
  values?: { name: string; email: string };
};

export async function subscribe(
  _prevState: SubscribeState,
  formData: FormData,
): Promise<SubscribeState> {
  const values = {
    name: String(formData.get("name") ?? ""),
    email: String(formData.get("email") ?? ""),
  };

  const parsed = subscribeSchema.safeParse(values);
  if (!parsed.success) {
    return {
      status: "error",
      fieldErrors: z.flattenError(parsed.error).fieldErrors,
      values,
    };
  }

  await saveSubscriber(parsed.data);
  return { status: "success", message: `${parsed.data.email} adresine onay e-postası gönderdik.` };
}

// app/newsletter/subscribe-form.tsx
"use client";

import { useActionState } from "react";
import { subscribe, type SubscribeState } from "./actions";

const initialState: SubscribeState = { status: "idle" };

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

  return (
    <form action={formAction} noValidate>
      <label htmlFor="email">E-posta</label>
      <input
        id="email"
        name="email"
        type="email"
        defaultValue={state.values?.email}
        aria-invalid={Boolean(state.fieldErrors?.email)}
        aria-describedby={state.fieldErrors?.email ? "email-error" : undefined}
      />
      {state.fieldErrors?.email && <p id="email-error">{state.fieldErrors.email[0]}</p>}

      {/* name alanı aynı kalıpla */}

      <button disabled={isPending}>{isPending ? "Gönderiliyor..." : "Abone ol"}</button>
      <p aria-live="polite">{state.message}</p>
    </form>
  );
}

const [isPending, startTransition] = useTransition();

const onSubmit = form.handleSubmit((values) => {
  startTransition(async () => {
    const result = await submitApplication(values);
    if (result.status === "error") {
      for (const [field, message] of Object.entries(result.fieldErrors)) {
        form.setError(field as ApplicationField, { type: "server", message });
      }
      form.setError("root.server", { type: "server", message: result.message });
    }
  });
});

"use client";

import { startTransition, useActionState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { profileSchema } from "./schema";
import { updateProfile, type ProfileState } from "./actions";

export function ProfileForm() {
  const [state, submitAction, isPending] = useActionState<ProfileState, unknown>(updateProfile, {
    status: "idle",
  });
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(profileSchema),
    defaultValues: { username: "" },
  });

  useEffect(() => {
    if (state.status === "error" && state.fieldErrors.username) {
      setError("username", { type: "server", message: state.fieldErrors.username }, { shouldFocus: true });
    }
  }, [state, setError]);

  return (
    <form onSubmit={handleSubmit((values) => startTransition(() => submitAction(values)))} noValidate>
      <label htmlFor="username">Kullanıcı adı</label>
      <input id="username" aria-invalid={Boolean(errors.username)} {...register("username")} />
      {errors.username && <p>{errors.username.message}</p>}
      <button disabled={isPending}>{isPending ? "Kaydediliyor..." : "Kaydet"}</button>
      {state.status === "success" && <p role="status">Profil kaydedildi.</p>}
    </form>
  );
}

export async function submitApplication(values: unknown): Promise<ApplicationResult> {
  const session = await auth();
  if (!session) return { status: "error", message: "Oturum açın.", fieldErrors: {} };

  const parsed = applicationSchema.safeParse(values);
  if (!parsed.success) {
    const { fieldErrors } = z.flattenError(parsed.error);
    // ...alan hatalarını döndür
  }
  // parsed.data güvenli
}

const fields = Object.keys(result.fieldErrors) as ApplicationField[];
if (fields.length > 0) {
  setStep(Math.min(...fields.map(stepOf)));
}