Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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