Promisey props

promisey.js

// @flow

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import invariant from 'assert'

type Props = {
  onSubmit(comment: string): Promise<void>
}
type State = {
  status: 'ready' | 'submitting' | 'failed',
  comment: string
}
class CommentSubmit extends React.Component<Props, State> {

  state = { status: 'ready', comment: '' }

  render() {
    return <div>
      {this.state.status === 'failed' && <p>Bummer, something went wrong!</p>}
      <input type="text" value={this.state.comment} onChange={this.updateCommentState} />
      {this.theSubmitButton()}
    </div>
  }

  theSubmitButton(): React.Node {
    const status = this.state.status
    switch (status) {
      case 'ready': case 'failed':
        return <button onClick={() => this.submitComment(status)}>Submit!</button>
      default:
        return <button>Submitting...</button>
    }
  }

  submitComment = async (status: 'ready' | 'failed') => {
    this.setState({ status: 'submitting' })
    try {
      await this.props.onSubmit(this.state.comment)
      this.setState({ status: 'ready', comment: '' })
    } catch (e) {
      this.setState({ status: 'failed' })
    }
  }
  
  updateCommentState = (e: SyntheticEvent<HTMLInputElement>) => this.setState({ comment: e.currentTarget.value })
}

const sleep = ms => new Promise(awake => setTimeout(awake, ms))

ReactDOM.render(
  <CommentSubmit onSubmit={async comment => {
    await sleep(1000)
    invariant(Math.random() > 0.5, 'Unlucky!')
    console.log('submitted', comment)
  }} />,
  document.getElementById("root")
)