useAction

import { useAction } from '@weser/actions'
import { useRouter } from 'next/navigation'

// async server action that returns a promise with 'use server' directive
// createItem takes an object with just a name property
import createItem from '@/actions/createItem'

function Component() {
  const router = useRouter()
  const [{ loading }, execute] = useAction(createItem, {
    onSuccess: (data) => {
      if (data?.id) {
        router.push('/items/' + data.id)
      }
    },
    onError: () => alert('Something went wrong'),
  })

  return (
    <button
      disabled={loading}
      onClick={() =>
        execute({
          name: 'My Item',
        })
      }>
      {loading ? 'Creating...' : 'Create Item'}
    </button>
  )
}