import React from 'react'
import Track from 'react-pledge'

const delay = (ms = 1000) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(), ms)
  })

const submit = async () => {
  await delay(2000)
  if (Math.random() > 0.5) {
    throw Error('Some error message 🤒')
  }
  return '🙌'
}

const App = () => (
  <Track promise={submit}>
    {(handleSubmit, { pending, resolved, value, rejected, error }) => (
      <div>
        <div>
          {pending ? (
            'Loading...'
          ) : rejected ? (
            error.message
          ) : resolved ? (
            <span>Woohoo, success!!!</span>
          ) : null}
        </div>
        <button onClick={handleSubmit} disabled={pending}>
          {pending ? 'Submitting' : 'Submit'}
        </button>
        {resolved && <div>The returned value of the promise is: {value}</div>}
      </div>
    )}
  </Track>
)