Skip to content

Instantly share code, notes, and snippets.

@paularmstrong
Created February 15, 2017 17:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paularmstrong/1748c6bc5afdf0ea6791321de41c403a to your computer and use it in GitHub Desktop.
Save paularmstrong/1748c6bc5afdf0ea6791321de41c403a to your computer and use it in GitHub Desktop.
const FetchStatus = {
FAILED: 'failed',
LOADED: 'loaded',
LOADING: 'loading',
NONE: 'none'
};
class LoadingRenderer extends React.Component {
static propTypes = {
fetchStatus: React.PropTypes.oneOf(Object.values(FetchStatus)).isRequired,
render: React.PropTypes.func.isRequired,
retryable: React.PropTypes.bool
};
static defaultProps = {
retryable: true
};
render() {
const { fetchStatus, renderView, retryable } = this.props;
switch (fetchStatus) {
case FetchStatus.LOADED:
return renderView();
case FetchStatus.LOADING:
return <div>loading...</div>;
case FetchStatus.FAILED:
return retryable ? <div>retry?</div> : <div>failed.</div>;
case FetchStatus.NONE:
default:
return <div>failure</div>;
}
}
}
const renderView = () => (<div>All done</div>);
React.render(
<LoadingRenderer
fetchStatus={FetchStatus.LOADING}
renderView={renderView}
retryable
/>, document.querySelector('#root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment