diff --git a/plugins/talk-plugin-flag-details/client/components/FlagDetails.js b/plugins/talk-plugin-flag-details/client/components/FlagDetails.js
index 3b1f222da..026aebd95 100644
--- a/plugins/talk-plugin-flag-details/client/components/FlagDetails.js
+++ b/plugins/talk-plugin-flag-details/client/components/FlagDetails.js
@@ -7,23 +7,21 @@ import {Slot, IfSlotIsNotEmpty, CommentDetail} from 'plugin-api/beta/client/comp
class FlagDetails extends Component {
render() {
- const {comment: {actions}, viewUserDetail, more, data, root, comment} = this.props;
+ const {comment: {actions}, more, data, root, comment} = this.props;
const flagActions = actions && actions.filter((a) => a.__typename === 'FlagAction');
const summaries = flagActions.reduce((sum, action) => {
if (!(action.reason in sum)) {
- sum[action.reason] = {count: 0, userFlagged: false, actions: []};
+ sum[action.reason] = {count: 0, 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);
-
+ const reasons = Object.keys(summaries);
const queryData = {
root,
comment,
@@ -35,36 +33,13 @@ class FlagDetails extends Component {
header={`${t('community.flags')} (${Object.keys(summaries).length})`}
info={
- {Object.keys(summaries).map((reason) =>
+ {reasons.map((reason) =>
-
{reason} {summaries[reason].userFlagged && `(${summaries[reason].count})`}
)}
}>
- {more && userFlagReasons.length > 0 && (
-
- {userFlagReasons
- .map((reason) => (
- -
- {reason} ({summaries[reason].count})
-
-
- ))
- }
-
- )}
{more && (
a.__typename === 'FlagAction');
+ const summaries = flagActions.reduce((sum, action) => {
+ if (!action.user) {
+ return sum;
+ }
+ if (!(action.reason in sum)) {
+ sum[action.reason] = {count: 0, actions: []};
+ }
+ sum[action.reason].count++;
+ sum[action.reason].actions.push(action);
+ return sum;
+ }, {});
+
+ return (
+
+ {Object.keys(summaries)
+ .map((reason) => (
+ -
+ {reason} ({summaries[reason].count})
+
+
+ ))
+ }
+
+ );
+ }
+}
+
+UserFlagDetails.propTypes = {
+ comment: PropTypes.shape({
+ actions: PropTypes.arrayOf(PropTypes.shape({
+ message: PropTypes.string,
+ user: PropTypes.shape({username: PropTypes.string})
+ })).isRequired,
+ }).isRequired,
+ viewUserDetail: PropTypes.func.isRequired,
+};
+
+export default UserFlagDetails;
diff --git a/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js b/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js
index 5a9bb3cae..da04dd65f 100644
--- a/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js
+++ b/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js
@@ -1,23 +1,13 @@
import {compose, gql} from 'react-apollo';
import FlagDetails from '../components/FlagDetails';
-import {bindActionCreators} from 'redux';
import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
-import {viewUserDetail} from 'plugin-api/beta/client/actions/admin';
-import {connect} from 'react-redux';
import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
const slots = [
'adminCommentMoreFlagDetails',
];
-const mapDispatchToProps = (dispatch) => ({
- ...bindActionCreators({
- viewUserDetail,
- }, dispatch)
-});
-
const enhance = compose(
- connect(null, mapDispatchToProps),
withFragments({
root: gql`
fragment CoralAdmin_FlagDetails_root on RootQuery {
diff --git a/plugins/talk-plugin-flag-details/client/containers/UserFlagDetails.js b/plugins/talk-plugin-flag-details/client/containers/UserFlagDetails.js
new file mode 100644
index 000000000..aedbb1de5
--- /dev/null
+++ b/plugins/talk-plugin-flag-details/client/containers/UserFlagDetails.js
@@ -0,0 +1,39 @@
+import {compose, gql} from 'react-apollo';
+import UserFlagDetails from '../components/UserFlagDetails';
+import {bindActionCreators} from 'redux';
+import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+import {viewUserDetail} from 'plugin-api/beta/client/actions/admin';
+import {connect} from 'react-redux';
+
+const mapDispatchToProps = (dispatch) => ({
+ ...bindActionCreators({
+ viewUserDetail,
+ }, dispatch)
+});
+
+const enhance = compose(
+ connect(null, mapDispatchToProps),
+ withFragments({
+ comment: gql`
+ fragment CoralAdmin_UserFlagDetails_comment on Comment {
+ actions {
+ __typename
+ ... on FlagAction {
+ id
+ reason
+ message
+ user {
+ id
+ username
+ }
+ }
+ }
+ }
+ `
+ }),
+ excludeIf(({comment: {actions}}) =>
+ !actions.some((action) => action.__typename === 'FlagAction' && action.user
+ )),
+);
+
+export default enhance(UserFlagDetails);
diff --git a/plugins/talk-plugin-flag-details/client/index.js b/plugins/talk-plugin-flag-details/client/index.js
index 045194872..95f579da5 100644
--- a/plugins/talk-plugin-flag-details/client/index.js
+++ b/plugins/talk-plugin-flag-details/client/index.js
@@ -1,9 +1,11 @@
import FlagDetails from './containers/FlagDetails';
+import UserFlagDetails from './containers/UserFlagDetails';
import translations from './translations.yml';
export default {
translations,
slots: {
adminCommentDetailArea: [FlagDetails],
+ adminCommentMoreFlagDetails: [UserFlagDetails],
}
};