We'll first need an event handler to invoke the mutation. We'll use a click handler on the thumbs-up icon.
In the displayLikes()
method on the Quote
component (in js/Quote.js
), modify the span for the icon to include an onClick
event:
displayLikes() {
if (!this.props.relay.variables.showLikes) {
return null;
}
return (
<div>
{this.props.quote.likesCount}
<span className="glyphicon glyphicon-thumbs-up"
onClick={this.thumbsUpClick}></span>
</div>
);
}
thumbsUpClick
will simply instantiate a mutation class and pass it to Relay.Store.commitUpdate
:
// In js/quote.js Quote component definition thumbsUpClick = () => { Relay.Store.commitUpdate( new ThumbsUpMutation({ quote: this.props.quote }) ) };
The instantiated object from...