Created
July 19, 2015 23:57
-
-
Save frikille/a1e09b357f76fbce653d to your computer and use it in GitHub Desktop.
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
| @GQLQuery | |
| class CommentsAndLikes extends React.Component { | |
| static queries = { | |
| commentAndLikes() { | |
| return ` | |
| likes { | |
| id, | |
| user { | |
| id | |
| } | |
| }, | |
| comments { | |
| id, | |
| user { | |
| id, | |
| username, | |
| avatar_url | |
| } | |
| }`; | |
| }, | |
| like(postId) { | |
| return `post { like(postId: ${postId}) { user { id } } }`; | |
| }, | |
| unlike(postId) { | |
| return `post { unlike(postId: ${postId})}`; | |
| } | |
| } | |
| handleLikeButtonClick() { | |
| DataFetching.post('/graphql', { | |
| q: CommentsAndLikes.getQuery('like', this.props.postId) | |
| }) | |
| .then(response => { | |
| let {like} = response.body.data.data.post; | |
| if (this.props.likes.count() === 0) { | |
| this.props.statics.edit(data => { | |
| return data.mergeDeep({likes: [like]}); | |
| }); | |
| } else { | |
| this.props.statics.edit(data => { | |
| return data.mergeDeepIn(['likes', data.get('likes').count() + ''], like); | |
| }); | |
| } | |
| }); | |
| } | |
| handleUnlikeButtonClick() { | |
| DataFetching.post('/graphql', { | |
| q: CommentsAndLikes.getQuery('unlike', this.props.postId) | |
| }) | |
| .then(response => { | |
| let removedUserId = response.body.data.data.post.unlike; | |
| this.props.statics.edit(data => { | |
| return data.setIn(['likes'], data.get('likes').filter(like => { | |
| return like.getIn(['user', 'id']) !== removedUserId; | |
| })); | |
| }); | |
| }); | |
| } | |
| render() { | |
| return ( | |
| // render function implementation | |
| ); | |
| } | |
| } | |
| class Post extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <div> | |
| {/* Post page layout, title only for now */} | |
| {this.props.data.getIn(['post', 'title'])} | |
| </div> | |
| <CommentsAndLikes comments={this.props.data.getIn(['post', 'comments'])} | |
| likes={this.props.data.getIn(['post', 'likes'])} | |
| postId={this.props.data.getIn(['post', 'id']) | |
| statics={{edit: subedit(this.props.statics.edit, 'post')}}/> | |
| </div> | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment