Skip to content

Commit 3ad0932

Browse files
jamespleasejamesplease
committed
Switch to using ResourceRequest for Gists page
1 parent 69d0410 commit 3ad0932

File tree

6 files changed

+114
-142
lines changed

6 files changed

+114
-142
lines changed

‎.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"jsxBracketSameLine": true
4+
}

‎src/components/App.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,9 @@ class App extends Component {
2121
New Gist
2222
</Link>
2323
</div>
24-
{!isLoggedIn && (
24+
{!isLoggedIn &&
2525
`Please provide a GitHub Personal Access Token to use this application.
26-
For more, refer to this project's documentation on GitHub.`
27-
)}
26+
For more, refer to this project's documentation on GitHub.`}
2827
{isLoggedIn && children}
2928
</div>
3029
);

‎src/components/Gists.js‎

Lines changed: 29 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,37 @@
11
import React, { Component } from 'react';
2-
import { bindActionCreators } from 'redux';
3-
import { connect } from 'react-redux';
42
import { Link } from 'react-router-dom';
5-
import { getResources, getStatus } from 'react-redux-resource';
63
import './Gists.css';
7-
import { readManyUsersGists } from '../state/gists/action-creators';
4+
import { ReadUsersGists } from '../request-components/Gists';
85
import login from '../personal-access-token';
96

107
const username = login.username;
118

12-
class Gists extends Component {
13-
render() {
14-
const { usersGists, usersGistsStatus } = this.props;
15-
16-
return (
17-
<div className="Gists">
18-
{usersGistsStatus.pending && ('Loading gists...')}
19-
{usersGistsStatus.failed && (
20-
<span>
21-
There was an error loading gists. <button onClick={this.fetchUsersGists}>Try again.</button>
22-
</span>
23-
)}
24-
{usersGistsStatus.succeeded && (
25-
<ul className="Gists-list">
26-
{usersGists.map(gist => (
27-
<li key={gist.id} className="Gists-listItem">
28-
{username}&nbsp;/&nbsp;
29-
<Link to={`/${gist.id}`}>
30-
{Object.keys(gist.files)[0]}
31-
</Link>
32-
&nbsp;
33-
{!gist.public && '🔒'}
34-
</li>
35-
))}
36-
</ul>
37-
)}
38-
</div>
39-
);
40-
}
41-
42-
componentDidMount() {
43-
this.fetchUsersGists();
44-
}
45-
46-
componentWillUnmount() {
47-
if (this.readManyUsersGistsXhr) {
48-
this.readManyUsersGistsXhr.abort();
49-
}
50-
}
51-
52-
fetchUsersGists = () => {
53-
const { readManyUsersGists } = this.props;
54-
55-
if (this.readManyUsersGistsXhr) {
56-
this.readManyUsersGistsXhr.abort();
57-
}
58-
59-
this.readManyUsersGistsXhr = readManyUsersGists(username);
60-
}
9+
export default function Gists() {
10+
return (
11+
<ReadUsersGists username={username}>
12+
{({ status, lists, doFetch }) => (
13+
<div>
14+
{status.pending && 'Loading gists...'}
15+
{status.failed && (
16+
<span>
17+
There was an error loading gists.{' '}
18+
<button onClick={() => doFetch()}>Try again.</button>
19+
</span>
20+
)}
21+
{status.succeeded && (
22+
<ul className="Gists-list">
23+
{lists.usersGists.map(gist => (
24+
<li key={gist.id} className="Gists-listItem">
25+
{username}&nbsp;/&nbsp;
26+
<Link to={`/${gist.id}`}>{Object.keys(gist.files)[0]}</Link>
27+
&nbsp;
28+
{!gist.public && '🔒'}
29+
</li>
30+
))}
31+
</ul>
32+
)}
33+
</div>
34+
)}
35+
</ReadUsersGists>
36+
);
6137
}
62-
63-
function mapStateToProps(state) {
64-
const usersGists = getResources(state.gists, 'usersGists');
65-
const usersGistsStatus = getStatus(state, 'gists.requests.getUsersGists.status', true);
66-
67-
return {
68-
usersGists,
69-
usersGistsStatus
70-
};
71-
}
72-
73-
function mapDispatchToProps(dispatch) {
74-
return bindActionCreators({
75-
readManyUsersGists
76-
}, dispatch);
77-
}
78-
79-
export default connect(mapStateToProps, mapDispatchToProps)(Gists);

‎src/index.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,22 @@ import Gist from './components/Gist';
99
import CreateGist from './components/CreateGist';
1010
import store from './state/store';
1111

12-
ReactDOM.render((
12+
ReactDOM.render(
1313
<Provider store={store}>
1414
<BrowserRouter>
15-
<Route path="/" render={({ location }) => (
16-
<App location={location}>
17-
<Switch>
18-
<Route exact path="/" component={Gists}/>
19-
<Route exact path="/new" component={CreateGist}/>
20-
<Route exact path="/:gistId" component={Gist}/>
21-
</Switch>
22-
</App>
23-
)}/>
15+
<Route
16+
path="/"
17+
render={({ location }) => (
18+
<App location={location}>
19+
<Switch>
20+
<Route exact path="/" component={Gists} />
21+
<Route exact path="/new" component={CreateGist} />
22+
<Route exact path="/:gistId" component={Gist} />
23+
</Switch>
24+
</App>
25+
)}
26+
/>
2427
</BrowserRouter>
25-
</Provider>
26-
), document.getElementById('root'));
28+
</Provider>,
29+
document.getElementById('root')
30+
);

‎src/request-components/Gists.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { ResourceRequest, Fetch } from 'react-redux-resource';
3+
import headers from '../utils/headers';
4+
5+
export function ReadUsersGists({ username, children }) {
6+
const request = (
7+
<Fetch
8+
url={`https://api.github.com/users/${username}/gists`}
9+
headers={headers}
10+
/>
11+
);
12+
13+
return (
14+
<ResourceRequest
15+
treatNullAsPending
16+
resourceName="gists"
17+
list="usersGists"
18+
mergeListIds={false}
19+
request={request}
20+
children={children}
21+
/>
22+
);
23+
}

‎src/state/gists/action-creators.js‎

Lines changed: 40 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,17 @@ export function createGist(gist) {
2121
headers
2222
};
2323

24-
return dispatch => crudRequest('create', {
25-
actionDefaults: {
26-
resourceName: 'gists',
27-
request: 'createGist',
28-
list: 'createdGists',
29-
},
30-
transformData: singleResourceToArray,
31-
xhrOptions,
32-
dispatch
33-
});
24+
return dispatch =>
25+
crudRequest('create', {
26+
actionDefaults: {
27+
resourceName: 'gists',
28+
request: 'createGist',
29+
list: 'createdGists'
30+
},
31+
transformData: singleResourceToArray,
32+
xhrOptions,
33+
dispatch
34+
});
3435
}
3536

3637
export function resetCreateGistStatus() {
@@ -49,35 +50,16 @@ export function readGist(gistId) {
4950
headers
5051
};
5152

52-
return dispatch => crudRequest('read', {
53-
actionDefaults: {
54-
resourceName: 'gists',
55-
resources: [gistId],
56-
},
57-
transformData: singleResourceToArray,
58-
xhrOptions,
59-
dispatch
60-
});
61-
}
62-
63-
export function readManyUsersGists(username) {
64-
const xhrOptions = {
65-
method: 'GET',
66-
url: `https://api.github.com/users/${username}/gists`,
67-
json: true,
68-
headers
69-
};
70-
71-
return dispatch => crudRequest('read', {
72-
actionDefaults: {
73-
resourceName: 'gists',
74-
request: 'getUsersGists',
75-
list: 'usersGists',
76-
mergeListIds: false,
77-
},
78-
xhrOptions,
79-
dispatch
80-
});
53+
return dispatch =>
54+
crudRequest('read', {
55+
actionDefaults: {
56+
resourceName: 'gists',
57+
resources: [gistId]
58+
},
59+
transformData: singleResourceToArray,
60+
xhrOptions,
61+
dispatch
62+
});
8163
}
8264

8365
export function updateGist(gistId, gist) {
@@ -89,15 +71,16 @@ export function updateGist(gistId, gist) {
8971
headers
9072
};
9173

92-
return dispatch => crudRequest('update', {
93-
actionDefaults: {
94-
resourceName: 'gists',
95-
resources: [gistId],
96-
},
97-
transformData: singleResourceToArray,
98-
xhrOptions,
99-
dispatch
100-
});
74+
return dispatch =>
75+
crudRequest('update', {
76+
actionDefaults: {
77+
resourceName: 'gists',
78+
resources: [gistId]
79+
},
80+
transformData: singleResourceToArray,
81+
xhrOptions,
82+
dispatch
83+
});
10184
}
10285

10386
export function resetUpdateGistStatus(gistId) {
@@ -115,12 +98,13 @@ export function deleteGist(gistId) {
11598
headers
11699
};
117100

118-
return dispatch => crudRequest('delete', {
119-
actionDefaults: {
120-
resourceName: 'gists',
121-
resources: [gistId],
122-
},
123-
xhrOptions,
124-
dispatch
125-
});
101+
return dispatch =>
102+
crudRequest('delete', {
103+
actionDefaults: {
104+
resourceName: 'gists',
105+
resources: [gistId]
106+
},
107+
xhrOptions,
108+
dispatch
109+
});
126110
}

0 commit comments

Comments
 (0)