add a badge to the queues to show the count. proptypes

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -70,8 +70,10 @@ class ModerationContainer extends Component {
       <div>
         <ModerationHeader asset={asset} />
         <ModerationMenu
-          activeTab={activeTab}
           asset={asset}
+          premodCount={data.premod.length}
+          rejectCount={data.rejected.length}
+          flagCount={data.flagged.length}
         />
         <ModerationQueue
           data={data}

client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import styles from './styles.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
 import {Link} from 'react-router';
+import {Badge} from 'react-mdl';
 
 const lang = new I18n(translations);
 
-const ModerationMenu = ({asset}) => {
+const ModerationMenu = ({asset, premodCount, rejectCount, flagCount}) => {
   const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
   const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
   const flagPath = asset ? `/admin/modetate/flagged/${asset.id}` : '/admin/moderate/flagged';
@@ -15,13 +16,13 @@ const ModerationMenu = ({asset}) => {
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div>
           <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('modqueue.premod')}
+            <Badge text={premodCount}>{lang.t('modqueue.premod')}</Badge>
           </Link>
           <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('modqueue.rejected')}
+            <Badge text={rejectCount}>{lang.t('modqueue.rejected')}</Badge>
           </Link>
           <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-          {lang.t('modqueue.flagged')}
+          <Badge text={flagCount}>{lang.t('modqueue.flagged')}</Badge>
           </Link>
         </div>
       </div>
@@ -29,4 +30,13 @@ const ModerationMenu = ({asset}) => {
   );
 };
 
+ModerationMenu.propTypes = {
+  premodCount: PropTypes.number.isRequired,
+  rejectCount: PropTypes.number.isRequired,
+  flagCount: PropTypes.number.isRequired,
+  asset: PropTypes.shape({
+    id: PropTypes.string.isRequired
+  })
+};
+
 export default ModerationMenu;