Optimistic UI Updates

'use server'

export interface Todo {
  id: string
  text: string
  done: boolean
}

// In-memory store for demo purposes
let todos: Todo[] = [
  { id: '1', text: 'Read the docs', done: true },
  { id: '2', text: 'Build something', done: false },
]

export async function addTodoAction(raw: unknown) {
  // Simulate network latency
  await new Promise((r) => setTimeout(r, 1200))

  const data = raw as { text: string }

  if (!data.text?.trim()) {
    return { errors: { text: ['Todo text is required'] }, todos }
  }

  // Type 'fail' to simulate a server error and trigger rollback
  if (data.text.toLowerCase().includes('fail')) {
    throw new Error('Server error — optimistic update will be rolled back.')
  }

  const newTodo: Todo = {
    id: crypto.randomUUID(),
    text: data.text.trim(),
    done: false,
  }

  todos = [...todos, newTodo]
  return { todos }
}

'use client'
import { useActionForm } from 'hookform-action'
import { type Todo, addTodoAction } from './actions'

type AddTodoResult = { todos: Todo[]; errors?: { text?: string[] } }

const initialTodos: Todo[] = [
  { id: '1', text: 'Read the docs', done: true },
  { id: '2', text: 'Build something', done: false },
]

export function TodoForm() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isPending, actionResult },
    optimistic,
  } = useActionForm<{ text: string }, AddTodoResult, Todo[]>(addTodoAction, {
    defaultValues: { text: '' },

    // ── Optimistic UI configuration ─────────────────────────────
    optimisticKey: 'todos',

    // Initial "confirmed" data before any submissions
    optimisticInitial: initialTodos,

    // Reducer: given the current list and the submitted values,
    // return the projected list to show immediately
    optimisticData: (current, values) => [
      ...current,
      { id: `temp-${Date.now()}`, text: values.text, done: false },
    ],
    // ────────────────────────────────────────────────────────────

    onSuccess: () => reset(),
  })

  // Decide which data to render:
  //   • While the action is in flight → show the optimistic (projected) list
  //   • After the action resolves   → show the confirmed list from the server
  const confirmedTodos = actionResult?.todos ?? initialTodos
  const todos = optimistic?.isPending
    ? (optimistic.data ?? confirmedTodos)
    : confirmedTodos

  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            className={
              todo.id.startsWith('temp-')
                ? 'opacity-60 italic text-brand-300'  // optimistic item style
                : 'text-gray-200'
            }
          >
            {todo.done ? '✅' : '⬜'} {todo.text}
            {todo.id.startsWith('temp-') && ' (saving…)'}
          </li>
        ))}
      </ul>

      <form onSubmit={handleSubmit()} className="mt-4 flex gap-2">
        <input
          {...register('text')}
          placeholder="New todo…"
          disabled={isPending}
        />
        {errors.text && <p className="text-red-400">{errors.text.message}</p>}
        <button type="submit" disabled={isPending}>Add</button>
      </form>
    </div>
  )
}