+const ModerationMenu = ({asset, premodCount, rejectedCount, flaggedCount, selectSort, sort}) => {
+ 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';
+ return (
+
+
+
+
+
+ {lang.t('modqueue.premod')}
+
+
+ {lang.t('modqueue.rejected')}
+
+
+ {lang.t('modqueue.flagged')}
+
+
selectSort(sort)}>
+
+
+
- );
- }
-}
+
+ );
+};
+
+ModerationMenu.propTypes = {
+ premodCount: PropTypes.number.isRequired,
+ rejectedCount: PropTypes.number.isRequired,
+ flaggedCount: PropTypes.number.isRequired,
+ asset: PropTypes.shape({
+ id: PropTypes.string
+ })
+};
export default ModerationMenu;
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index 627cde5e4..9576045de 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -394,3 +394,23 @@ span {
cursor: pointer;
}
}
+
+.loadMoreContainer {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+};
+
+.loadMore {
+ width: 100%;
+ text-align: center;
+ color: #FFF;
+ max-width: 660px;
+ margin-bottom: 30px;
+ background-color: #2376D8;
+ cursor: pointer;
+}
+
+.loadMore:hover {
+ background-color: #4399FF;
+}
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index e911402b0..291ea6bc5 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 MOD_USER_FLAGGED_QUERY from './modUserFlaggedQuery.graphql';
import METRICS from './metricsQuery.graphql';
@@ -15,7 +16,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)
})
});
@@ -31,6 +33,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 modUserFlaggedQuery = graphql(MOD_USER_FLAGGED_QUERY);
export const modQueueResort = (id, fetchMore) => (sort) => {
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
+ }
+ }
+ }
+}