Restrict notifications to comments which are rendered

client/coral-admin/src/routes/Moderation/components/ModerationQueue.js

@@ -166,7 +166,7 @@ class ModerationQueue extends React.Component {
     const {comments: prevComments} = this.props;
     const {comments: nextComments} = next;
 
-    if (!prevComments && nextComments) {
+    if (!prevComments && nextComments || !prevComments.length && nextComments.length) {
       this.setState(resetCursors);
       return;
     }
@@ -227,11 +227,11 @@ class ModerationQueue extends React.Component {
   reflowList = throttle((index) => {
     if (index >= 0) {
       this.cache.clear(index);
-      this.listRef.recomputeRowHeights(index);
+      this.listRef && this.listRef.recomputeRowHeights(index);
     }
     else {
       this.cache.clearAll();
-      this.listRef.recomputeRowHeights();
+      this.listRef && this.listRef.recomputeRowHeights();
     }
   }, 500);
 
@@ -243,6 +243,7 @@ class ModerationQueue extends React.Component {
     const view = this.state.view;
     const rowCount = view.length + 1;
     if (index === rowCount - 1) {
+      const hasMore = this.props.comments.length < this.props.commentCount;
       return (
         <CellMeasurer
           cache={this.cache}
@@ -253,11 +254,12 @@ class ModerationQueue extends React.Component {
         >
           <div
             style={style}
+            id={'end-of-comment-list'}
           >
-            <AutoLoadMore
+            {hasMore && <AutoLoadMore
               loadMore={this.props.loadMore}
               loading={this.props.isLoadingMore}
-            />
+            />}
           </div>
         </CellMeasurer>
       );
@@ -336,7 +338,6 @@ class ModerationQueue extends React.Component {
     }
 
     const view = this.state.view;
-    const hasMore = this.props.comments.length < this.props.commentCount;
 
     return (
       <div className={styles.root}>
@@ -358,7 +359,7 @@ class ModerationQueue extends React.Component {
               scrollTop={scrollTop}
               isScrolling={isScrolling}
               onScroll={onChildScroll}
-              rowCount={hasMore ? view.length + 1 : view.length}
+              rowCount={view.length + 1}
               deferredMeasurementCache={this.cache}
               rowRenderer={this.rowRenderer}
               rowHeight={this.cache.rowHeight}

client/coral-admin/src/routes/Moderation/graphql.js

@@ -59,6 +59,11 @@ function addCommentToQueue(root, queue, comment, sortOrder) {
   return update(root, changes);
 }
 
+export function sortComments(nodes, sortOrder) {
+  const sortAlgo = sortOrder === 'ASC' ? ascending : descending;
+  return nodes.sort(sortAlgo);
+}
+
 /**
  * getCommentQueues determines in which queues a comment should be placed.
  */
@@ -83,6 +88,14 @@ function getCommentQueues(comment, queueConfig) {
   return queues;
 }
 
+function isVisible(id) {
+  return !!document.getElementById(`comment_${id}`);
+}
+
+function isEndOfListVisible(root, queue) {
+  return root[queue].nodes.length === 0 || !!document.getElementById('end-of-comment-list');
+}
+
 /**
  * Assimilate comment changes into current store.
  * @param  {Object} root               current state of the store
@@ -111,22 +124,18 @@ export function handleCommentChange(root, comment, sortOrder, notify, queueConfi
     if (nextQueues.indexOf(queue) >= 0) {
       if (!queueHasComment(next, queue, comment.id)) {
         next = addCommentToQueue(next, queue, comment, sortOrder);
-        if (notify && activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sortOrder)) {
+        if (notify && activeQueue === queue && isEndOfListVisible(root, queue)) {
           showNotificationOnce();
         }
       }
     } else if(queueHasComment(next, queue, comment.id)){
       next = removeCommentFromQueue(next, queue, comment.id);
-      if (notify && activeQueue === queue) {
+      if (notify && isVisible(comment.id)) {
         showNotificationOnce();
       }
     }
 
-    if (
-      notify
-      && queueHasComment(next, queue, comment.id)
-      && activeQueue === queue
-    ) {
+    if (notify && isVisible(comment.id)) {
       showNotificationOnce();
     }
   });