This repository was archived by the owner on Aug 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 20
Expand file tree
/
Copy pathDashboard.js
More file actions
86 lines (76 loc) · 1.98 KB
/
Dashboard.js
File metadata and controls
86 lines (76 loc) · 1.98 KB
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
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react'
import {createPaginationContainer, graphql} from 'react-relay'
import RepositoryListItem from './RepositoryListItem'
class Dashboard extends React.Component {
loadMoreRepositories() {
this.props.relay.loadMore(10, () => {})
}
render() {
const {viewer} = this.props.data
return (
<div className="repositories">
<ul className="list-group">
<li className="list-group-item">
<strong>Your repositories</strong>
<span className="badge">{viewer.repositories.totalCount}</span>
</li>
{viewer.repositories.edges.map(edge => <RepositoryListItem repository={edge.node} key={edge.node.id} />)}
<ShowMore
repositories={viewer.repositories}
onClick={event => {
event.preventDefault()
this.loadMoreRepositories()
}}
/>
</ul>
</div>
)
}
}
function ShowMore({repositories, onClick}) {
if (repositories.pageInfo.hasNextPage) {
return (
<li className="list-group-item show-more">
<a href="#" onClick={onClick}>
Show more repositories...
</a>
<span className="octicon octicon-sync spinner" />
</li>
)
} else {
return <noscript />
}
}
export default createPaginationContainer(
Dashboard,
graphql`
fragment Dashboard on Query {
viewer {
repositories(first: $count, after: $cursor) @connection(key: "Dashboard_repositories") {
totalCount
pageInfo {
hasNextPage
endCursor
}
edges {
node {
id
...RepositoryListItem_repository
}
}
}
}
}
`,
{
getVariables(props, {count, cursor}) {
return {count, cursor}
},
query: graphql`
query DashboardPaginationQuery($count: Int!, $cursor: String) {
...Dashboard
}
`
}
)