addCommentTag mutation works

client/coral-embed-stream/src/Comment.js

@@ -112,11 +112,11 @@ class Comment extends React.Component {
 
     // @TODO(bengo) Would be best to only create these funcs on prop change
     const addBestTag = () => addCommentTag({
-      comment_id: comment.id,
+      id: comment.id,
       tag: BEST_TAG,
     });
     const removeBestTag = () => removeCommentTag({
-      comment_id: comment.id,
+      id: comment.id,
       tag: BEST_TAG,
     });
 

client/coral-framework/graphql/mutations/addCommentTag.graphql

@@ -1,10 +1,11 @@
-mutation AddCommentTag ($comment_id: ID!, $tag: String!) {
-  addCommentTag(comment_id:$comment_id, tag:$tag) {
-  	comment {
-	    tags {
-	      name
-	    }
-  	}
+mutation AddCommentTag ($id: ID!, $tag: String!) {
+  addCommentTag(id:$id, tag:$tag) {
+    comment {
+      id
+      tags {
+        name
+      }
+    }
     errors {
       translation_key
     }

client/coral-framework/graphql/mutations/index.js

@@ -127,9 +127,10 @@ export const deleteAction = graphql(DELETE_ACTION, {
 
 export const addCommentTag = graphql(ADD_COMMENT_TAG, {
   props: ({mutate}) => ({
-    addCommentTag: (tag) => {
+    addCommentTag: ({id, tag}) => {
       return mutate({
         variables: {
+          id,
           tag
         }
       });

client/coral-plugin-best/BestButton.js

@@ -5,7 +5,10 @@ import classnames from 'classnames';
 
 // tag string for best comments
 export const BEST_TAG = 'BEST';
-export const commentIsBest = ({tags} = {}) => Array.isArray(tags) && tags.some(t => t === BEST_TAG);
+export const commentIsBest = ({tags} = {}) => {
+  const isBest = Array.isArray(tags) && tags.some(t => t.name === BEST_TAG);
+  return isBest;
+};
 
 const name = 'coral-plugin-best';
 const lang = new I18n(translations);
@@ -38,10 +41,6 @@ export class BestButton extends Component {
     removeBest: PropTypes.func.isRequired,
   }
 
-  state = {
-    best: false
-  }
-
   constructor(props) {
     super(props);
     this.onClickAddBest = this.onClickAddBest.bind(this);
@@ -75,8 +74,7 @@ export class BestButton extends Component {
     // @TODO(bengo) Consider adding the comment__action classes to other buttons to add cursor:pointer and never wrap the icons
     // @TODO(bengo) Should I reuse another element like coral-ui button? Just doing what LikeButton does for now
     // Oh. I think that's styled for the admin. Don't use coral-ui button until the whole comment bottom bar does.
-    let {isBest} = this.state;
-    const {addBest, removeBest} = this.props;
+    const {isBest, addBest, removeBest} = this.props;
     return <div className={classnames(`${name}-container`, `${name}-button`, 'comment__action-button--nowrap',
                                       `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}>
       <button onClick={isBest ? this.onClickRemoveBest : this.onClickAddBest}