diff --git a/client/coral-admin/src/components/CommentDetails.css b/client/coral-admin/src/components/CommentDetails.css
new file mode 100644
index 000000000..ff3679cc7
--- /dev/null
+++ b/client/coral-admin/src/components/CommentDetails.css
@@ -0,0 +1,18 @@
+.root {
+ margin-top: 10px;
+ padding-top: 10px;
+}
+
+.moreDetail {
+ position: absolute;
+ font-size: 12px;
+ font-weight: 500;
+ color: black;
+ right: 16px;
+
+ &:hover {
+ opacity: 0.9;
+ cursor: pointer;
+ }
+}
+
diff --git a/client/coral-admin/src/components/CommentDetails.js b/client/coral-admin/src/components/CommentDetails.js
new file mode 100644
index 000000000..9d9c26813
--- /dev/null
+++ b/client/coral-admin/src/components/CommentDetails.js
@@ -0,0 +1,50 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import styles from './CommentDetails.css';
+import t from 'coral-framework/services/i18n';
+import FlagDetails from './FlagDetails';
+
+class CommentDetails extends Component {
+ state = {
+ showDetail: false
+ };
+
+ constructor () {
+ super();
+ this.state = {
+ showDetail: false
+ };
+ }
+
+ toggleDetail = () => {
+ this.setState((state) => ({
+ showDetail: !state.showDetail
+ }));
+ }
+
+ render() {
+ const {actions, viewUserDetail} = this.props;
+ const {showDetail} = this.state;
+
+ return (
+
+ );
+ }
+}
+
+CommentDetails.propTypes = {
+ actions: PropTypes.arrayOf(PropTypes.shape({
+ message: PropTypes.string,
+ user: PropTypes.shape({username: PropTypes.string})
+ })).isRequired,
+ viewUserDetail: PropTypes.func.isRequired,
+};
+
+export default CommentDetails;
diff --git a/client/coral-admin/src/components/FlagBox.js b/client/coral-admin/src/components/FlagBox.js
deleted file mode 100644
index 44a302e52..000000000
--- a/client/coral-admin/src/components/FlagBox.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import styles from './FlagBox.css';
-import t from 'coral-framework/services/i18n';
-import CommentDetail from './CommentDetail';
-
-const shortReasons = {
- 'This comment is offensive': t('modqueue.offensive'),
- 'This looks like an ad/marketing': t('modqueue.spam_ads'),
- 'This user is impersonating': t('modqueue.impersonating'),
- 'I don\'t like this username': t('modqueue.dont_like_username'),
- 'Other': t('modqueue.other')
-};
-
-class FlagBox extends Component {
- constructor () {
- super();
- this.state = {
- showDetail: false
- };
- }
-
- toggleDetail = () => {
- this.setState((state) => ({
- showDetail: !state.showDetail
- }));
- }
-
- reasonMap = (reason) => {
- const shortReason = shortReasons[reason];
-
- // if the short reason isn't found, just return the long one.
- return shortReason ? shortReason : reason;
- }
-
- render() {
- const {actionSummaries, actions, viewUserDetail} = this.props;
- const {showDetail} = this.state;
-
- return (
-
-
{showDetail ? t('modqueue.less_detail') : t('modqueue.more_detail')}
-
- {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})
-
-
- );
- })}
-
- )}
-
-
- );
- }
-}
-
-FlagBox.propTypes = {
- actionSummaries: PropTypes.arrayOf(PropTypes.shape({
- reason: PropTypes.string,
- count: PropTypes.number
- })).isRequired,
- actions: PropTypes.arrayOf(PropTypes.shape({
- message: PropTypes.string,
- user: PropTypes.shape({username: PropTypes.string})
- })).isRequired
-};
-
-export default FlagBox;
diff --git a/client/coral-admin/src/components/FlagBox.css b/client/coral-admin/src/components/FlagDetails.css
similarity index 70%
rename from client/coral-admin/src/components/FlagBox.css
rename to client/coral-admin/src/components/FlagDetails.css
index b88f904b9..302e24858 100644
--- a/client/coral-admin/src/components/FlagBox.css
+++ b/client/coral-admin/src/components/FlagDetails.css
@@ -1,8 +1,3 @@
-.flagBox {
- border-top: 1px solid rgba(66, 66, 66, 0.12);
- margin-top: 10px;
- padding-top: 10px;
-}
.info {
vertical-align: middle;
@@ -20,6 +15,7 @@
}
.subDetail {
+ margin-left:10px;
padding: 0;
list-style: none;
font-size: 12px;
@@ -27,19 +23,6 @@
color: #888;
}
-.moreDetail {
- position: absolute;
- font-size: 12px;
- font-weight: 500;
- color: black;
- right: 16px;
-
- &:hover {
- opacity: 0.9;
- cursor: pointer;
- }
-}
-
.lessDetail {
display: inline-block;
margin-right: 10px;
diff --git a/client/coral-admin/src/components/FlagDetails.js b/client/coral-admin/src/components/FlagDetails.js
new file mode 100644
index 000000000..74bff8f24
--- /dev/null
+++ b/client/coral-admin/src/components/FlagDetails.js
@@ -0,0 +1,75 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import styles from './FlagDetails.css';
+import t from 'coral-framework/services/i18n';
+import CommentDetail from './CommentDetail';
+
+class FlagDetails extends Component {
+
+ render() {
+ const {actions, viewUserDetail, more} = this.props;
+ const summaries = actions.reduce((sum, action) => {
+ if (!(action.reason in sum)) {
+ sum[action.reason] = {count: 0, userFlagged: false, actions: []};
+ }
+ sum[action.reason].count++;
+ if (action.user) {
+ sum[action.reason].userFlagged = true;
+ }
+ sum[action.reason].actions.push(action);
+ return sum;
+ }, {});
+
+ const userFlagReasons = Object.keys(summaries).filter((reason) => summaries[reason].userFlagged);
+
+ return (
+
+ {Object.keys(summaries).map((reason) =>
+
+ {reason} {summaries[reason].userFlagged && `(${summaries[reason].count})`}
+
+ )}
+
+ }>
+ {more && userFlagReasons.length > 0 && (
+
+ {userFlagReasons
+ .map((reason) => (
+ -
+ {reason} ({summaries[reason].count})
+
+
+ ))
+ }
+
+ )}
+
+ );
+ }
+}
+
+FlagDetails.propTypes = {
+ more: PropTypes.bool,
+ actions: PropTypes.arrayOf(PropTypes.shape({
+ message: PropTypes.string,
+ user: PropTypes.shape({username: PropTypes.string})
+ })).isRequired,
+ viewUserDetail: PropTypes.func.isRequired,
+};
+
+export default FlagDetails;
diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js
index 2aec28ab9..4ef557173 100644
--- a/client/coral-admin/src/components/UserDetailComment.js
+++ b/client/coral-admin/src/components/UserDetailComment.js
@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
import {Link} from 'react-router';
import {Icon} from 'coral-ui';
-import FlagBox from './FlagBox';
+import CommentDetails from './CommentDetails';
import styles from './UserDetailComment.css';
-import {getActionSummary} from 'coral-framework/utils';
import ActionButton from 'coral-admin/src/components/ActionButton';
import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
import IfHasLink from 'coral-admin/src/components/IfHasLink';
@@ -31,7 +30,6 @@ class UserDetailComment extends React.Component {
...props
} = this.props;
- const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
return (
@@ -117,9 +115,8 @@ class UserDetailComment extends React.Component {
{flagActions && flagActions.length
- ?
: null}
@@ -139,7 +136,6 @@ UserDetailComment.propTypes = {
toggleSelect: PropTypes.func,
comment: PropTypes.shape({
body: PropTypes.string.isRequired,
- action_summaries: PropTypes.array,
actions: PropTypes.array,
created_at: PropTypes.string.isRequired,
asset: PropTypes.shape({
diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js
index 9f0199bce..6b3572434 100644
--- a/client/coral-admin/src/containers/UserDetailComment.js
+++ b/client/coral-admin/src/containers/UserDetailComment.js
@@ -17,12 +17,6 @@ export default withFragments({
title
url
}
- action_summaries {
- count
- ... on FlagActionSummary {
- reason
- }
- }
actions {
... on FlagAction {
id
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index e19f34229..c761ff591 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import {Link} from 'react-router';
import {Icon} from 'coral-ui';
-import FlagBox from 'coral-admin/src/components/FlagBox';
+import CommentDetails from 'coral-admin/src/components/CommentDetails';
import styles from './Comment.css';
import CommentLabels from 'coral-admin/src/components/CommentLabels';
import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
@@ -186,7 +186,7 @@ class Comment extends React.Component {
{flagActions && flagActions.length
- ?