diff --git a/client/coral-admin/src/routes/Moderation/components/CommentCount.css b/client/coral-admin/src/components/CountBadge.css similarity index 93% rename from client/coral-admin/src/routes/Moderation/components/CommentCount.css rename to client/coral-admin/src/components/CountBadge.css index 998133d07..343692ecb 100644 --- a/client/coral-admin/src/routes/Moderation/components/CommentCount.css +++ b/client/coral-admin/src/components/CountBadge.css @@ -5,7 +5,7 @@ vertical-align: middle; padding: 1px 5px; border-radius: 2px; - margin-left: 2px; + margin-left: 5px; line-height: 18px; box-sizing: border-box; height: 18px; diff --git a/client/coral-admin/src/routes/Moderation/components/CommentCount.js b/client/coral-admin/src/components/CountBadge.js similarity index 81% rename from client/coral-admin/src/routes/Moderation/components/CommentCount.js rename to client/coral-admin/src/components/CountBadge.js index 53d611ed6..ff47cf9a6 100644 --- a/client/coral-admin/src/routes/Moderation/components/CommentCount.js +++ b/client/coral-admin/src/components/CountBadge.js @@ -1,10 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styles from './CommentCount.css'; +import styles from './CountBadge.css'; import t from 'coral-framework/services/i18n'; -const CommentCount = ({count}) => { +const CountBadge = ({count}) => { let number = count; // shorten large counts to abbreviations @@ -21,8 +21,8 @@ const CommentCount = ({count}) => { ); }; -CommentCount.propTypes = { +CountBadge.propTypes = { count: PropTypes.number.isRequired }; -export default CommentCount; +export default CountBadge; diff --git a/client/coral-admin/src/routes/Community/components/Community.js b/client/coral-admin/src/routes/Community/components/Community.js index e59f9b6ca..1b3e4ac72 100644 --- a/client/coral-admin/src/routes/Community/components/Community.js +++ b/client/coral-admin/src/routes/Community/components/Community.js @@ -90,10 +90,13 @@ export default class Community extends Component { render() { const {searchValue} = this.state; const tab = this.getTabContent(searchValue, this.props); + const {root: {flaggedUsernamesCount}} = this.props; return (
- +
{ tab }
diff --git a/client/coral-admin/src/routes/Community/components/CommunityMenu.js b/client/coral-admin/src/routes/Community/components/CommunityMenu.js index 1e226313d..71e01d817 100644 --- a/client/coral-admin/src/routes/Community/components/CommunityMenu.js +++ b/client/coral-admin/src/routes/Community/components/CommunityMenu.js @@ -1,18 +1,20 @@ import React from 'react'; - import styles from './CommunityMenu.css'; import t from 'coral-framework/services/i18n'; import {Link} from 'react-router'; +import CountBadge from '../../../components/CountBadge'; -const CommunityMenu = () => { +const CommunityMenu = ({flaggedUsernamesCount = 0}) => { const flaggedPath = '/admin/community/flagged'; const peoplePath = '/admin/community/people'; + return (
{t('community.flaggedaccounts')} + {t('community.people')} diff --git a/client/coral-admin/src/routes/Community/containers/Community.js b/client/coral-admin/src/routes/Community/containers/Community.js index a41c257d6..cc4b3b343 100644 --- a/client/coral-admin/src/routes/Community/containers/Community.js +++ b/client/coral-admin/src/routes/Community/containers/Community.js @@ -1,7 +1,8 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; -import {compose} from 'react-apollo'; +import {compose, gql} from 'react-apollo'; +import withQuery from 'coral-framework/hocs/withQuery'; import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations'; import { @@ -29,6 +30,19 @@ const mapStateToProps = (state) => ({ community: state.community, }); + +const withFlaggedUsernamesCount = withQuery(gql` + query TalkAdmin_FlaggedUsernamesCount { + flaggedUsernamesCount: userCount(query: { + action_type: FLAG + }) + } + `, { + options: { + fetchPolicy: 'network-only', + }, +}); + const mapDispatchToProps = (dispatch) => bindActionCreators({ fetchAccounts, @@ -41,4 +55,5 @@ export default compose( connect(mapStateToProps, mapDispatchToProps), withSetUserStatus, withRejectUsername, + withFlaggedUsernamesCount, )(CommunityContainer); diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js b/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js index 25b90cf64..27b8409c6 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js +++ b/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import CommentCount from './CommentCount'; +import CountBadge from '../../../components/CountBadge'; import styles from './styles.css'; import {SelectField, Option} from 'react-mdl-selectfield'; import {Icon} from 'coral-ui'; @@ -28,7 +28,7 @@ const ModerationMenu = ({ to={getModPath(queue.key, asset.id)} className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === queue.key})} activeClassName={styles.active}> - {queue.name} + {queue.name} )}