Last active
April 5, 2016 21:27
Star
You must be signed in to star a gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Relay from 'react-relay'; | |
const pageSize = 2; | |
class Content extends React.Component { | |
componentWillMount() { | |
this.hasNextPage = this.props.user.next ? this.props.user.next.pageInfo.hasNextPage : false; | |
this.hasPreviousPage = this.props.user.prev ? this.props.user.prev.pageInfo.hasPreviousPage : false; | |
} | |
componentWillReceiveProps(nextProps) { | |
this.hasNextPage = nextProps.user.next ? nextProps.user.next.pageInfo.hasNextPage : this.hasNextPage; | |
this.hasPreviousPage = nextProps.user.prev ? nextProps.user.prev.pageInfo.hasPreviousPage : this.hasPreviousPage; | |
} | |
nextPage() { | |
this.hasPreviousPage = true; | |
const pageInfo = this.props.user.next ? this.props.user.next.pageInfo : this.props.user.prev.pageInfo; | |
const cursor = pageInfo.endCursor; | |
this.props.relay.setVariables({ after: cursor, next: true, prev: false }); | |
} | |
prevPage() { | |
this.hasNextPage = true; | |
const pageInfo = this.props.user.next ? this.props.user.next.pageInfo : this.props.user.prev.pageInfo; | |
const cursor = pageInfo.startCursor; | |
this.props.relay.setVariables({ before: cursor, next: false, prev: true }); | |
} | |
assetEdges() { | |
// get the next edges or the prev edges, or just get an empty array | |
return (this.props.user ? | |
(this.props.user.next ? this.props.user.next.edges : | |
(this.props.user.prev ? this.props.user.prev.edges : [])) | |
: []) | |
} | |
render() { | |
const prevButton = this.hasPreviousPage ? <button onClick={ this.prevPage.bind(this) }>prev page</button> : ''; | |
const nextButton = this.hasNextPage ? <button onClick={ this.nextPage.bind(this) }>next page</button> : ''; | |
return ( | |
<div> | |
<div> | |
{ this.assetEdges().map(edge => <AssetCard {...edge.node} key={ edge.node.__dataID__ } />) } | |
</div> | |
{ prevButton } | |
{ nextButton } | |
</div> | |
); | |
} | |
} | |
const AssetCard = props => { | |
return ( | |
<div> | |
<h2>{ props.metadata.title }</h2> | |
<ul> | |
<li>artist: { props.metadata.artist }</li> | |
<li>label: { props.metadata.label }</li> | |
<li>genre: { props.metadata.genre }</li> | |
</ul> | |
</div> | |
) | |
} | |
export default Relay.createContainer(Content, { | |
initialVariables: { | |
first: pageSize, | |
last: pageSize, | |
after: null, | |
before: null, | |
next: true, | |
prev: false | |
}, | |
fragments: { | |
user: () => Relay.QL` | |
fragment on Account { | |
next: assets(first: $first, after: $after) @include(if: $next) { | |
edges { | |
node { | |
metadata { | |
title | |
artist | |
label | |
genre | |
} | |
} | |
} | |
pageInfo { | |
hasNextPage | |
hasPreviousPage | |
startCursor | |
endCursor | |
} | |
} | |
prev: assets(last: $last, before: $before) @include(if: $prev) { | |
edges { | |
node { | |
metadata { | |
title | |
artist | |
label | |
genre | |
} | |
} | |
} | |
pageInfo { | |
hasNextPage | |
hasPreviousPage | |
startCursor | |
endCursor | |
} | |
} | |
} | |
` | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
you could combine next and prev and make one
@skip
and one@include