Updates

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

@@ -12,101 +12,104 @@ const CoralHeader = ({
   handleLogout,
   showShortcuts = () => {},
   auth,
-  root,
-}) => (
-  <Header className={styles.header}>
-    <Logo className={styles.logo} />
-    <div>
-      {
-        auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
-          <Navigation className={styles.nav}>
-            <IndexLink
-              id='dashboardNav'
-              className={styles.navLink}
-              to="/admin/dashboard"
-              activeClassName={styles.active}>
-              {t('configure.dashboard')}
-            </IndexLink>
-            {
-              can(auth.user, 'MODERATE_COMMENTS') && (
-                <Link
-                  id='moderateNav'
-                  className={styles.navLink}
-                  to="/admin/moderate"
-                  activeClassName={styles.active}>
-                  {t('configure.moderate')}
-                  {(root.premodCount || root.reportedCount) && <Indicator />}
-                </Link>
-              )
-            }
-            <Link
-              id='streamsNav'
-              className={styles.navLink}
-              to="/admin/stories"
-              activeClassName={styles.active}>
-              {t('configure.stories')}
-            </Link>
+  root
+}) => {
+  return (
+    <Header className={styles.header}>
+      <Logo className={styles.logo} />
+      <div> 
+        {
+          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+            <Navigation className={styles.nav}>
+              <IndexLink
+                id='dashboardNav'
+                className={styles.navLink}
+                to="/admin/dashboard"
+                activeClassName={styles.active}>
+                {t('configure.dashboard')}
+              </IndexLink>
+              {
+                can(auth.user, 'MODERATE_COMMENTS') && (
+                  <Link
+                    id='moderateNav'
+                    className={styles.navLink}
+                    to="/admin/moderate"
+                    activeClassName={styles.active}>
+                    {t('configure.moderate')}
+                    {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
+                  </Link>
+                )
+              }
+              <Link
+                id='streamsNav'
+                className={styles.navLink}
+                to="/admin/stories"
+                activeClassName={styles.active}>
+                {t('configure.stories')}
+              </Link>
 
-            <Link
-              id='communityNav'
-              className={styles.navLink}
-              to="/admin/community"
-              activeClassName={styles.active}>
-              {t('configure.community')}
-              {root.flaggedUsernamesCount && <Indicator />}
-            </Link>
+              <Link
+                id='communityNav'
+                className={styles.navLink}
+                to="/admin/community"
+                activeClassName={styles.active}>
+                {t('configure.community')}
+                {root.flaggedUsernamesCount !== 0 && <Indicator />}
+              </Link>
 
-            {
-              can(auth.user, 'UPDATE_CONFIG') && (
-                <Link
-                  id='configureNav'
-                  className={styles.navLink}
-                  to="/admin/configure"
-                  activeClassName={styles.active}>
-                  {t('configure.configure')}
-                </Link>
-              )
-            }
-          </Navigation>
-          :
-          null
-      }
-      <div className={styles.rightPanel}>
-        <ul>
-          <li className={styles.settings}>
-            <div>
-              <IconButton name="settings" id="menu-settings"/>
-              <Menu target="menu-settings" align="right">
-                <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                <MenuItem>
-                  <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
-                      View latest version
-                  </a>
-                </MenuItem>
-                <MenuItem>
-                  <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
-                      Report a bug or give feedback
-                  </a>
-                </MenuItem>
-                <MenuItem onClick={handleLogout}>
-                  {t('configure.sign_out')}
-                </MenuItem>
-              </Menu>
-            </div>
-          </li>
-          <li>
-            {`v${process.env.VERSION}`}
-          </li>
-        </ul>
+              {
+                can(auth.user, 'UPDATE_CONFIG') && (
+                  <Link
+                    id='configureNav'
+                    className={styles.navLink}
+                    to="/admin/configure"
+                    activeClassName={styles.active}>
+                    {t('configure.configure')}
+                  </Link>
+                )
+              }
+            </Navigation>
+            :
+            null
+        }
+        <div className={styles.rightPanel}>
+          <ul>
+            <li className={styles.settings}>
+              <div>
+                <IconButton name="settings" id="menu-settings"/>
+                <Menu target="menu-settings" align="right">
+                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                  <MenuItem>
+                    <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
+                        View latest version
+                    </a>
+                  </MenuItem>
+                  <MenuItem>
+                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
+                        Report a bug or give feedback
+                    </a>
+                  </MenuItem>
+                  <MenuItem onClick={handleLogout}>
+                    {t('configure.sign_out')}
+                  </MenuItem>
+                </Menu>
+              </div>
+            </li>
+            <li>
+              {`v${process.env.VERSION}`}
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-  </Header>
-);
+    </Header>
+  );
+};
 
 CoralHeader.propTypes = {
   auth: PropTypes.object,
   showShortcuts: PropTypes.func,
-  handleLogout: PropTypes.func.isRequired
+  handleLogout: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired
 };
 
 export default CoralHeader;

