ApiConnector

Connector.jsx

class ApiConnector extends React.Component {
  componentDidMount = async () => {
    this.setState({
      loadingState: 'loading',
    })
    try {
      const data = await this.props.loadData()
      this.setState({
        loadingState: 'loaded',
        data,
      })
    } catch (err) {
      this.setState({
        loadingState: 'error',
        errorMessage: err.message,
      })
    }
  }
  render() {
    if (!this.props.renderLoading) {
      return <div>Holy shit!! Please provider loading state</div>
    }
    if (!this.props.renderError) {
      return (
        <div>
          <h2>Good developer always handle error case.</h2>
          <p>
            It is naive to assume that Api call via network going to always be
            success
          </p>
          <p>Please provide renderError</p>
        </div>
      )
    }
    switch (this.state.loadingState) {
      case 'loading':
        return this.props.renderLoading()
      case 'error':
        return this.props.renderError()
      default:
        return this.props.render(this.state.data)
    }
  }
}