Skip to content

Commit 06a3d4e

Browse files
nikolasburknikolasburk
committed
workaround for pagination issue
1 parent 0c5c13b commit 06a3d4e

File tree

5 files changed

+118
-52
lines changed

5 files changed

+118
-52
lines changed

‎src/components/App.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ class App extends Component {
1010
render() {
1111
return (
1212
<Switch>
13-
<Route exact path='/' render={() => <Redirect to='/1' />} />
13+
<Route exact path='/' render={() => <Redirect to='/new/1' />} />
1414
<Route exact path='/login' component={Login}/>
1515
<Route exact path='/create' component={CreateLink}/>
1616
<Route exact path='/search' component={Search}/>
17-
<Route exact path='/:page' component={LinkList}/>
17+
<Route exact path='/top' component={LinkList}/>
18+
<Route exact path='/new/:page' component={LinkList}/>
1819
</Switch>
1920
)
2021
}

‎src/components/CreateLink.js

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react'
22
import { gql, graphql } from 'react-apollo'
3-
import { GC_USER_ID } from '../constants'
3+
import { GC_USER_ID, LINKS_PER_PAGE } from '../constants'
4+
import {ALL_LINKS_QUERY } from './LinkList'
45

56
class CreateLink extends Component {
67

@@ -34,6 +35,7 @@ class CreateLink extends Component {
3435
</button>
3536
</div>
3637
)
38+
3739
}
3840

3941
_createLink = async () => {
@@ -48,22 +50,49 @@ class CreateLink extends Component {
4850
description,
4951
url,
5052
postedById
53+
},
54+
update: (store, { data: { createLink } }) => {
55+
56+
const first = LINKS_PER_PAGE
57+
const skip = 0
58+
const orderBy = "createdAt_DESC"
59+
60+
const data = store.readQuery({
61+
query: ALL_LINKS_QUERY,
62+
variables: { first, skip, orderBy }
63+
})
64+
data.allLinks.splice(0,0,createLink)
65+
data.allLinks.pop()
66+
store.writeQuery({
67+
query: ALL_LINKS_QUERY,
68+
data,
69+
variables: { first, skip, orderBy }
70+
})
5171
}
5272
})
53-
const { history } = this.props
54-
history.push(`/`)
73+
this.props.history.push(`/new/1`)
5574
}
5675

5776
}
5877

59-
const CREATE_LINK_MUTATION= gql`
78+
const CREATE_LINK_MUTATION = gql`
6079
mutation CreateLinkMutation($description: String!, $url: String!, $postedById: ID!) {
6180
createLink(
6281
description: $description,
6382
url: $url,
6483
postedById: $postedById
6584
) {
6685
id
86+
createdAt
87+
url
88+
description
89+
postedBy {
90+
id
91+
name
92+
}
93+
votes {
94+
id
95+
}
6796
}
6897
}
6998
`

‎src/components/Link.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ class Link extends Component {
77
render() {
88

99
const userId = localStorage.getItem(GC_USER_ID)
10+
console.log(`Link - userId:`, userId)
1011
return (
1112
<div>
1213
{userId && <div onClick={() => this._voteForLink()}>▲</div>}

‎src/components/LinkList.js

Lines changed: 78 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React, { Component } from 'react'
22
import { gql, graphql } from 'react-apollo'
33
import Link from './Link'
4-
import { GC_USER_ID } from '../constants'
4+
import { GC_USER_ID, GC_AUTH_TOKEN, LINKS_PER_PAGE } from '../constants'
55

6-
const LINKS_PER_PAGE = 2
76

87
class LinkList extends Component {
98

@@ -13,33 +12,60 @@ class LinkList extends Component {
1312
}
1413

1514
render() {
16-
if (this.props.allLinksQuery.loading) {
15+
16+
if (this.props.allLinksQuery && this.props.allLinksQuery.loading) {
1717
return <div>Loading</div>
1818
}
19+
20+
if (this.props.allLinksQuery && this.props.allLinksQuery.error) {
21+
return <div>Error</div>
22+
}
23+
24+
const isNewPage = this.props.location.pathname.includes('new')
25+
const linksToRender = this._getLinksToRender(isNewPage)
1926
const userId = localStorage.getItem(GC_USER_ID)
27+
2028
return (
2129
<div>
2230
{!userId ?
2331
<button onClick={() => {
24-
const { history } = this.props
25-
history.push('/login')
32+
this.props.history.push('/login')
2633
}}>Login</button> :
27-
<button onClick={() => {
28-
const { history } = this.props
29-
history.push('/create')
30-
}}>New Post</button>
34+
<div>
35+
<button onClick={() => {
36+
this.props.history.push('/create')
37+
}}>New Post</button>
38+
<button onClick={() => {
39+
localStorage.removeItem(GC_USER_ID)
40+
localStorage.removeItem(GC_AUTH_TOKEN)
41+
this.forceUpdate()
42+
{/*this.setState({})*/}
43+
}}>Logout</button>
44+
</div>
3145
}
3246
<div>
33-
{this.props.allLinksQuery.allLinks.map(link => (
47+
{linksToRender.map(link => (
3448
<Link key={link.id} updateStoreAfterVote={this._updateCacheAfterVote} link={link}/>
3549
))}
3650
</div>
51+
{isNewPage &&
3752
<div>
38-
<button onClick={() => this._previousPage()}>previous</button>
39-
<button onClick={() => this._nextPage()}>next</button>
53+
<button onClick={() => this._previousPage()}>Previous</button>
54+
<button onClick={() => this._nextPage()}>Next</button>
4055
</div>
56+
}
4157
</div>
4258
)
59+
60+
}
61+
62+
_getLinksToRender = (isNewPage) => {
63+
if (isNewPage) {
64+
return this.props.allLinksQuery.allLinks
65+
}
66+
const rankedLinks = this.props.allLinksQuery.allLinks.slice()
67+
rankedLinks.sort((l1, l2) => l2.votes.length - l1.votes.length)
68+
return rankedLinks
4369
}
4470

4571
_subscribeToNewLinks = () => {
@@ -66,15 +92,23 @@ class LinkList extends Component {
6692
}
6793
`,
6894
updateQuery: (previous, { subscriptionData }) => {
69-
const newAllLinks = [
70-
subscriptionData.data.Link.node,
71-
...previous.allLinks
72-
]
73-
const result = {
74-
...previous,
75-
allLinks: newAllLinks
95+
const isNewPage = this.props.location.pathname.includes('new')
96+
const page = parseInt(this.props.match.params.page, 10)
97+
const isFirstPage = page === 1
98+
99+
if (isNewPage && isFirstPage) {
100+
const newAllLinks = [
101+
subscriptionData.data.Link.node,
102+
...previous.allLinks
103+
]
104+
newAllLinks.pop()
105+
const result = {
106+
...previous,
107+
allLinks: newAllLinks
108+
}
109+
return result
76110
}
77-
return result
111+
return previous
78112
}
79113
})
80114
}
@@ -115,49 +149,48 @@ class LinkList extends Component {
115149
allLinks: newAllLinks
116150
}
117151
return result
118-
// return Immutable.setIn(previous, ['allItems', 0], link)
119152
}
120153
})
121154
}
122155

