diff --git a/src/components/loadable.jsx b/src/components/loadable.jsx index bf0a7b1c..4f3d2554 100644 --- a/src/components/loadable.jsx +++ b/src/components/loadable.jsx @@ -10,13 +10,23 @@ const STATUS = { }; class Loadable extends Component { - static defaultProps = { - renderError: (err) => { + + state = {status: STATUS.INITIAL, value: null, show: false}; + + handleClose = () => { + this.setState({ show: false }); + } + + handleShow = () => { + this.setState({ show: true }); + } + + renderError = (err) => { console.error(err); // If it is a permissions error then it might be a rate limit if (err.status === 403) { return ( - <BS.Modal show > + <BS.Modal show={ this.state.show } > <BS.Modal.Header> <BS.Modal.Title><h2>Insufficient Permissions </h2>(or rate limit exceeded)</BS.Modal.Title> </BS.Modal.Header> @@ -32,7 +42,7 @@ class Loadable extends Component { </code> <br /> <br /> - <Button bsStyle="danger">Ok</Button> + <Button bsStyle="danger" onClick={ this.handleClose }>Ok</Button> </div> </BS.Modal.Body> </BS.Modal> @@ -43,7 +53,7 @@ class Loadable extends Component { ); } else { return ( - <BS.Modal show > + <BS.Modal show={ this.state.show } > <BS.Modal.Header> </BS.Modal.Header> <BS.Modal.Body > @@ -58,16 +68,13 @@ class Loadable extends Component { </code> <br /> <br /> - <Button bsStyle="danger">Ok</Button> + <Button bsStyle="danger" onClick={ this.handleClose }>Ok</Button> </div> </BS.Modal.Body> </BS.Modal> ); } - } - }; - - state = {status: STATUS.INITIAL, value: null, show: false}; + }; componentDidMount() { const { promise } = this.props; @@ -84,11 +91,13 @@ class Loadable extends Component { onResolve = (value) => { // TODO: Find out why this is being called multiple times this.setState({status: STATUS.RESOLVED, value}); + // window.alert(value) }; onError = (value) => { // TODO: Find out why this is being called multiple times if (this.state.status !== STATUS.ERROR) { + // window.alert(value) this.setState({status: STATUS.ERROR, value}); } }; @@ -105,16 +114,16 @@ class Loadable extends Component { render() { const { status, value } = this.state; - let {renderLoading, renderLoaded, renderError} = this.props; - + let { renderLoading, renderLoaded } = this.props; renderLoading = renderLoading || this.renderLoading; if (status === STATUS.INITIAL) { - return renderLoading(); + return this.renderLoading(); } else if (status === STATUS.RESOLVED) { return renderLoaded(value); } else { - return renderError(value); + this.handleShow(); + return this.renderError(value); } } }