Skip to content

Commit

Permalink
loadable.jsx: Make model for showing error
Browse files Browse the repository at this point in the history 
Shows a modal with error message.
Fixes #127
  • Loading branch information
@123vivekr
123vivekr committed Feb 3, 2019
1 parent 40c6ae9 commit 74cd30f
Showing 1 changed file with 68 additions and 61 deletions.
129 changes: 68 additions & 61 deletions src/components/loadable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,65 +10,72 @@ const STATUS = {
};

class Loadable extends Component {
static defaultProps = {
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.Header>
<BS.Modal.Title><h2>Insufficient Permissions </h2>(or rate limit exceeded)</BS.Modal.Title>
</BS.Modal.Header>
<BS.Modal.Body >
<div>
<p>
It looks like either you do not have permission to see this repository or the rate limit for requests to GitHub has been exceeded. This usually happens when you are not logged in to gh-board. Try signing in to continue.
</p>
<code>
{JSON.parse(err.message).message}
<br />
<a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
</code>
<br />
<br />
<Button bsStyle="danger">Ok</Button>
</div>
</BS.Modal.Body>
</BS.Modal>
);
} else if (err.name === 'InvalidStateError') {
return (
<span>It looks like your browser is in private browsing mode. gh-board uses IndexedDB to cache requests to GitHub. Please disable Private Browsing to see it work.</span>
);
} else {
return (
<BS.Modal show >
<BS.Modal.Header>
</BS.Modal.Header>
<BS.Modal.Body >
<div>
<p>
Problem loading. Is it a valid repo? And have you exceeded your number of requests? Usually happens when not logged in because GitHub limits anonymous use of their API.
</p>
<code>
{JSON.parse(err.message).message}
<br />
<a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
</code>
<br />
<br />
<Button bsStyle="danger">Ok</Button>
</div>
</BS.Modal.Body>
</BS.Modal>
);
}
}
};

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={ this.state.show } >
<BS.Modal.Header>
<BS.Modal.Title><h2>Insufficient Permissions </h2>(or rate limit exceeded)</BS.Modal.Title>
</BS.Modal.Header>
<BS.Modal.Body >
<div>
<p>
It looks like either you do not have permission to see this repository or the rate limit for requests to GitHub has been exceeded. This usually happens when you are not logged in to gh-board. Try signing in to continue.
</p>
<code>
{JSON.parse(err.message).message}
<br />
<a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
</code>
<br />
<br />
<Button bsStyle="danger" onClick={ this.handleClose }>Ok</Button>
</div>
</BS.Modal.Body>
</BS.Modal>
);
} else if (err.name === 'InvalidStateError') {
return (
<span>It looks like your browser is in private browsing mode. gh-board uses IndexedDB to cache requests to GitHub. Please disable Private Browsing to see it work.</span>
);
} else {
return (
<BS.Modal show={ this.state.show } >
<BS.Modal.Header>
</BS.Modal.Header>
<BS.Modal.Body >
<div>
<p>
Problem loading. Is it a valid repo? And have you exceeded your number of requests? Usually happens when not logged in because GitHub limits anonymous use of their API.
</p>
<code>
{JSON.parse(err.message).message}
<br />
<a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
</code>
<br />
<br />
<Button bsStyle="danger" onClick={ this.handleClose }>Ok</Button>
</div>
</BS.Modal.Body>
</BS.Modal>
);
}
};

componentDidMount() {
const {promise} = this.props;
promise.then(this.onResolve, this.onError);
Expand Down Expand Up @@ -104,17 +111,17 @@ class Loadable extends Component {
};

render() {
const {status, value} = this.state;
let {renderLoading, renderLoaded, renderError} = this.props;

const { status, value } = this.state;
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);
}
}
}
Expand Down

0 comments on commit 74cd30f

Please sign in to comment.