Moving the initial query up

client/coral-admin/src/AppRouter.js

@@ -6,7 +6,7 @@ import Configure from 'routes/Configure';
 import Dashboard from 'routes/Dashboard';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
-import {CommunityLayout, Community} from 'routes/Community';
+import Community from 'routes/Community/containers/Community';
 import {ModerationLayout, Moderation} from 'routes/Moderation';
 
 import Layout from 'containers/Layout';
@@ -22,7 +22,7 @@ const routes = (
 
       {/* Community Routes */}
 
-      <Route path='community' component={CommunityLayout}>
+      <Route path='community'>
         <Route path='flagged' components={Community}>
           <Route path=':id' components={Community} />
         </Route>

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

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, cloneElement} from 'react';
 import {connect} from 'react-redux';
 import Layout from '../components/ui/Layout';
 import {fetchConfig} from '../actions/config';
@@ -10,6 +10,13 @@ import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {checkLogin, handleLogin, requestPasswordReset, logout} from '../actions/auth';
 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';
 
 class LayoutContainer extends Component {
   componentWillMount() {
@@ -19,6 +26,7 @@ class LayoutContainer extends Component {
     fetchConfig();
   }
   render() {
+
     const {
       user,
       loggedIn,
@@ -29,13 +37,16 @@ class LayoutContainer extends Component {
     } = this.props.auth;
 
     const {
-      handleLogout,
+      children,
+      logout,
       toggleShortcutModal,
-      TALK_RECAPTCHA_PUBLIC
+      TALK_RECAPTCHA_PUBLIC,
     } = this.props;
+
     if (loadingUser) {
       return <FullLoading />;
     }
+
     if (!loggedIn) {
       return (
         <AdminLogin
@@ -48,17 +59,21 @@ class LayoutContainer extends Component {
         />
       );
     }
+
     if (can(user, 'ACCESS_ADMIN') && loggedIn) {
       return (
         <Layout
-          handleLogout={handleLogout}
+          handleLogout={logout}
           toggleShortcutModal={toggleShortcutModal}
           {...this.props}
         >
           <BanUserDialog />
           <SuspendUserDialog />
           <UserDetail />
-          {this.props.children}
+          {cloneElement(children, {
+            root: this.props.root,
+            data: this.props.data
+          })}
         </Layout>
       );
     } else if (loggedIn) {
@@ -72,19 +87,48 @@ class LayoutContainer extends Component {
   }
 }
 
+LayoutContainer.propTypes = {
+  children: PropTypes.node,
+  requestPasswordReset: PropTypes.func,
+  handleLogin: PropTypes.func,
+  auth: PropTypes.object,
+  handleLogout: PropTypes.func,
+  logout: PropTypes.func,
+  toggleShortcutModal: PropTypes.func,
+  TALK_RECAPTCHA_PUBLIC: PropTypes.string,
+  checkLogin: PropTypes.func,
+  fetchConfig: PropTypes.func,
+  root: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+};
+
+const withData = withQuery(gql`
+  query TalkAdmin_initialQuery {
+    ...${getDefinitionName(Community.fragments.root)}
+  }
+  ${Community.fragments.root}
+  `, {
+  options: {
+    fetchPolicy: 'network-only',
+  },
+});
+
 const mapStateToProps = (state) => ({
   auth: state.auth,
   TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  checkLogin: () => dispatch(checkLogin()),
-  fetchConfig: () => dispatch(fetchConfig()),
-  handleLogin: (username, password, recaptchaResponse) =>
-    dispatch(handleLogin(username, password, recaptchaResponse)),
-  requestPasswordReset: (email) => dispatch(requestPasswordReset(email)),
-  toggleShortcutModal: (toggle) => dispatch(toggleShortcutModal(toggle)),
-  handleLogout: () => dispatch(logout())
-});
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    checkLogin,
+    fetchConfig,
+    handleLogin,
+    requestPasswordReset,
+    toggleShortcutModal,
+    logout
+  }, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer);
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withData
+)(LayoutContainer);

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

@@ -94,7 +94,7 @@ export default class Community extends Component {
   render() {
     const {searchValue} = this.state;
     const tab = this.getTabContent(searchValue, this.props);
-    const {root: {flaggedUsernamesCount}} = this.props;
+    const {root: {flaggedUsernamesCount = 0}} = this.props;
 
     return (
       <div>

client/coral-admin/src/routes/Community/components/CommunityLayout.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const CommunityLayout = (props) => (
-  <div>
-    {props.children}
-  </div>
-);
-
-export default CommunityLayout;

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

@@ -1,16 +1,14 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
 import PropTypes from 'prop-types';
-
+import {compose, gql} from 'react-apollo';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+import {getDefinitionName} from 'coral-framework/utils';
+import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
 import FlaggedAccounts from '../containers/FlaggedAccounts';
 import FlaggedUser from '../containers/FlaggedUser';
 
-import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
-import {getDefinitionName} from 'coral-framework/utils';
-
 import {
   fetchAccounts,
   updateSorting,
@@ -56,28 +54,6 @@ CommunityContainer.propTypes = {
   root: PropTypes.object
 };
 
-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}
-  `, {
-  options: {
-    fetchPolicy: 'network-only',
-  },
-});
-
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     fetchAccounts,
@@ -90,5 +66,22 @@ export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withSetUserStatus,
   withRejectUsername,
-  withData,
+  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}
+  `}),
 )(CommunityContainer);

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

@@ -1,2 +0,0 @@
-export {default as Community} from './containers/Community';
-export {default as CommunityLayout} from './components/CommunityLayout';