diff --git a/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js b/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js new file mode 100644 index 000000000..d2148f87f --- /dev/null +++ b/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 ; + } +} + +export default AutoLoadMore; diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js index 594d5d57f..5967ff556 100644 --- a/client/coral-admin/src/routes/Moderation/components/Moderation.js +++ b/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} diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css index f9e3aa59a..e39bb67fe 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css +++ b/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) { diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js index 87833151a..e069c3033 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js +++ b/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 {
-
@@ -304,6 +303,7 @@ class ModerationQueue extends React.Component { } const view = this.getVisibleComments(); + const hasMore = this.props.comments.length < this.props.commentCount; return (
@@ -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, diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js index d858cc856..29b64f0aa 100644 --- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js +++ b/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 } diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js index 280191f89..ffd5a1671 100644 --- a/client/coral-framework/hocs/withQuery.js +++ b/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; diff --git a/package.json b/package.json index f16053ab5..ab37b62f5 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 81fb50604..27728e2ea 100644 --- a/yarn.lock +++ b/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"