CommentsAndLikes.jsx

@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>
    );
  }
}