Auto Load More and other bug fixes

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Spinner} from 'coral-ui';
+
+class AutoLoadMore extends React.Component {
+  componentDidMount() {
+    if(!this.props.loading) {
+      this.props.loadMore();
+    }
+  }
+
+  render() {
+    return <Spinner />;
+  }
+}
+
+export default AutoLoadMore;

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

@@ -13,7 +13,9 @@ import ViewOptions from './ViewOptions';
 
 class Moderation extends Component {
 
-  state = {};
+  state = {
+    isLoadingMore: false,
+  };
 
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
@@ -88,15 +90,15 @@ class Moderation extends Component {
   }
 
   loadMore = async () => {
-    if (!this.isLoadingMore) {
-      this.isLoadingMore = true;
+    if (!this.state.isLoadingMore) {
+      this.setState({isLoadingMore: true});
       try {
         const result = await this.props.loadMore(this.props.activeTab);
-        this.isLoadingMore = false;
+        this.setState({isLoadingMore: false});
         return result;
       }
       catch (e) {
-        this.isLoadingMore = false;
+        this.setState({isLoadingMore: false});
         throw e;
       }
     }
@@ -194,6 +196,7 @@ class Moderation extends Component {
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             loadMore={this.loadMore}
+            isLoadingMore={this.state.isLoadingMore}
             commentCount={activeTabCount}
             currentUserId={this.props.auth.user.id}
             viewUserDetail={viewUserDetail}

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

@@ -2,6 +2,7 @@
   padding: 8px 0;
   list-style: none;
   display: block;
+  min-height: 650px;
 }
 
 :global(html) {

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Comment from '../containers/Comment';
 import styles from './ModerationQueue.css';
 import EmptyCard from '../../../components/EmptyCard';
-import LoadMore from '../../../components/LoadMore';
+import AutoLoadMore from './AutoLoadMore';
 import ViewMore from './ViewMore';
 import t from 'coral-framework/services/i18n';
 import {WindowScroller, CellMeasurer, CellMeasurerCache, List} from 'react-virtualized';
@@ -57,7 +57,6 @@ const cache = new CellMeasurerCache({
 });
 
 class ModerationQueue extends React.Component {
-  isLoadingMore = false;
   cache = cache;
   listRef = null;
 
@@ -222,9 +221,9 @@ class ModerationQueue extends React.Component {
           <div
             style={style}
           >
-            <LoadMore
+            <AutoLoadMore
               loadMore={this.props.loadMore}
-              showLoadMore={this.props.comments.length < this.props.commentCount}
+              loading={this.props.isLoadingMore}
             />
           </div>
         </CellMeasurer>
@@ -304,6 +303,7 @@ class ModerationQueue extends React.Component {
     }
 
     const view = this.getVisibleComments();
+    const hasMore = this.props.comments.length < this.props.commentCount;
 
     return (
       <div className={styles.root}>
@@ -325,7 +325,7 @@ class ModerationQueue extends React.Component {
               scrollTop={scrollTop}
               isScrolling={isScrolling}
               onScroll={onChildScroll}
-              rowCount={view.length + 1}
+              rowCount={hasMore ? view.length + 1 : view.length}
               deferredMeasurementCache={this.cache}
               rowRenderer={this.rowRenderer}
               rowHeight={this.cache.rowHeight}
@@ -350,6 +350,7 @@ ModerationQueue.propTypes = {
   loadMore: PropTypes.func.isRequired,
   selectedCommentId: PropTypes.string,
   singleView: PropTypes.bool,
+  isLoadingMore: PropTypes.bool,
   activeTab: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,

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

@@ -179,7 +179,7 @@ class ModerationContainer extends Component {
 
   loadMore = (tab) => {
     const variables = {
-      limit: 50,
+      limit: 20,
       cursor: this.props.root[tab].endCursor,
       sortOrder: this.props.data.variables.sortOrder,
       asset_id: this.props.data.variables.asset_id,
@@ -363,7 +363,8 @@ const withModQueueQuery = withQuery(({queueConfig}) => gql`
         ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
         ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
         asset_id: $asset_id,
-        sortOrder: $sortOrder
+        sortOrder: $sortOrder,
+        limit: 20,
       }) {
         ...CoralAdmin_Moderation_CommentConnection
       }

client/coral-framework/hocs/withQuery.js

@@ -83,6 +83,9 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     // Handle any pending susbcription data in the subscription queue at max once every second.
     // Updates are batched in written into apollo in one go.
     processSubscriptionQueue = throttle(() => {
+      if (!this.subscriptionQueue.length) {
+        return;
+      }
       const variables = typeof this.wrappedOptions === 'function'
         ? this.wrappedOptions(this.props).variables
         : this.wrappedOptions.variables;

package.json

@@ -167,7 +167,7 @@
     "react-test-renderer": "15.5",
     "react-toastify": "^1.5.0",
     "react-transition-group": "^1.1.3",
-    "react-virtualized": "9.9.0",
+    "react-virtualized": "9.13.0",
     "recompose": "^0.23.1",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",

yarn.lock

@@ -1020,7 +1020,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
+babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -7464,11 +7464,11 @@ react-transition-group@^1.1.2, react-transition-group@^1.1.3:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react-virtualized@9.9.0:
-  version "9.9.0"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.9.0.tgz#799a6f23819eeb82860d59b82fad33d1d420325e"
+react-virtualized@9.13.0:
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.13.0.tgz#83e4d984271a37631225e5fe6faeaeada6e59f53"
   dependencies:
-    babel-runtime "^6.11.6"
+    babel-runtime "^6.23.0"
     classnames "^2.2.3"
     dom-helpers "^2.4.0 || ^3.0.0"
     loose-envify "^1.3.0"