Ignore User UI actually sends mutation

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

@@ -91,6 +91,9 @@ class Comment extends React.Component {
 
     // dispatch action to remove a tag from a comment
     removeCommentTag: React.PropTypes.func,
+
+    // dispatch action to ignore another user
+    ignoreUser: React.PropTypes.func,
   }
 
   render () {
@@ -113,6 +116,7 @@ class Comment extends React.Component {
       deleteAction,
       addCommentTag,
       removeCommentTag,
+      ignoreUser,
       disableReply,
     } = this.props;
 
@@ -152,6 +156,9 @@ class Comment extends React.Component {
           name: PropTypes.string.isRequired
         }).isRequired,
         cancel: PropTypes.func.isRequired,
+
+        // actually submit the ignore. Provide {id: user id to ignore}
+        ignoreUser: PropTypes.func,
       }
       constructor(props) {
         super(props);
@@ -166,7 +173,7 @@ class Comment extends React.Component {
         this.props.cancel();
       }
       render() {
-        const {user} = this.props;
+        const {user, ignoreUser} = this.props;
         const goToStep = (stepNum) => this.setState({step: stepNum});
         const step1 = (
           <div>
@@ -178,13 +185,17 @@ class Comment extends React.Component {
             </div>
           </div>
         );
+        const ignoreUserAndGotoStep3 = async () => {
+          await ignoreUser({id: user.id});
+          goToStep(3);
+        };
         const step2Confirmation = (
           <div>
             <header>Ignore User</header>
             <p>Are you sure you want to ignore { user.name }?</p>
             <div className={styles.textAlignRight}>
               <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
-              <Button onClick={() => goToStep(3)}>Ignore user</Button>
+              <Button onClick={ignoreUserAndGotoStep3}>Ignore user</Button>
             </div>
           </div>
         );
@@ -220,16 +231,31 @@ class Comment extends React.Component {
             name: PropTypes.string.isRequired
           }).isRequired
         }).isRequired,
+        ignoreUser: PropTypes.func,
       }
       constructor(props) {
+
+        // console.log('TopRightMenu#constructor', props)
         super(props);
         this.state = {
           chosenItem: null
         };
       }
