ComposerView.js

function ComposerView () {
  const saveDraft = useMachineTransition('save_draft')
  const send = useMachineTransition('send')

  const {
    context: {
      message
    }
  } = useMachineState()

  const handleChange = useCallback((ev) => {
    saveDraft.execute({
      message: {
        ...message,
        [ev.target.name]: ev.target.value
      }
    })
  }, [saveDraft, message])

  const handleSubmit = useCallback((ev) => {
    ev.preventDefault();
    
    send.execute({ message })
  }, [send, message])

  return (
    <>
      {send.error && <p>{send.error.message}</p>}
      <form onSubmit={handleSubmit}>
        <label>
          <span>Recipient</span>
          <input type="text" name="recipient" value={message.recipient} onChange={handleChange}/>
        </label>

        <label>
          <span>Text</span>
          <textarea name="text" value={message.text} onChange={handleChange}/>
        </label>

        <button type="submit" disabled={send.loading}>
          {send.loading ? 'Sending...' : 'Save'}
        </button>
      </form>
    </>
  )
}