Adding CountBadge and flaggedUsernamesCount

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;

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;

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 (
       <div>
-        <CommunityMenu />
+        <CommunityMenu
+          flaggedUsernamesCount={flaggedUsernamesCount}
+        />
         <div>
           { tab }
         </div>

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 (
     <div className='mdl-tabs'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div>
           <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
             {t('community.flaggedaccounts')}
+            <CountBadge count={flaggedUsernamesCount} />
           </Link>
           <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
             {t('community.people')}

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);

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}>
-              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CommentCount count={queue.count} />
+              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CountBadge count={queue.count} />
             </Link>
           )}
         </div>