//page.tsx
"use client";

import { submitUsername } from "./action";
import { useAction } from "./use-action";

export default function Playground() {
    const { response, action, isPending } = useAction(submitUsername);

    return (
        <main className="flex min-h-screen flex-col items-center gap-y-10 p-24">
            <form action={action}>
                <input name="username" />
                &nbsp;
                <button type="submit">Submit</button>
            </form>
            {isPending && <p className="text-blue-500">Loading</p>}
            {!isPending && response?.error && (
                <p className="text-red-500">{response.error}</p>
            )}
            {!isPending && response?.success && (
                <p className="text-green-500">Success!</p>
            )}
        </main>
    );
}

// use-action.ts
import { useState, useTransition } from "react";

export function useAction<T>(action: (formData: FormData) => Promise<T>) {
    const [isPending, startTransition] = useTransition();
    const [response, setResponse] = useState<T | undefined>(undefined);

    return {
        response,
        isPending,
        action: async (formData: FormData) => {
            startTransition(async () => {
                const response = await action(formData);
                setResponse(response);
            });
        },
    };
}

// action.ts
"use server";

export async function submitUsername(formData: FormData) {
    const username = String(formData.get("username"));

    // fake latency
    await new Promise((resolve) => setTimeout(resolve, 1000));

    if (!username) {
        return { error: "Please enter a username." };
    }

    return { success: true };
}