React Client (useOptimisticCrud, withTransition)

'use client'

import { useOptimisticCrud, withTransition } from '@remcostoeten/drizzleasy/client'
import { createFn } from '@remcostoeten/drizzleasy/server'

type TTodo = { id: string; title: string; completed: boolean }

function TodoList(props: { initialTodos: TTodo[] }) {
  const { data, isPending, optimisticCreate } = useOptimisticCrud<TTodo>(props.initialTodos)
  const create = createFn<TTodo>()

  function handleSubmit(formData: FormData) {
    const title = String(formData.get('title') || '')
    optimisticCreate({ title, completed: false }, function onCreate() {
      return create('todos')({ id: crypto.randomUUID(), title, completed: false })
    })
  }

  return (
    <form action={handleSubmit}>
      <input name="title" placeholder="Add todo" />
      <button disabled={isPending}>{isPending ? 'Adding...' : 'Add'}</button>
    </form>
  )
}

function saveUserAction() {
  'use server'
  // ... update in DB, return TResult
}

const save = withTransition(saveUserAction)