client/coral-admin/src/components/ui/Layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Layout as LayoutMDL} from 'react-mdl';
-import Header from './Header';
+import Header from '../../containers/Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
@@ -10,14 +10,12 @@ const Layout = ({
   handleLogout = () => {},
   toggleShortcutModal = () => {},
   restricted = false,
-  root,
   auth,
 }) => (
   <LayoutMDL className={styles.layout} fixedDrawer>
     <Header
       handleLogout={handleLogout}
       showShortcuts={toggleShortcutModal}
-      root={root}
       auth={auth}
     />
     <Drawer 
@@ -33,7 +31,6 @@ const Layout = ({
 Layout.propTypes = {
   children: PropTypes.node,
   auth: PropTypes.object,
-  root: PropTypes.object,
   handleLogout: PropTypes.func,
   toggleShortcutModal: PropTypes.func,
   restricted: PropTypes.bool // hide elements from a user that's logged out

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

@@ -1,16 +1,20 @@
 import {gql} from 'react-apollo';
-import withFragments from 'coral-framework/hocs/withFragments';
+import withQuery from 'coral-framework/hocs/withQuery';
 import Header from '../components/ui/Header';
 
-export default withFragments({
-  root: gql`
-    fragment TalkAdmin_Header on RootQuery {
-      premodCount: commentCount(query: {statuses: [PREMOD]})
-      reportedCount: commentCount(query: {statuses: [NONE, PREMOD, SYSTEM_WITHHELD], action_type: FLAG})
-      flaggedUsernamesCount: userCount(query: {
-        action_type: FLAG,
-        statuses: [PENDING]
-      })
-    }
-  `
-})(Header);
+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,
+      statuses: [PENDING]
+    })
+  }
+`)(Header);

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

@@ -1,5 +1,6 @@
-import React, {Component, cloneElement} from 'react';
+import React from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import Layout from '../components/ui/Layout';
 import {fetchConfig} from '../actions/config';
 import AdminLogin from '../components/AdminLogin';
@@ -11,15 +12,8 @@ import {checkLogin, handleLogin, requestPasswordReset, logout} from '../actions/
 import {can} from 'coral-framework/services/perms';
 import UserDetail from 'coral-admin/src/containers/UserDetail';
 import PropTypes from 'prop-types';
-import {compose, gql} from 'react-apollo';
 
-import withQuery from 'coral-framework/hocs/withQuery';
-import {bindActionCreators} from 'redux';
-import {getDefinitionName} from 'coral-framework/utils';
-import Community from '../routes/Community/containers/Community';
-import Header from '../containers/Header';
-
-class LayoutContainer extends Component {
+class LayoutContainer extends React.Component {
   componentWillMount() {
     const {checkLogin, fetchConfig} = this.props;
 
@@ -67,15 +61,11 @@ class LayoutContainer extends Component {
         <Layout
           handleLogout={logout}
           toggleShortcutModal={toggleShortcutModal}
-          root={this.props.root} 
           auth={this.props.auth} >
           <BanUserDialog />
           <SuspendUserDialog />
           <UserDetail />
-          {cloneElement(children, {
-            root: this.props.root,
-            data: this.props.data
-          })}
+          {children}
         </Layout>
       );
     } else if (loggedIn) {
@@ -99,24 +89,9 @@ LayoutContainer.propTypes = {
   toggleShortcutModal: PropTypes.func,
   TALK_RECAPTCHA_PUBLIC: PropTypes.string,
   checkLogin: PropTypes.func,
-  fetchConfig: PropTypes.func,
-  root: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
+  fetchConfig: PropTypes.func
 };
 
-const withData = withQuery(gql`
-  query TalkAdmin_initialQuery {
-    ...${getDefinitionName(Header.fragments.root)}
-    ...${getDefinitionName(Community.fragments.root)}
-  }
-  ${Header.fragments.root}
-  ${Community.fragments.root}
-  `, {
-  options: {
-    fetchPolicy: 'network-only',
-  },
-});
-
 const mapStateToProps = (state) => ({
   auth: state.auth,
   TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
@@ -131,8 +106,5 @@ const mapDispatchToProps = (dispatch) =>
     toggleShortcutModal,
     logout
   }, dispatch);
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  withData
-)(LayoutContainer);
+  
+export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer);

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

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
 import {compose, gql} from 'react-apollo';
-import {withFragments} from 'plugin-api/beta/client/hocs';
+import withQuery from 'coral-framework/hocs/withQuery';
 import {getDefinitionName} from 'coral-framework/utils';
 import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
 import FlaggedAccounts from '../containers/FlaggedAccounts';
@@ -62,26 +62,27 @@ const mapDispatchToProps = (dispatch) =>
     newPage,
   }, dispatch);
 
+const withData = withQuery(gql`
+  query TalkAdmin_FlaggedUsernamesCount {
+    flaggedUsernamesCount: userCount(query: {
+      action_type: FLAG,
+      statuses: [PENDING]
+    })
+    ...${getDefinitionName(FlaggedAccounts.fragments.root)}
+    ...${getDefinitionName(FlaggedUser.fragments.root)}
+    me {
+      ...${getDefinitionName(FlaggedUser.fragments.me)}
+      __typename
+    }
+  }
+  ${FlaggedAccounts.fragments.root}
+  ${FlaggedUser.fragments.root}
+  ${FlaggedUser.fragments.me}
+`);
+
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withSetUserStatus,
   withRejectUsername,
-  withFragments({
-    root: gql`
-      fragment TalkAdmin_Community on RootQuery {
-        flaggedUsernamesCount: userCount(query: {
-          action_type: FLAG,
-          statuses: [PENDING]
-        })
-        ...${getDefinitionName(FlaggedAccounts.fragments.root)}
-        ...${getDefinitionName(FlaggedUser.fragments.root)}
-        me {
-          ...${getDefinitionName(FlaggedUser.fragments.me)}
-          __typename
-        }
-      }
-      ${FlaggedAccounts.fragments.root}
-      ${FlaggedUser.fragments.root}
-      ${FlaggedUser.fragments.me}
-  `}),
+  withData
 )(CommunityContainer);