Refactor indicator

client/coral-admin/src/components/Header.js

@@ -7,7 +7,8 @@ import styles from './Header.css';
 import t from 'coral-framework/services/i18n';
 import { Logo } from './Logo';
 import { can } from 'coral-framework/services/perms';
-import Indicator from './Indicator';
+import ModerationIndicator from '../routes/Moderation/containers/Indicator';
+import CommunityIndicator from '../routes/Community/containers/Indicator';
 
 const CoralHeader = ({
   handleLogout,
@@ -30,9 +31,7 @@ const CoralHeader = ({
                   activeClassName={styles.active}
                 >
                   {t('configure.moderate')}
-                  {(root.premodCount !== 0 || root.reportedCount !== 0) && (
-                    <Indicator />
-                  )}
+                  <ModerationIndicator root={root} />
                 </IndexLink>
               )}
               <Link
@@ -51,7 +50,7 @@ const CoralHeader = ({
                 activeClassName={styles.active}
               >
                 {t('configure.community')}
-                {root.flaggedUsernamesCount !== 0 && <Indicator />}
+                <CommunityIndicator root={root} />
               </Link>
 
               {can(auth.user, 'UPDATE_CONFIG') && (

client/coral-admin/src/containers/Header.js

@@ -1,22 +1,18 @@
 import { gql } from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
 import Header from '../components/Header';
+import CommunityIndicator from '../routes/Community/containers/Indicator';
+import ModerationIndicator from '../routes/Moderation/containers/Indicator';
+import { getDefinitionName } from 'coral-framework/utils';
 
 export default withQuery(
   gql`
     query TalkAdmin_Header {
-      __typename
-      premodCount: commentCount(query: { statuses: [PREMOD] })
-      reportedCount: commentCount(
-        query: { statuses: [NONE, PREMOD, SYSTEM_WITHHELD], action_type: FLAG }
-      )
-      flaggedUsernamesCount: userCount(
-        query: {
-          action_type: FLAG
-          state: { status: { username: [SET, CHANGED] } }
-        }
-      )
+      ...${getDefinitionName(ModerationIndicator.fragments.root)}
+      ...${getDefinitionName(CommunityIndicator.fragments.root)}
     }
+    ${ModerationIndicator.fragments.root}
+    ${CommunityIndicator.fragments.root}
   `,
   {
     options: {

client/coral-admin/src/routes/Community/containers/Indicator.js

@@ -0,0 +1,24 @@
+import { compose, gql } from 'react-apollo';
+import Indicator from '../../../components/Indicator';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import { branch, renderNothing } from 'recompose';
+
+const hideIfNoData = hasNoData => branch(hasNoData, renderNothing);
+
+const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_Community_Indicator_root on RootQuery {
+        flaggedUsernamesCount: userCount(
+          query: {
+            action_type: FLAG
+            state: { status: { username: [SET, CHANGED] } }
+          }
+        )
+      }
+    `,
+  }),
+  hideIfNoData(props => !props.root.flaggedUsernamesCount)
+);
+
+export default enhance(Indicator);

client/coral-admin/src/routes/Moderation/containers/Indicator.js

@@ -0,0 +1,25 @@
+import { compose, gql } from 'react-apollo';
+import Indicator from '../../../components/Indicator';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import { branch, renderNothing } from 'recompose';
+
+const hideIfNoData = hasNoData => branch(hasNoData, renderNothing);
+
+const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_Moderation_Indicator_root on RootQuery {
+        premodCount: commentCount(query: { statuses: [PREMOD] })
+        reportedCount: commentCount(
+          query: {
+            statuses: [NONE, PREMOD, SYSTEM_WITHHELD]
+            action_type: FLAG
+          }
+        )
+      }
+    `,
+  }),
+  hideIfNoData(props => !props.root.premodCount && !props.root.reportedCount)
+);
+
+export default enhance(Indicator);