Skip to content

Commit 33373e6

Browse files
123vivekr123vivekr
committed
loadable.jsx: Show modal on API limit exceed
This shows a modal with error message on exceeding API limit. Fixes coala#127
1 parent b872c70 commit 33373e6

File tree

1 file changed

+101
-72
lines changed

1 file changed

+101
-72
lines changed

‎src/components/loadable.jsx

+101-72
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,122 @@
11
import {Component} from 'react';
22
import {SyncIcon} from 'react-octicons';
3+
import * as BS from 'react-bootstrap';
4+
import {Button} from 'react-bootstrap';
35

46
const STATUS = {
5-
INITIAL: 'initial',
6-
RESOLVED: 'resolved',
7-
ERROR: 'error'
7+
INITIAL: 'initial',
8+
RESOLVED: 'resolved',
9+
ERROR: 'error'
810
};
911

1012
class Loadable extends Component {
11-
static defaultProps = {
12-
renderError: (err) => {
13-
console.error(err);
14-
// If it is a permissions error then it might be a rate limi
15-
if (err.status === 403) {
16-
return (
17-
<div>
18-
<h2>Insufficient Permissions (or rate limit exceeded)</h2>
19-
<p>
20-
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.
21-
</p>
22-
<code>{err.message}</code>
23-
</div>
24-
);
25-
} else if (err.name === 'InvalidStateError') {
26-
return (
27-
<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>
28-
);
29-
} else {
30-
return (
31-
<span>
32-
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.
33-
{err.message}
34-
{JSON.stringify(err)}
35-
</span>
36-
);
37-
}
38-
}
39-
};
13+
static defaultProps = {
14+
renderError: (err) => {
15+
console.error(err);
16+
// If it is a permissions error then it might be a rate limit
17+
if (err.status === 403) {
18+
return (
19+
<BS.Modal show >
20+
<BS.Modal.Header>
21+
<BS.Modal.Title><h2>Insufficient Permissions </h2>(or rate limit exceeded)</BS.Modal.Title>
22+
</BS.Modal.Header>
23+
<BS.Modal.Body >
24+
<div>
25+
<p>
26+
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.
27+
</p>
28+
<code>
29+
{JSON.parse(err.message).message}
30+
<br />
31+
<a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
32+
</code>
33+
<br />
34+
<br />
35+
<Button bsStyle="danger">Ok</Button>
36+
</div>
37+
</BS.Modal.Body>
38+
</BS.Modal>
39+
);
40+
} else if (err.name === 'InvalidStateError') {
41+
return (
42+
<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>
43+
);
44+
} else {
45+
return (
46+
<BS.Modal show >
47+
<BS.Modal.Header>
48+
</BS.Modal.Header>
49+
<BS.Modal.Body >
50+
<div>
51+
<p>
52+
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.
53+
</p>
54+
<code>
55+
{JSON.parse(err.message).message}
56+
<br />
57+
<a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
58+
</code>
59+
<br />
60+
<br />
61+
<Button bsStyle="danger">Ok</Button>
62+
</div>
63+
</BS.Modal.Body>
64+
</BS.Modal>
65+
);
66+
}
67+
}
68+
};
4069

41-
state = {status: STATUS.INITIAL, value: null};
70+
state = {status: STATUS.INITIAL, value: null, show: false};
4271

43-
componentDidMount() {
44-
const {promise} = this.props;
45-
promise.then(this.onResolve, this.onError);
46-
}
72+
componentDidMount() {
73+
const {promise} = this.props;
74+
promise.then(this.onResolve, this.onError);
75+
}
4776

48-
componentDidUpdate(prevProps) {
49-
if (this.props.promise !== prevProps.promise) {
50-
const {promise} = this.props;
51-
promise.then(this.onResolve, this.onError);
77+
componentDidUpdate(prevProps) {
78+
if (this.props.promise !== prevProps.promise) {
79+
const {promise} = this.props;
80+
promise.then(this.onResolve, this.onError);
81+
}
5282
}
53-
}
5483

55-
onResolve = (value) => {
56-
// TODO: Find out why this is being called multiple times
57-
this.setState({status: STATUS.RESOLVED, value});
58-
};
84+
onResolve = (value) => {
85+
// TODO: Find out why this is being called multiple times
86+
this.setState({status: STATUS.RESOLVED, value});
87+
};
5988

60-
onError = (value) => {
61-
// TODO: Find out why this is being called multiple times
62-
if (this.state.status !== STATUS.ERROR) {
63-
this.setState({status: STATUS.ERROR, value});
64-
}
65-
};
89+
onError = (value) => {
90+
// TODO: Find out why this is being called multiple times
91+
if (this.state.status !== STATUS.ERROR) {
92+
this.setState({status: STATUS.ERROR, value});
93+
}
94+
};
6695

67-
renderLoading = () => {
68-
const {loadingText} = this.props;
69-
return (
70-
<span className='loadable is-loading'>
71-
<SyncIcon className='icon-spin'/>
72-
{' ' + (loadingText || 'Loading...')}
73-
</span>
74-
);
75-
};
96+
renderLoading = () => {
97+
const {loadingText} = this.props;
98+
return (
99+
<span className='loadable is-loading'>
100+
<SyncIcon className='icon-spin'/>
101+
{' ' + (loadingText || 'Loading...')}
102+
</span>
103+
);
104+
};
76105

77-
render() {
78-
const {status, value} = this.state;
79-
let {renderLoading, renderLoaded, renderError} = this.props;
106+
render() {
107+
const {status, value} = this.state;
108+
let {renderLoading, renderLoaded, renderError} = this.props;
80109

81-
renderLoading = renderLoading || this.renderLoading;
110+
renderLoading = renderLoading || this.renderLoading;
82111

83-
if (status === STATUS.INITIAL) {
84-
return renderLoading();
85-
} else if (status === STATUS.RESOLVED) {
86-
return renderLoaded(value);
87-
} else {
88-
return renderError(value);
112+
if (status === STATUS.INITIAL) {
113+
return renderLoading();
114+
} else if (status === STATUS.RESOLVED) {
115+
return renderLoaded(value);
116+
} else {
117+
return renderError(value);
118+
}
89119
}
90-
}
91120
}
92121

93122
export default Loadable;

0 commit comments

Comments
 (0)