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={ }> - {more && userFlagReasons.length > 0 && ( - - )} {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 ( + + ); + } +} + +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], } };