Fix tombstone bug

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import LoadMore from './LoadMore';
-import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import NewCount from './NewCount';
 import {TransitionGroup} from 'react-transition-group';
 import {forEachError} from 'coral-framework/utils';
@@ -138,7 +137,6 @@ class AllCommentsPane extends React.Component {
       loadNewReplies,
       deleteAction,
       showSignInDialog,
-      commentIsIgnored,
       charCountEnable,
       maxCharCount,
       editComment,
@@ -156,9 +154,8 @@ class AllCommentsPane extends React.Component {
         />
         <TransitionGroup component='div' className="embed__stream">
           {view.map((comment) => {
-            return commentIsIgnored(comment)
-              ? <IgnoredCommentTombstone key={comment.id} />
-              : <Comment
+            return (
+              <Comment
                 commentClassNames={commentClassNames}
                 data={data}
                 root={root}
@@ -172,7 +169,6 @@ class AllCommentsPane extends React.Component {
                 currentUser={currentUser}
                 postFlag={postFlag}
                 postDontAgree={postDontAgree}
-                commentIsIgnored={commentIsIgnored}
                 loadMore={loadNewReplies}
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
@@ -182,7 +178,8 @@ class AllCommentsPane extends React.Component {
                 maxCharCount={maxCharCount}
                 editComment={editComment}
                 emit={emit}
-              />;
+              />
+            );
           })}
         </TransitionGroup>
         <LoadMore

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

@@ -183,9 +183,6 @@ export default class Comment extends React.Component {
       })
     }).isRequired,
 
-    // given a comment, return whether it should be rendered as ignored
-    commentIsIgnored: PropTypes.func,
-
     // edit a comment, passed (id, asset_id, { body })
     editComment: PropTypes.func,
 
@@ -212,9 +209,18 @@ export default class Comment extends React.Component {
     }
   }
 
+  commentIsIgnored(comment) {
+    const me = this.props.root.me;
+    return (
+      me &&
+      me.ignoredUsers &&
+      me.ignoredUsers.find((u) => u.id === comment.user.id)
+    );
+  }
+
   hasIgnoredReplies() {
     return this.props.comment.replies &&
-      this.props.comment.replies.nodes.some((reply) => this.props.commentIsIgnored(reply));
+      this.props.comment.replies.nodes.some((reply) => this.commentIsIgnored(reply));
   }
 
   loadNewReplies = () => {
@@ -327,12 +333,15 @@ export default class Comment extends React.Component {
       charCountEnable,
       showSignInDialog,
       liveUpdates,
-      commentIsIgnored,
       animateEnter,
       emit,
       commentClassNames = []
     } = this.props;
 
+    if (this.commentIsIgnored(comment)) {
+      return <IgnoredCommentTombstone />;
+    }
+
     const view = this.getVisibileReplies();
 
     // Inactive comments can be viewed by moderators and admins (e.g. using permalinks).
@@ -566,9 +575,8 @@ export default class Comment extends React.Component {
 
         <TransitionGroup>
           {view.map((reply) => {
-            return commentIsIgnored(reply)
-              ? <IgnoredCommentTombstone key={reply.id} />
-              : <CommentContainer
+            return (
+              <CommentContainer
                 data={this.props.data}
                 root={this.props.root}
                 setActiveReplyBox={setActiveReplyBox}
@@ -588,13 +596,13 @@ export default class Comment extends React.Component {
                 charCountEnable={charCountEnable}
                 maxCharCount={maxCharCount}
                 showSignInDialog={showSignInDialog}
-                commentIsIgnored={commentIsIgnored}
                 liveUpdates={liveUpdates}
                 reactKey={reply.id}
                 key={reply.id}
                 comment={reply}
                 emit={emit}
-              />;
+              />
+            );
           })}
         </TransitionGroup>
         <div className="talk-load-more-replies">

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

@@ -40,15 +40,6 @@ class Stream extends React.Component {
     }
   }
 
-  commentIsIgnored = (comment) => {
-    const me = this.props.root.me;
-    return (
-      me &&
-      me.ignoredUsers &&
-      me.ignoredUsers.find((u) => u.id === comment.user.id)
-    );
-  };
-
   renderHighlightedComment() {
     const {
       data,
@@ -104,7 +95,6 @@ class Stream extends React.Component {
           deleteAction={deleteAction}
           showSignInDialog={showSignInDialog}
           key={topLevelComment.id}
-          commentIsIgnored={this.commentIsIgnored}
           comment={topLevelComment}
           charCountEnable={asset.settings.charCountEnable}
           maxCharCount={asset.settings.charCount}
@@ -193,7 +183,6 @@ class Stream extends React.Component {
                 loadNewReplies={loadNewReplies}
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
-                commentIsIgnored={this.commentIsIgnored}
                 charCountEnable={asset.settings.charCountEnable}
                 maxCharCount={asset.settings.charCount}
                 editComment={editComment}

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

@@ -93,6 +93,11 @@ const withCommentFragments = withFragments({
     fragment CoralEmbedStream_Comment_root on RootQuery {
       __typename
       ${getSlotFragmentSpreads(slots, 'root')}
+      me {
+        ignoredUsers {
+          id
+        }
+      }
     }
     `,
   asset: gql`