diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js index b23d8f9d1..4f2296409 100644 --- a/client/coral-admin/src/components/BanUserDialog.js +++ b/client/coral-admin/src/components/BanUserDialog.js @@ -8,7 +8,14 @@ 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, handleClose) => (e) => { + e.preventDefault(); + handleBanUser({userId}) + .then(handleClose) + .then(() => rejectComment({commentId})); +}; + +const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, commentId}) => ( ( - diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index da71ac04a..4b86ec7d7 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -16,7 +16,7 @@ const FlagWidget = (props) => { {lang.t('streams.article')} - {lang.t('dashboard.flags')} + {lang.t('dashboard.flags')} @@ -27,20 +27,21 @@ const FlagWidget = (props) => { return ( - +

{asset.title}

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

- -

{flagSummary ? flagSummary.actionCount : 0}

- +

{flagSummary ? flagSummary.actionCount : 0}

+ + + Moderate ); }) - : {lang.t('dashboard.no_flags')} + : {lang.t('dashboard.no_flags')} } { /* rows in a table with a fixed height will expand and ignore height. this extra row will expand to fill the extra space. */ diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index 25e851966..d52676ae4 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -17,7 +17,7 @@ const LikeWidget = (props) => { {lang.t('streams.article')} - {lang.t('modqueue.likes')} + {lang.t('modqueue.likes')} @@ -28,20 +28,21 @@ const LikeWidget = (props) => { return ( - +

{asset.title}

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

- -

{likeSummary ? likeSummary.actionCount : 0}

- +

{likeSummary ? likeSummary.actionCount : 0}

+ + + Moderate ); }) - : {lang.t('dashboard.no_likes')} + : {lang.t('dashboard.no_likes')} } { /* rows in a table with a fixed height will expand and ignore height. this extra row will expand to fill the extra space. */ diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css index cb764d9cc..3170cf332 100644 --- a/client/coral-admin/src/containers/Dashboard/Widget.css +++ b/client/coral-admin/src/containers/Dashboard/Widget.css @@ -55,11 +55,26 @@ padding: 10px; } +.widgetTable tbody td:last-child { + padding-top: 0; +} + .linkToAsset { display: block; text-decoration: none; } +.linkToModerate { + background-color: #e0e0e0; + padding: 10px 14px; + text-decoration: none; + color: black; +} + +.linkToModerate:hover { + background-color: #ccc; +} + .lede { font-size: 0.9em; color: #aaa; diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 2f43911b1..e53162992 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -21,12 +21,13 @@ import ModerationKeysModal from '../../components/ModerationKeysModal'; class ModerationContainer extends Component { state = { - selectedIndex: 0 + selectedIndex: 0, + sort: 'REVERSE_CHRONOLOGICAL' } componentWillMount() { const {toggleModal, singleView} = this.props; - + this.props.fetchSettings(); key('s', () => singleView()); key('shift+/', () => toggleModal(true)); @@ -74,6 +75,11 @@ class ModerationContainer extends Component { } } + selectSort = (sort) => { + this.setState({sort}); + this.props.modQueueResort(sort); + } + componentWillUnmount() { key.unbind('s'); key.unbind('shift+/'); @@ -92,7 +98,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; @@ -115,6 +121,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 (
@@ -124,7 +142,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, commentCount, singleView, loadMore, activeTab, sort, ...props}) => { return (
    @@ -20,7 +21,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 +34,14 @@ const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => { : {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..f8d3f0ed4 --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js @@ -0,0 +1,31 @@ +import React, {PropTypes} from 'react'; +import {Button} from 'coral-ui'; +import styles from './styles.css'; + +const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) => +
+ { + 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; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js index c5a11b642..8d9f6b7e0 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js @@ -10,9 +10,9 @@ const ModerationHeader = props => ( props.asset ? diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js index f9b0c266f..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,57 +8,45 @@ 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, - flaggedCount: PropTypes.number.isRequired, - asset: PropTypes.shape({ - id: PropTypes.string - }) - } - - selectSort = (sort) => { - this.setState({sort}); - this.props.modQueueResort(sort); - } - - render() { - const {asset, premodCount, rejectedCount, flaggedCount} = 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')} - -
- this.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; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index 59f47faad..9576045de 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -84,11 +84,10 @@ span { margin-bottom: -1px; .settingsButton { - i { - vertical-align: middle; - margin-left: 10px; - margin-top: -4px; - } + vertical-align: middle; + margin-left: 10px; + margin-top: -4px; + font-size: 16px; } .moderateAsset { @@ -114,7 +113,15 @@ span { } &:nth-child(2) { - text-align: center; + span { + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 344px; + display: inline-block; + vertical-align: top; + } } &:last-child { @@ -387,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/mutations/index.js b/client/coral-admin/src/graphql/mutations/index.js index fe3a1faf9..884e30e0c 100644 --- a/client/coral-admin/src/graphql/mutations/index.js +++ b/client/coral-admin/src/graphql/mutations/index.js @@ -22,7 +22,26 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, { commentId, status: 'ACCEPTED' }, - refetchQueries: ['ModQueue'] + updateQueries: { + ModQueue: (oldData) => { + const premod = oldData.premod.filter(c => c.id !== commentId); + const flagged = oldData.flagged.filter(c => c.id !== commentId); + const rejected = oldData.rejected.filter(c => c.id !== commentId); + const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount; + const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount; + const rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount; + + return { + ...oldData, + premodCount, + flaggedCount, + rejectedCount, + premod, + flagged, + rejected, + }; + } + } }); }, rejectComment: ({commentId}) => { @@ -31,7 +50,27 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, { commentId, status: 'REJECTED' }, - refetchQueries: ['ModQueue'] + updateQueries: { + ModQueue: (oldData) => { + const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0]; + const rejected = [comment].concat(oldData.rejected); + const premod = oldData.premod.filter(c => c.id !== commentId); + const flagged = oldData.flagged.filter(c => c.id !== commentId); + const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount; + const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount; + const rejectedCount = oldData.rejectedCount + 1; + + return { + ...oldData, + premodCount, + flaggedCount, + rejectedCount, + premod, + flagged, + rejected + }; + } + } }); } }) 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 + } + } + } +} diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css index 7bc1a21f4..6966d82ab 100644 --- a/client/coral-embed-stream/src/Comment.css +++ b/client/coral-embed-stream/src/Comment.css @@ -3,5 +3,10 @@ } .Comment { - + +} + +.pendingComment { + filter: blur(2px); + pointer-events: none; } diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 72449c906..0a3cdb78b 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -116,6 +116,7 @@ class Comment extends React.Component { const dontagree = getActionSummary('DontAgreeActionSummary', comment); let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`; commentClass += highlighted === comment.id ? ' highlighted-comment' : ''; + commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : ''; // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar) const notifyOnError = (fn, errorToMessage) => async () => { diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js index 7dd8bf12b..04dba8402 100644 --- a/client/coral-framework/graphql/mutations/index.js +++ b/client/coral-framework/graphql/mutations/index.js @@ -35,7 +35,7 @@ export const postComment = graphql(POST_COMMENT, { action_summaries: [], tags: [], status: null, - id: `${Date.now()}_temp_id` + id: 'pending' } } }, diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index 537d899cd..45110f407 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -32,18 +32,30 @@ class FlagButton extends Component { if (flagged) { this.setState((prev) => prev.localPost ? {...prev, localPost: null, step: 0} : {...prev, localDelete: true}); deleteAction(localPost || flag.current_user.id); + } else if (this.state.showMenu){ + this.closeMenu(); } else { - this.setState({showMenu: !this.state.showMenu}); + this.setState({showMenu: true}); } } + closeMenu = () => { + this.setState({ + showMenu: false, + itemType: '', + reason: '', + message: '', + step: 0 + }); + } + onPopupContinue = () => { const {postFlag, postDontAgree, id, author_id} = this.props; const {itemType, reason, step, posted, message} = this.state; // Proceed to the next step or close the menu if we've reached the end if (step + 1 >= this.props.getPopupMenu.length) { - this.setState({showMenu: false}); + this.closeMenu(); } else { this.setState({step: step + 1}); } @@ -114,7 +126,7 @@ class FlagButton extends Component { } handleClickOutside () { - this.setState({showMenu: false}); + this.closeMenu(); } render () { diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js index 65bf52f72..11432c753 100644 --- a/client/coral-ui/components/Icon.js +++ b/client/coral-ui/components/Icon.js @@ -1,7 +1,7 @@ import React from 'react'; import {Icon as IconMDL} from 'react-mdl'; -const Icon = ({className, name}) => ( +const Icon = ({className = '', name}) => ( );