First implementation of ignore user plugin

client/coral-embed-stream/src/components/AllCommentsPane.js

@@ -126,7 +126,6 @@ class AllCommentsPane extends React.Component {
       root,
       comments,
       commentClassNames,
-      ignoreUser,
       setActiveReplyBox,
       activeReplyBox,
       notify,
@@ -173,7 +172,6 @@ class AllCommentsPane extends React.Component {
                 currentUser={currentUser}
                 postFlag={postFlag}
                 postDontAgree={postDontAgree}
-                ignoreUser={ignoreUser}
                 commentIsIgnored={commentIsIgnored}
                 loadMore={loadNewReplies}
                 deleteAction={deleteAction}

client/coral-embed-stream/src/components/Comment.css

@@ -66,17 +66,6 @@
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.topRight .popover {
-  margin-top: 1em;
-  right: 0px;
-}
-
-.topRight .link.active,
-.topRight .active .link {
-  padding-bottom: 0.125em;
-  border-bottom: 2px solid currentColor;
-}
-
 .editCommentForm {
   margin-bottom: 10px;
 }
@@ -175,4 +164,4 @@
 
 .username {
   margin-right: 5px;
-} 
+}

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

@@ -16,7 +16,6 @@ import mapValues from 'lodash/mapValues';
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
 import {findCommentWithId} from '../graphql/utils';
-import {TopRightMenu} from './TopRightMenu';
 import CommentContent from './CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
@@ -187,9 +186,6 @@ export default class Comment extends React.Component {
     // given a comment, return whether it should be rendered as ignored
     commentIsIgnored: PropTypes.func,
 
-    // dispatch action to ignore another user
-    ignoreUser: PropTypes.func,
-
     // edit a comment, passed (id, asset_id, { body })
     editComment: PropTypes.func,
 
@@ -317,7 +313,6 @@ export default class Comment extends React.Component {
       comment,
       postFlag,
       parentId,
-      ignoreUser,
       highlighted,
       postComment,
       currentUser,
@@ -480,16 +475,6 @@ export default class Comment extends React.Component {
                   }
                 </span>
               }
-              { isActive && (currentUser && (comment.user.id !== currentUser.id)) &&
-
-                  /* TopRightMenu allows currentUser to ignore other users' comments */
-                  <span className={cn(styles.topRight, styles.topRightMenu)}>
-                    <TopRightMenu
-                      comment={comment}
-                      ignoreUser={ignoreUser}
-                      notify={notify} />
-                  </span>
-              }
               { !isActive &&
                 <InactiveCommentLabel status={comment.status}/>
               }
@@ -600,7 +585,6 @@ export default class Comment extends React.Component {
                 postFlag={postFlag}
                 deleteAction={deleteAction}
                 loadMore={loadMore}
-                ignoreUser={ignoreUser}
                 charCountEnable={charCountEnable}
                 maxCharCount={maxCharCount}
                 showSignInDialog={showSignInDialog}

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

@@ -64,7 +64,6 @@ class Stream extends React.Component {
       postDontAgree,
       deleteAction,
       showSignInDialog,
-      ignoreUser,
       loadNewReplies,
       auth: {user},
       emit,
@@ -90,7 +89,6 @@ class Stream extends React.Component {
           data={data}
           root={root}
           commentClassNames={commentClassNames}
-          ignoreUser={ignoreUser}
           setActiveReplyBox={setActiveReplyBox}
           activeReplyBox={activeReplyBox}
           notify={notify}
@@ -133,7 +131,6 @@ class Stream extends React.Component {
       postDontAgree,
       deleteAction,
       showSignInDialog,
-      ignoreUser,
       activeStreamTab,
       setActiveStreamTab,
       loadNewReplies,
@@ -183,7 +180,6 @@ class Stream extends React.Component {
                 root={root}
                 comments={comments}
                 commentClassNames={commentClassNames}
-                ignoreUser={ignoreUser}
                 setActiveReplyBox={setActiveReplyBox}
                 activeReplyBox={activeReplyBox}
                 notify={notify}
@@ -322,9 +318,6 @@ Stream.propTypes = {
   notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
 
-  // dispatch action to ignore another user
-  ignoreUser: React.PropTypes.func,
-
   // edit a comment, passed (id, asset_id, { body })
   editComment: React.PropTypes.func
 };

client/coral-embed-stream/src/components/TopRightMenu.js

@@ -1,60 +0,0 @@
-import React, {PropTypes} from 'react';
-import {IgnoreUserWizard} from './IgnoreUserWizard';
-import Toggleable from './Toggleable';
-
-// TopRightMenu appears as a dropdown in the top right of the comment.
-// when you click the down cehvron, it expands and shows IgnoreUserWizard
-// when you click 'cancel' in the wizard, it closes the menu
-export class TopRightMenu extends React.Component {
-  static propTypes = {
-
-    // comment on which this menu appears
-    comment: PropTypes.shape({
-      user: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        username: PropTypes.string.isRequired
-      }).isRequired
-    }).isRequired,
-    ignoreUser: PropTypes.func,
-
-    // show notification to the user (e.g. for errors)
-    notify: PropTypes.func.isRequired,
-  }
-  constructor(props) {
-    super(props);
-    this.state = {
-      timesReset: 0
-    };
-  }
-  render() {
-    const {comment, ignoreUser, notify} = this.props;
-
-    // timesReset is used as Toggleable key so it re-renders on reset (closing the toggleable)
-    const reset = () => this.setState({timesReset: this.state.timesReset + 1});
-    const ignoreUserAndCloseMenuAndNotifyOnError = async ({id}) => {
-
-      // close menu
-      reset();
-
-      // ignore user
-      try {
-        await ignoreUser({id});
-      } catch (error) {
-        notify('error', 'Failed to ignore user');
-        throw error;
-      }
-    };
-    return (
-      <Toggleable key={this.state.timesReset} className="talk-stream-comment-chevron">
-        <div style={{position: 'absolute', right: 0, zIndex: 1}}>
-          <IgnoreUserWizard
-            user={comment.user}
-            cancel={reset}
-            ignoreUser={ignoreUserAndCloseMenuAndNotifyOnError}
-          />
-        </div>
-      </Toggleable>
-    );
-  }
-}
-

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

@@ -5,7 +5,7 @@ import {bindActionCreators} from 'redux';
 import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../constants/stream';
 import {
   withPostComment, withPostFlag, withPostDontAgree,
-  withDeleteAction, withIgnoreUser, withEditComment
+  withDeleteAction, withEditComment
 } from 'coral-framework/graphql/mutations';
 
 import * as authActions from 'coral-embed-stream/src/actions/auth';
@@ -374,7 +374,6 @@ export default compose(
   withPostComment,
   withPostFlag,
   withPostDontAgree,
-  withIgnoreUser,
   withDeleteAction,
   withEditComment,
 )(StreamContainer);

client/coral-embed-stream/src/graphql/index.js

@@ -108,18 +108,6 @@ export default {
     `,
   },
   mutations: {
-    IgnoreUser: ({variables}) => ({
-      updateQueries: {
-        CoralEmbedStream_Embed: (previousData) => {
-          const ignoredUserId = variables.id;
-          const updated = update(previousData, {me: {ignoredUsers: {$push: [{
-            id: ignoredUserId,
-            __typename: 'User',
-          }]}}});
-          return updated;
-        }
-      }
-    }),
     StopIgnoringUser: ({variables}) => ({
       updateQueries: {
         CoralEmbedStream_Profile: (previousData) => {

client/coral-framework/graphql/mutations.js

@@ -293,7 +293,7 @@ export const withIgnoreUser = withMutation(
     }
   `, {
     props: ({mutate}) => ({
-      ignoreUser: ({id}) => {
+      ignoreUser: (id) => {
         return mutate({
           variables: {
             id,