diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 25a7a9511..99a1ec656 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -21,7 +21,8 @@ import ModerationKeysModal from '../../components/ModerationKeysModal';
class ModerationContainer extends Component {
state = {
- selectedIndex: 0
+ selectedIndex: 0,
+ sort: 'REVERSE_CHRONOLOGICAL'
}
componentWillMount() {
@@ -53,6 +54,11 @@ class ModerationContainer extends Component {
}
+ selectSort = (sort) => {
+ this.setState({sort});
+ this.props.modQueueResort(sort);
+ }
+
componentWillUnmount() {
key.unbind('s');
key.unbind('shift+/');
@@ -71,7 +77,7 @@ class ModerationContainer extends Component {
}
render () {
- const {data, moderation, settings, assets, modQueueResort, onClose, ...props} = this.props;
+ const {data, moderation, settings, assets, onClose, ...props} = this.props;
const providedAssetId = this.props.params.id;
const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
@@ -103,7 +109,8 @@ class ModerationContainer extends Component {
premodCount={data.premodCount}
rejectedCount={data.rejectedCount}
flaggedCount={data.flaggedCount}
- modQueueResort={modQueueResort}
+ selectSort={this.selectSort}
+ sort={this.state.sort}
/>
{
+const ModerationQueue = ({comments, selectedIndex, singleView, loadMore, activeTab, sort, ...props}) => {
return (
@@ -20,7 +20,7 @@ const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => {
key={i}
index={i}
comment={comment}
- commentType={props.activeTab}
+ commentType={activeTab}
selected={i === selectedIndex}
suspectWords={props.suspectWords}
actions={actionsMap[status]}
@@ -33,6 +33,14 @@ const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => {
: {lang.t('modqueue.emptyqueue')}
}
+
);
};
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
index f9b0c266f..8d6a0e883 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
@@ -9,10 +9,6 @@ import {Link} from 'react-router';
const lang = new I18n(translations);
class ModerationMenu extends Component {
- state = {
- sort: 'REVERSE_CHRONOLOGICAL',
- }
-
static propTypes = {
premodCount: PropTypes.number.isRequired,
rejectedCount: PropTypes.number.isRequired,
@@ -22,13 +18,8 @@ class ModerationMenu extends Component {
})
}
- selectSort = (sort) => {
- this.setState({sort});
- this.props.modQueueResort(sort);
- }
-
render() {
- const {asset, premodCount, rejectedCount, flaggedCount} = this.props;
+ const {asset, premodCount, rejectedCount, flaggedCount, selectSort, sort} = this.props;
const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged';
@@ -50,8 +41,8 @@ class ModerationMenu extends Component {
this.selectSort(sort)}>
+ value={sort}
+ onChange={sort => selectSort(sort)}>
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index c4a30ad44..13164bca2 100644
--- a/client/coral-admin/src/graphql/queries/index.js
+++ b/client/coral-admin/src/graphql/queries/index.js
@@ -1,6 +1,7 @@
import {graphql} from 'react-apollo';
import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
+import MOD_QUEUE_LOAD_MORE from './loadMore.graphql';
import METRICS from './metricsQuery.graphql';
export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
@@ -14,7 +15,8 @@ export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
},
props: ({ownProps: {params: {id = null}}, data}) => ({
data,
- modQueueResort: modQueueResort(id, data.fetchMore)
+ modQueueResort: modQueueResort(id, data.fetchMore),
+ loadMore: loadMore(data.fetchMore)
})
});
@@ -30,6 +32,40 @@ export const getMetrics = graphql(METRICS, {
}
});
+export const loadMore = (fetchMore) => ({limit, cursor, sort, tab, asset_id}) => {
+ let statuses;
+ switch(tab) {
+ case 'premod':
+ statuses = ['PREMOD'];
+ break;
+ case 'flagged':
+ statuses = ['NONE', 'PREMOD'];
+ break;
+ case 'rejected':
+ statuses = ['REJECTED'];
+ break;
+ }
+ return fetchMore({
+ query: MOD_QUEUE_LOAD_MORE,
+ variables: {
+ limit,
+ cursor,
+ sort,
+ statuses,
+ asset_id
+ },
+ updateQuery: (oldData, {fetchMoreResult:{data:{comments}}}) => {
+ return {
+ ...oldData,
+ [tab]: [
+ ...oldData[tab],
+ ...comments
+ ]
+ };
+ }
+ });
+};
+
export const modQueueResort = (id, fetchMore) => (sort) => {
return fetchMore({
query: MOD_QUEUE_QUERY,
diff --git a/client/coral-admin/src/graphql/queries/loadMore.graphql b/client/coral-admin/src/graphql/queries/loadMore.graphql
new file mode 100644
index 000000000..56966a804
--- /dev/null
+++ b/client/coral-admin/src/graphql/queries/loadMore.graphql
@@ -0,0 +1,13 @@
+#import "../fragments/commentView.graphql"
+
+query LoadMoreModQueue($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!]) {
+ comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort}) {
+ ...commentView
+ action_summaries {
+ count
+ ... on FlagActionSummary {
+ reason
+ }
+ }
+ }
+}