+      componentWillUnmount() {
+
+        // console.log('TopRightMenu#componentWillUnmount')
+      }
+      componentDidMount() {
+
+        // console.log('TopRightMenu#componentDidMount')
+      }
+      componentWillReceiveProps(nextProps) {
+
+        // console.log('TopRightMenu#componentWillReceiveProps', nextProps)
+      }
       render() {
         const {chosenItem} = this.state;
-        const {comment} = this.props;
+        const {comment, ignoreUser} = this.props;
         let child;
         const chooseIgnoreUser = () => {
           this.setState({chosenItem: 'IGNORE_USER'});
@@ -238,18 +264,19 @@ class Comment extends React.Component {
         switch (chosenItem) {
         case 'IGNORE_USER':
           child = (
-              <IgnoreUserWizard
-                user={comment.user}
-                cancel={reset}
-                />
-            );
+                <IgnoreUserWizard
+                  user={comment.user}
+                  cancel={reset}
+                  ignoreUser={ignoreUser}
+                  />
+              );
           break;
         default:
           child = (
-              <Menu>
-                <Menu.Item onClick={chooseIgnoreUser}>Ignore User</Menu.Item>
-              </Menu>
-            );
+                <Menu>
+                  <Menu.Item onClick={chooseIgnoreUser}>Ignore User</Menu.Item>
+                </Menu>
+              );
         }
         return (
           <Toggleable>
@@ -281,7 +308,9 @@ class Comment extends React.Component {
           <Slot fill="commentInfoBar" commentId={comment.id} />
 
           <span className={styles.topRightMenu}>
-            <TopRightMenu comment={comment} />
+            <TopRightMenu
+              comment={comment}
+              ignoreUser={ignoreUser} />
           </span>          
 
           <Content body={comment.body} />
@@ -365,6 +394,7 @@ class Comment extends React.Component {
               deleteAction={deleteAction}
               addCommentTag={addCommentTag}
               removeCommentTag={removeCommentTag}
+              ignoreUser={ignoreUser}
               showSignInDialog={showSignInDialog}
               reactKey={reply.id}
               key={reply.id}

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

@@ -14,7 +14,7 @@ const {fetchAssetSuccess} = assetActions;
 import {NEW_COMMENT_COUNT_POLL_INTERVAL} from 'coral-framework/constants/comments';
 
 import {queryStream} from 'coral-framework/graphql/queries';
-import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag} from 'coral-framework/graphql/mutations';
+import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag, ignoreUser} from 'coral-framework/graphql/mutations';
 import {editName} from 'coral-framework/actions/user';
 import {updateCountCache, viewAllComments} from 'coral-framework/actions/asset';
 import {notificationActions, authActions, assetActions, pym} from 'coral-framework';
@@ -64,6 +64,9 @@ class Embed extends Component {
 
     // dispatch action to remove a tag from a comment
     removeCommentTag: React.PropTypes.func,
+
+    // dispatch action to ignore another user
+    ignoreUser: React.PropTypes.func,
   }
 
   componentDidMount () {
@@ -250,6 +253,7 @@ class Embed extends Component {
                     postDontAgree={this.props.postDontAgree}
                     addCommentTag={this.props.addCommentTag}
                     removeCommentTag={this.props.removeCommentTag}
+                    ignoreUser={this.props.ignoreUser}
                     loadMore={this.props.loadMore}
                     deleteAction={this.props.deleteAction}
                     showSignInDialog={this.props.showSignInDialog}
@@ -311,6 +315,7 @@ export default compose(
   postLike,
   postDontAgree,
   addCommentTag,
+  ignoreUser,
   removeCommentTag,
   deleteAction,
   queryStream,

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

@@ -19,6 +19,9 @@ class Stream extends React.Component {
 
     // dispatch action to remove a tag from a comment
     removeCommentTag: PropTypes.func,
+
+    // dispatch action to ignore another user
+    ignoreUser: React.PropTypes.func,
   }
 
   constructor(props) {
@@ -42,7 +45,8 @@ class Stream extends React.Component {
       showSignInDialog,
       addCommentTag,
       removeCommentTag,
-      pluginProps
+      pluginProps,
+      ignoreUser,
     } = this.props;
 
     return (
@@ -63,6 +67,7 @@ class Stream extends React.Component {
               postDontAgree={postDontAgree}
               addCommentTag={addCommentTag}
               removeCommentTag={removeCommentTag}
+              ignoreUser ={ignoreUser}
               loadMore={loadMore}
               deleteAction={deleteAction}
               showSignInDialog={showSignInDialog}

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

@@ -0,0 +1,7 @@
+mutation ignoreUser ($id: ID!) {
+  ignoreUser(id:$id) {
+    errors {
+      translation_key
+    }
+  }
+}

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

@@ -6,6 +6,7 @@ import POST_DONT_AGREE from './postDontAgree.graphql';
 import DELETE_ACTION from './deleteAction.graphql';
 import ADD_COMMENT_TAG from './addCommentTag.graphql';
 import REMOVE_COMMENT_TAG from './removeCommentTag.graphql';
+import IGNORE_USER from './ignoreUser.graphql';
 
 import commentView from '../fragments/commentView.graphql';
 
@@ -148,3 +149,14 @@ export const removeCommentTag = graphql(REMOVE_COMMENT_TAG, {
       });
     }}),
 });
+
+export const ignoreUser = graphql(IGNORE_USER, {
+  props: ({mutate}) => ({
+    ignoreUser: ({id}) => {
+      return mutate({
+        variables: {
+          id,
+        }
+      });
+    }}),
+});