123156
_nextPage = () => {
124-
const { history } = this.props
125-
const page = this.props.match.params.page
157+
const page = parseInt(this.props.match.params.page, 10)
126158
if (page <= this.props.allLinksQuery._allLinksMeta.count / LINKS_PER_PAGE) {
127-
const nextPage = parseInt(page) + 1
128-
history.push(`/${nextPage}`)
159+
const nextPage = page + 1
160+
this.props.history.push(`/new/${nextPage}`)
129161
}
130162
}
131163

132164
_previousPage = () => {
133-
const { history } = this.props
134-
const page = this.props.match.params.page
165+
const page = parseInt(this.props.match.params.page, 10)
135166
if (page > 1) {
136-
const nextPage = parseInt(page) - 1
137-
history.push(`/${nextPage}`)
167+
const nextPage = page - 1
168+
this.props.history.push(`/new/${nextPage}`)
138169
}
139170
}
140171

141172
_updateCacheAfterVote = (store, createVote, linkId) => {
142-
const { pathname } = this.props.location
143-
const page = parseInt(pathname.substring(1, pathname.length))
144-
const skip = (page - 1) * LINKS_PER_PAGE
145-
const first = LINKS_PER_PAGE
146-
const data = store.readQuery({ query: ALL_LINKS_QUERY, variables: { first, skip } })
173+
const isNewPage = this.props.location.pathname.includes('new')
174+
const page = parseInt(this.props.match.params.page, 10)
175+
const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0
176+
const first = isNewPage ? LINKS_PER_PAGE : 100
177+
const orderBy = isNewPage ? "createdAt_DESC" : null
178+
const data = store.readQuery({ query: ALL_LINKS_QUERY, variables: { first, skip, orderBy } })
179+
147180
const votedLink = data.allLinks.find(link => link.id === linkId)
148181
votedLink.votes = createVote.link.votes
149182
store.writeQuery({ query: ALL_LINKS_QUERY, data })
150183
}
151184

152185
}
153186

154-
const ALL_LINKS_QUERY = gql`
155-
query AllLinksQuery($first: Int, $skip: Int) {
156-
allLinks(first: $first, skip: $skip) {
187+
export const ALL_LINKS_QUERY = gql`
188+
query AllLinksQuery($first: Int, $skip: Int, $orderBy: LinkOrderBy) {
189+
allLinks(first: $first, skip: $skip, orderBy: $orderBy) {
157190
id
191+
createdAt
158192
url
159193
description
160-
createdAt
161194
postedBy {
162195
id
163196
name
@@ -175,14 +208,14 @@ const ALL_LINKS_QUERY = gql`
175208
export default graphql(ALL_LINKS_QUERY, {
176209
name: 'allLinksQuery',
177210
options: (ownProps) => {
178-
const { pathname } = ownProps.location
179-
const page = parseInt(pathname.substring(1, pathname.length))
211+
const page = parseInt(ownProps.match.params.page, 10)
212+
const isNewPage = ownProps.location.pathname.includes('new')
213+
const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0
214+
const first = isNewPage ? LINKS_PER_PAGE : 100
215+
const orderBy = isNewPage ? "createdAt_DESC" : null
180216
return {
181-
variables: {
182-
skip: (page - 1) * LINKS_PER_PAGE,
183-
first: LINKS_PER_PAGE
184-
},
185-
fetchPolicy: 'network-only'
217+
variables: { first, skip, orderBy },
218+
fetchPolicy: 'cache-and-network'
186219
}
187220
}
188221
}) (LinkList)

‎src/constants.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
export const GC_USER_ID = 'graphcool-user-id'
2-
export const GC_AUTH_TOKEN = 'graphcool-auth-token'
2+
export const GC_AUTH_TOKEN = 'graphcool-auth-token'
3+
4+
export const LINKS_PER_PAGE = 5

0 commit comments

Comments
 (0)