/
UserPage.js
98 lines (85 loc) · 2.42 KB
/
UserPage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { loadUser, loadStarred } from '../actions';
import User from '../components/User';
import Repo from '../components/Repo';
import List from '../components/List';
import zip from 'lodash/array/zip';
function loadData(props) {
const { login } = props;
props.loadUser(login, ['name']);
props.loadStarred(login);
}
class UserPage extends Component {
constructor(props) {
super(props);
this.renderRepo = this.renderRepo.bind(this);
this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
}
componentWillMount() {
loadData(this.props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.login !== this.props.login) {
loadData(nextProps);
}
}
handleLoadMoreClick() {
this.props.loadStarred(this.props.login, true);
}
renderRepo([repo, owner]) {
return (
<Repo repo={repo}
owner={owner}
key={repo.fullName} />
);
}
render() {
const { user, login } = this.props;
if (!user) {
return <h1><i>Loading {login}’s profile...</i></h1>;
}
const { starredRepos, starredRepoOwners, starredPagination } = this.props;
return (
<div>
<User user={user} />
<hr />
<List renderItem={this.renderRepo}
items={zip(starredRepos, starredRepoOwners)}
onLoadMoreClick={this.handleLoadMoreClick}
loadingLabel={`Loading ${login}’s starred...`}
{...starredPagination} />
</div>
);
}
}
UserPage.propTypes = {
login: PropTypes.string.isRequired,
user: PropTypes.object,
starredPagination: PropTypes.object,
starredRepos: PropTypes.array.isRequired,
starredRepoOwners: PropTypes.array.isRequired,
loadUser: PropTypes.func.isRequired,
loadStarred: PropTypes.func.isRequired
};
function mapStateToProps(state, ownProps) {
const { login } = ownProps.params;
const {
pagination: { starredByUser },
entities: { users, repos }
} = state;
const starredPagination = starredByUser[login] || { ids: [] };
const starredRepos = starredPagination.ids.map(id => repos[id]);
const starredRepoOwners = starredRepos.map(repo => users[repo.owner]);
return {
login,
starredRepos,
starredRepoOwners,
starredPagination,
user: users[login]
};
}
export default connect(
mapStateToProps,
{ loadUser, loadStarred }
)(UserPage);