diff --git a/.gitignore b/.gitignore index a160b7f6e..f4014b561 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,5 @@ coverage/ plugins.json plugins/* !plugins/coral-plugin-facebook-auth -**/node_modules/* !plugins/coral-plugin-respect **/node_modules/* diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js index 6a4b8d36b..a31fbd313 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js @@ -20,7 +20,7 @@ const lang = new I18n(translations); const Comment = ({actions = [], comment, ...props}) => { const links = linkify.getMatches(comment.body); const linkText = links ? links.map(link => link.raw) : []; - const actionSummaries = comment.action_summaries; + const actionSummaries = comment.action_summaries.filter(a => a.__typename === 'FlagActionSummary'); const flagActions = comment.actions.filter(a => a.__typename === 'FlagAction'); return ( diff --git a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css index fa7bb0cca..5b8ea4f91 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css @@ -53,3 +53,17 @@ font-size: 12px; } } + +.lessDetail { + display: inline-block; + margin-right: 10px; +} + +.subDetail { + font-weight: normal; + color: #888; + + span { + color: black; + } +} diff --git a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js index 3b1843629..6068f76b5 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js @@ -4,7 +4,8 @@ import styles from './FlagBox.css'; const shortReasons = { 'This comment is offensive': 'Offensive', - 'This looks like an ad/marketing': 'Spam/Ads' + 'This looks like an ad/marketing': 'Spam/Ads', + 'Other': 'other' }; class FlagBox extends Component { @@ -29,26 +30,42 @@ class FlagBox extends Component { } render() { - const {props} = this; + const {actionSummaries, actions} = this.props; + const {showDetail} = this.state; + return (
-

Flags ({props.actionSummaries.length}):

-
- {props.actionSummaries.map((action, i) => - {this.reasonMap(action.reason)} ({action.count}) +

Flags ({actionSummaries.length}):

+
    + {actionSummaries.map((action, i) => +
  • {this.reasonMap(action.reason)} ({action.count})
  • )} -
- More detail + + {showDetail ? 'Less' : 'More'} detail
- {this.state.showDetail && (
-
    - {props.actionSummaries.map((action, i) => -
  • {this.reasonMap(action.reason)} ({action.count})
  • - )} -
-
)} + {showDetail && ( +
+
    + {actionSummaries.map((summary, i) => { + + const actionList = actions.filter(a => a.reason === summary.reason); + + return ( +
  • + {this.reasonMap(summary.reason)} ({summary.count}) +
      + { + actionList.map((action, j) =>
    • {action.user.username} {action.message}
    • ) + } +
    +
  • + ); + })} +
+
+ )}
); @@ -59,7 +76,7 @@ FlagBox.propTypes = { actionSummaries: PropTypes.arrayOf(PropTypes.shape({ })).isRequired, - flagActions: PropTypes.arrayOf(PropTypes.shape({ + actions: PropTypes.arrayOf(PropTypes.shape({ })).isRequired }; diff --git a/client/coral-admin/src/graphql/fragments/commentView.graphql b/client/coral-admin/src/graphql/fragments/commentView.graphql index 36943602e..8c7310bdf 100644 --- a/client/coral-admin/src/graphql/fragments/commentView.graphql +++ b/client/coral-admin/src/graphql/fragments/commentView.graphql @@ -16,6 +16,9 @@ fragment commentView on Comment { ... on FlagAction { reason message + user { + username + } } } }