From d5b46f219ed81cd1fa05c0eec0dd676de37c69aa Mon Sep 17 00:00:00 2001 From: David Jay Date: Tue, 7 Mar 2017 11:54:44 -0500 Subject: [PATCH 1/6] Adding load more button. --- .../ModerationQueue/ModerationContainer.js | 16 ++++++-- .../ModerationQueue/ModerationQueue.js | 12 +++++- .../components/ModerationMenu.js | 15 ++------ .../coral-admin/src/graphql/queries/index.js | 38 ++++++++++++++++++- .../src/graphql/queries/loadMore.graphql | 13 +++++++ 5 files changed, 76 insertions(+), 18 deletions(-) create mode 100644 client/coral-admin/src/graphql/queries/loadMore.graphql 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 + } + } + } +} From 54aa3bc8fa4a0e3fb0c67a16704409b22c7ba55f Mon Sep 17 00:00:00 2001 From: David Jay Date: Tue, 7 Mar 2017 12:31:43 -0500 Subject: [PATCH 2/6] Styling load more button. --- .../ModerationQueue/ModerationContainer.js | 13 +++++++++++ .../ModerationQueue/ModerationQueue.js | 19 ++++++++-------- .../ModerationQueue/components/LoadMore.js | 22 +++++++++++++++++++ .../ModerationQueue/components/styles.css | 20 +++++++++++++++++ 4 files changed, 65 insertions(+), 9 deletions(-) create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 99a1ec656..16de8a32e 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -100,6 +100,18 @@ class ModerationContainer extends Component { } const comments = data[activeTab]; + let activeTabCount; + switch(activeTab) { + case 'premod': + activeTabCount = data.premodCount; + break; + case 'flagged': + activeTabCount = data.flaggedCount; + break; + case 'rejected': + activeTabCount = data.rejectedCount; + break; + } return (
@@ -125,6 +137,7 @@ class ModerationContainer extends Component { loadMore={props.loadMore} assetId={providedAssetId} sort={this.state.sort} + commentCount={activeTabCount} /> { +const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props}) => { return (
    @@ -33,14 +34,14 @@ const ModerationQueue = ({comments, selectedIndex, singleView, loadMore, activeT : {lang.t('modqueue.emptyqueue')} }
- +
); }; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js new file mode 100644 index 000000000..5ac193525 --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js @@ -0,0 +1,22 @@ +import React from 'react'; +import {Button} from 'coral-ui'; +import styles from './styles.css'; + +const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) => +
+ { + showLoadMore && + } +
; + +export default LoadMore; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index 59f47faad..5abbb6b7d 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -387,3 +387,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; +} From 2a6236b61823525d181bbd4c97c25467d5cd7f35 Mon Sep 17 00:00:00 2001 From: David Jay Date: Tue, 7 Mar 2017 12:37:12 -0500 Subject: [PATCH 3/6] Moving ModerationMenu to a stateless compenent. --- .../components/ModerationMenu.js | 81 +++++++++---------- 1 file changed, 39 insertions(+), 42 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js index 8d6a0e883..b8160e21b 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js @@ -1,4 +1,4 @@ -import React, {PropTypes, Component} from 'react'; +import React, {PropTypes} from 'react'; import CommentCount from './CommentCount'; import styles from './styles.css'; import {SelectField, Option} from 'react-mdl-selectfield'; @@ -8,48 +8,45 @@ import {Link} from 'react-router'; const lang = new I18n(translations); -class ModerationMenu extends Component { - static propTypes = { - premodCount: PropTypes.number.isRequired, - rejectedCount: PropTypes.number.isRequired, - flaggedCount: PropTypes.number.isRequired, - asset: PropTypes.shape({ - id: PropTypes.string - }) - } - - render() { - 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'; - return ( -
-
-
-
- - {lang.t('modqueue.premod')} - - - {lang.t('modqueue.rejected')} - - - {lang.t('modqueue.flagged')} - -
- selectSort(sort)}> - - - +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; From d203a9afe0e7af60f47dd16e5e2c7123b489e30d Mon Sep 17 00:00:00 2001 From: David Jay Date: Wed, 8 Mar 2017 16:06:34 -0500 Subject: [PATCH 4/6] Auto-rejecting comments on ban. --- client/coral-admin/src/components/BanUserDialog.js | 10 ++++++++-- .../containers/ModerationQueue/ModerationContainer.js | 4 +++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js index b23d8f9d1..f6a7227b8 100644 --- a/client/coral-admin/src/components/BanUserDialog.js +++ b/client/coral-admin/src/components/BanUserDialog.js @@ -8,7 +8,13 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations'; const lang = new I18n(translations); -const BanUserDialog = ({open, handleClose, handleBanUser, user}) => ( +const onBanClick = (userId, commentId, handleBanUser, rejectComment) => (e) => { + e.preventDefault(); + handleBanUser({userId}) + .then(() => rejectComment({commentId})); +}; + +const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, commentId}) => ( ( -
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 2f43911b1..1d716ff41 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -26,7 +26,7 @@ class ModerationContainer extends Component { componentWillMount() { const {toggleModal, singleView} = this.props; - + this.props.fetchSettings(); key('s', () => singleView()); key('shift+/', () => toggleModal(true)); @@ -140,8 +140,10 @@ class ModerationContainer extends Component { Date: Wed, 8 Mar 2017 16:39:53 -0500 Subject: [PATCH 5/6] Closing ban dialog after ban is complete. --- client/coral-admin/src/components/BanUserDialog.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js index f6a7227b8..4f2296409 100644 --- a/client/coral-admin/src/components/BanUserDialog.js +++ b/client/coral-admin/src/components/BanUserDialog.js @@ -8,9 +8,10 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations'; const lang = new I18n(translations); -const onBanClick = (userId, commentId, handleBanUser, rejectComment) => (e) => { +const onBanClick = (userId, commentId, handleBanUser, rejectComment, handleClose) => (e) => { e.preventDefault(); handleBanUser({userId}) + .then(handleClose) .then(() => rejectComment({commentId})); }; @@ -35,7 +36,7 @@ const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, c -
From a0953c068906209a3265d1d5458185a35f372ac0 Mon Sep 17 00:00:00 2001 From: David Jay Date: Thu, 9 Mar 2017 13:33:00 -0500 Subject: [PATCH 6/6] Adding proptypes to loadmore component. --- .../containers/ModerationQueue/components/LoadMore.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js index 5ac193525..f8d3f0ed4 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {PropTypes} from 'react'; import {Button} from 'coral-ui'; import styles from './styles.css'; @@ -19,4 +19,13 @@ const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) => }
; +LoadMore.propTypes = { + comments: PropTypes.array.isRequired, + loadMore: PropTypes.func.isRequired, + sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired, + tab: PropTypes.oneOf(['rejected', 'premod', 'flagged']).isRequired, + assetId: PropTypes.string, + showLoadMore: PropTypes.bool.isRequired +}; + export default LoadMore;