Skip to content

Commit 74cd30f

Browse files
123vivekr123vivekr
committed
loadable.jsx: Make model for showing error
Shows a modal with error message. Fixes #127
1 parent 40c6ae9 commit 74cd30f

File tree

1 file changed

+68
-61
lines changed

1 file changed

+68
-61
lines changed

‎src/components/loadable.jsx‎

Lines changed: 68 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -10,65 +10,72 @@ const STATUS = {
1010
};
1111

1212
class Loadable extends Component {
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-
};
6913

7014
state = {status: STATUS.INITIAL, value: null, show: false};
7115

16+
handleClose = () => {
17+
this.setState({ show: false });
18+
}
19+
20+
handleShow = () => {
21+
this.setState({ show: true });
22+
}
23+
24+
renderError = (err) => {
25+
console.error(err);
26+
// If it is a permissions error then it might be a rate limit
27+
if (err.status === 403) {
28+
return (
29+
<BS.Modal show={ this.state.show } >
30+
<BS.Modal.Header>
31+
<BS.Modal.Title><h2>Insufficient Permissions </h2>(or rate limit exceeded)</BS.Modal.Title>
32+
</BS.Modal.Header>
33+
<BS.Modal.Body >
34+
<div>
35+
<p>
36+
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.
37+
</p>
38+
<code>
39+
{JSON.parse(err.message).message}
40+
<br />
41+
<a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
42+
</code>
43+
<br />
44+
<br />
45+
<Button bsStyle="danger" onClick={ this.handleClose }>Ok</Button>
46+
</div>
47+
</BS.Modal.Body>
48+
</BS.Modal>
49+
);
50+
} else if (err.name === 'InvalidStateError') {
51+
return (
52+
<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>
53+
);
54+
} else {
55+
return (
56+
<BS.Modal show={ this.state.show } >
57+
<BS.Modal.Header>
58+
</BS.Modal.Header>
59+
<BS.Modal.Body >
60+
<div>
61+
<p>
62+
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.
63+
</p>
64+
<code>
65+
{JSON.parse(err.message).message}
66+
<br />
67+
<a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
68+
</code>
69+
<br />
70+
<br />
71+
<Button bsStyle="danger" onClick={ this.handleClose }>Ok</Button>
72+
</div>
73+
</BS.Modal.Body>
74+
</BS.Modal>
75+
);
76+
}
77+
};
78+
7279
componentDidMount() {
7380
const {promise} = this.props;
7481
promise.then(this.onResolve, this.onError);
@@ -104,17 +111,17 @@ class Loadable extends Component {
104111
};
105112

106113
render() {
107-
const {status, value} = this.state;
108-
let {renderLoading, renderLoaded, renderError} = this.props;
109-
114+
const { status, value } = this.state;
115+
let { renderLoading, renderLoaded } = this.props;
110116
renderLoading = renderLoading || this.renderLoading;
111117

112118
if (status === STATUS.INITIAL) {
113-
return renderLoading();
119+
return this.renderLoading();
114120
} else if (status === STATUS.RESOLVED) {
115121
return renderLoaded(value);
116122
} else {
117-
return renderError(value);
123+
this.handleShow();
124+
return this.renderError(value);
118125
}
119126
}
120127
}

0 commit comments

Comments
 (0)