likes.jsx

import React, {Component} from 'react';
import {graphql} from 'react-apollo';

import addLike from '../queries/addLikes.js';
import removeLike from '../queries/removeLikes.js';
import getSongQuery from '../queries/fetchSongByID';

class Likes extends Component {

  onAddLikeClick(){
    console.log('onAdd')
    this.props.mutate({
      variables: {
        lyricId: this.props.lyricId
      },
      refetchQueries: [{query: getSongQuery, variables: {songId: this.props.songId}}]
    })
  }

  onRemoveLikeClick(){
    console.log('onRemove')
    this.props.mutate({
      variables: {
        lyricId: this.props.lyricId
      },
      refetchQueries: [{query: getSongQuery, variables: {songId: this.props.songId}}]
    })
  }


//-------------------
  render(){

    console.log('likesProps', this.props)

    return(
      <div className="row">
        <div className="col-4 card text-center">{this.props.likes} Likes</div>
        <div className="col-4 btn btn-sm btn-success"
          onClick={this.onAddLikeClick.bind(this)}
          >upvote</div>
        <div className="col-4 btn btn-sm btn-warning"
          onClick={this.onRemoveLikeClick.bind(this)}
          >downvote</div>
      </div>
    );
  }
}

export default graphql(removeLike)(
  graphql(addLike)(
    graphql(getSongQuery)(Likes)
  )
);