Prevent double execution of fetchMore

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

@@ -8,6 +8,7 @@ import LoadMore from './LoadMore';
 import t from 'coral-framework/services/i18n';
 
 class ModerationQueue extends React.Component {
+  isLoadingMore = false;
 
   static propTypes = {
     viewUserDetail: PropTypes.func.isRequired,
@@ -22,7 +23,15 @@ class ModerationQueue extends React.Component {
   }
 
   loadMore = () => {
-    this.props.loadMore(this.props.activeTab);
+    if (!this.isLoadingMore) {
+      this.isLoadingMore = true;
+      this.props.loadMore(this.props.activeTab)
+        .then(() => this.isLoadingMore = false)
+        .catch((e) => {
+          this.isLoadingMore = false;
+          throw e;
+        });
+    }
   }
 
   componentDidUpdate (prev) {

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

@@ -75,6 +75,8 @@ const ActionButton = ({children}) => {
 };
 
 export default class Comment extends React.Component {
+  isLoadingReplies = false;
+
   constructor(props) {
     super(props);
 
@@ -210,14 +212,24 @@ export default class Comment extends React.Component {
   }
 
   loadNewReplies = () => {
-    const {replies, replyCount, id} = this.props.comment;
-    if (replyCount > replies.nodes.length) {
-      this.props.loadMore(id).then(() => {
-        this.setState(resetCursors(this.state, this.props));
-      });
-      return;
+    if (!this.isLoadingReplies) {
+      this.isLoadingReplies = true;
+      const {replies, replyCount, id} = this.props.comment;
+      if (replyCount > replies.nodes.length) {
+        this.props.loadMore(id)
+          .then(() => {
+            this.setState(resetCursors(this.state, this.props));
+            this.isLoadingReplies = false;
+          })
+          .catch((e) => {
+            this.isLoadingReplies = false;
+            throw e;
+          });
+        return;
+      }
+      this.setState(resetCursors);
+      this.isLoadingReplies = false;
     }
-    this.setState(resetCursors);
   };
 
   showReplyBox = () => {

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

@@ -23,15 +23,17 @@ class LoadMore extends React.Component {
     }
   }
 
+  loadMore = () => {
+    this.initialState = false;
+    this.props.loadMore();
+  }
+
   render () {
-    const {topLevel, moreComments, loadMore, replyCount} = this.props;
+    const {topLevel, moreComments, replyCount} = this.props;
     return moreComments
       ? <div className='coral-load-more'>
         <Button
-          onClick={() => {
-            this.initialState = false;
-            loadMore();
-          }}>
+          onClick={this.loadMore}>
           {topLevel ? t('framework.view_more_comments') : this.replyCountFormat(replyCount)}
         </Button>
       </div>

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

@@ -53,6 +53,8 @@ function invalidateCursor(invalidated, state, props) {
 
 class Stream extends React.Component {
 
+  isLoadingMoreMore = false;
+
   constructor(props) {
     super(props);
     this.state = resetCursors(this.state, props);
@@ -95,6 +97,18 @@ class Stream extends React.Component {
     }
   };
 
+  loadMoreComments = () => {
+    if (!this.isLoadingMore) {
+      this.isLoadingMore = true;
+      this.props.loadMoreComments()
+        .then(() => this.isLoadingMore = false)
+        .catch((e) => {
+          this.isLoadingMore = false;
+          throw e;
+        });
+    }
+  }
+
   // getVisibileComments returns a list containing comments
   // which were authored by current user or comes after the `idCursor`.
   getVisibleComments() {
@@ -288,7 +302,7 @@ class Stream extends React.Component {
               <LoadMore
                 topLevel={true}
                 moreComments={asset.comments.hasNextPage}
-                loadMore={this.props.loadMoreComments}
+                loadMore={this.loadMoreComments}
               />
             </div>}
       </div>