-
Notifications
You must be signed in to change notification settings - Fork 52
/
Stargazers.js
86 lines (73 loc) · 2.51 KB
/
Stargazers.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
import axios from "axios";
import React from "react";
import { client, resolve } from "react-resolver";
import { Link } from "react-router";
import Loader from "./Loader";
@client(Loader)
@resolve("user", ({ location: { query }, params }) => params.user || query.user)
@resolve("repo", ({ location: { query }, params }) => params.repo || query.repo)
@resolve("users", function({ user, repo }) {
const url = `https://api.github.com/repos/${user}/${repo}/stargazers`;
return axios.get(url).then(({ data }) => data);
})
export default class Stargazers extends React.Component {
static propTypes = {
users: React.PropTypes.array.isRequired,
}
static displayName = "Stargazers"
render() {
const { repo, user, users } = this.props;
return (
<section>
<div className="card">
<div className="card-content">
<span className="card-title deep-purple-text">
Stargazers for
{" "}
<code>
{user}/{repo}
</code>
</span>
</div>
<div className="card-action">
<iframe src={`https://ghbtns.com/github-btn.html?user=${user}&type=follow&count=true`} frameBorder="0" scrolling="0" width="150px" height="20px"></iframe>
<iframe src={`https://ghbtns.com/github-btn.html?user=${user}&repo=${repo}&type=star&count=true`} frameBorder="0" scrolling="0" width="100px" height="20px"></iframe>
<iframe src={`https://ghbtns.com/github-btn.html?user=${user}&repo=${repo}&type=watch&count=true&v=2`} frameBorder="0" scrolling="0" width="80px" height="20px"></iframe>
</div>
</div>
{this.renderUsers(users, 6)}
</section>
);
}
renderGroup(cols, group, i) {
const size = `s${12 / cols}`;
return (
<div key={`group-${i}`} className="row">
{group.map(user => (
<div key={user.id} className={`col ${size}`}>
{this.renderUser(user)}
</div>
))}
</div>
);
}
renderUser(user) {
return (
<div key={user.id} className="center-align">
<Link to={`/${user.login}`}>
<img src={user.avatar_url} alt="" className="circle responsive-img z-depth-1" />
<br />
{user.login}
</Link>
</div>
);
}
renderUsers(users, cols) {
const groups = [];
const remaining = [].concat(users);
while (remaining.length) {
groups.push(remaining.splice(0, cols));
}
return groups.map(this.renderGroup.bind(this, cols));
}
}