Wrap queries with hocs

client/coral-admin/src/graphql/index.js

@@ -0,0 +1,23 @@
+import {gql} from 'react-apollo';
+import {add} from 'coral-framework/services/graphqlRegistry';
+
+const extension = {
+  fragments: {
+    Metrics: gql`
+      fragment CoralAdmin_Metrics on Asset {
+        id
+        title
+        url
+        author
+        created_at
+        commentCount
+        action_summaries {
+          actionCount
+          actionableItemCount
+        }
+      }
+    `,
+  },
+};
+
+add(extension);

client/coral-admin/src/index.js

@@ -8,6 +8,7 @@ import store from './services/store';
 import App from './components/App';
 
 import 'react-mdl/extra/material.js';
+import './graphql';
 
 render(
   <ApolloProvider client={client} store={store}>

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

@@ -55,8 +55,9 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, data} = props;
+    const {community, root: {users}} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
+    console.log(props);
 
     if (activeTab === 'people') {
       return (
@@ -78,9 +79,7 @@ export default class Community extends Component {
     return (
       <div>
         <FlaggedAccounts
-          commenters={data.users}
-          isFetching={data.loading}
-          error={data.error}
+          commenters={users}
           showBanUserDialog={props.showBanUserDialog}
           approveUser={props.approveUser}
           rejectUsername={props.rejectUsername}

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

@@ -6,20 +6,18 @@ const lang = new I18n(translations);
 
 import styles from './Community.css';
 
-import Loading from './Loading';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import User from './User';
 
 const FlaggedAccounts = ({...props}) => {
-  const {commenters, isFetching} = props;
-  const hasResults = !isFetching && commenters && !!commenters.length;
+  const {commenters} = props;
+  const hasResults = commenters && !!commenters.length;
 
 // if (commenter.status === 'PENDING' && commenter.actions.length > 0) {
 
   return (
     <div className={styles.container}>
       <div className={styles.mainFlaggedContent}>
-        { isFetching && <Loading /> }
         {
           hasResults
           ? commenters.map((commenter, index) => {

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Loading = () => (
-  <h1> Loading results </h1>
-);
-
-export default Loading;

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

@@ -1,7 +1,9 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose, graphql, gql} from 'react-apollo';
+import {compose, gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+import {Spinner} from 'coral-ui';
 
 import {banUser, setUserStatus, rejectUsername} from 'coral-admin/src/graphql/mutations';
 
@@ -24,13 +26,20 @@ class CommunityContainer extends Component {
   }
 
   render() {
+    if (this.props.data.error) {
+      return <div>{this.props.data.error.message}</div>;
+    }
+
+    if (!('users' in this.props.root)) {
+      return <div><Spinner/></div>;
+    }
     return (
       <Community {...this.props} />
     );
   }
 }
 
-export const withQuery = graphql(gql`
+export const withCommunityQuery = withQuery(gql`
   query Users($action_type: ACTION_TYPE) {
     users(query:{action_type: $action_type}){
       id
@@ -84,7 +93,7 @@ const mapDispatchToProps = (dispatch) =>
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withQuery,
+  withCommunityQuery,
   banUser,
   setUserStatus,
   rejectUsername

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

@@ -4,7 +4,7 @@ import ActivityWidget from './ActivityWidget';
 import CountdownTimer from './CountdownTimer';
 import styles from './Dashboard.css';
 
-export default ({data: {assetsByActivity, assetsByFlag}, reloadData}) => (
+export default ({root: {assetsByActivity, assetsByFlag}, reloadData}) => (
   <div>
     <CountdownTimer handleTimeout={reloadData} />
     <div className={styles.Dashboard}>

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import Dashboard from '../components/Dashboard';
-import {compose, graphql, gql} from 'react-apollo';
+import {compose,  gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
 
 import {Spinner} from 'coral-ui';
 
@@ -12,23 +13,23 @@ class DashboardContainer extends React.Component {
   }
 
   render () {
-    if (this.props.data && this.props.data.loading) {
+    if (this.props.data.loading) {
       return <Spinner />;
     }
     return <Dashboard {...this.props} reloadData={this.reloadData} />;
   }
 }
 
-export const withQuery = graphql(gql`
-  query Metrics($from: Date!, $to: Date!) {
+export const witDashboardQuery = withQuery(gql`
+  query CoralAdmin_Metrics($from: Date!, $to: Date!) {
     assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
-      ...metrics
+      ...CoralAdmin_Metrics
     }
     assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
-      ...metrics
+      ...CoralAdmin_Metrics
     }
   }
-  fragment metrics on Asset {
+  fragment CoralAdmin_Metrics on Asset {
     id
     title
     url
@@ -60,5 +61,5 @@ const mapStateToProps = (state) => {
 
 export default compose(
   connect(mapStateToProps),
-  withQuery,
+  witDashboardQuery,
 )(DashboardContainer);

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

@@ -52,9 +52,9 @@ export default class Moderation extends Component {
   }
 
   getComments = () => {
-    const {data, route} = this.props;
+    const {root, route} = this.props;
     const activeTab = route.path === ':id' ? 'premod' : route.path;
-    return data[activeTab];
+    return root[activeTab];
   }
 
   select = (next) => () => {
@@ -124,7 +124,7 @@ export default class Moderation extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, viewUserDetail, hideUserDetail, ...props} = this.props;
+    const {root, moderation, settings, assets, viewUserDetail, hideUserDetail, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
 
@@ -138,23 +138,23 @@ export default class Moderation extends Component {
       }
     }
 
-    const comments = data[activeTab];
+    const comments = root[activeTab];
     let activeTabCount;
     switch(activeTab) {
     case 'all':
-      activeTabCount = data.allCount;
+      activeTabCount = root.allCount;
       break;
     case 'accepted':
-      activeTabCount = data.acceptedCount;
+      activeTabCount = root.acceptedCount;
       break;
     case 'premod':
-      activeTabCount = data.premodCount;
+      activeTabCount = root.premodCount;
       break;
     case 'flagged':
-      activeTabCount = data.flaggedCount;
+      activeTabCount = root.flaggedCount;
       break;
     case 'rejected':
-      activeTabCount = data.rejectedCount;
+      activeTabCount = root.rejectedCount;
       break;
     }
 
@@ -163,11 +163,11 @@ export default class Moderation extends Component {
         <ModerationHeader asset={asset} />
         <ModerationMenu
           asset={asset}
-          allCount={data.allCount}
-          acceptedCount={data.acceptedCount}
-          premodCount={data.premodCount}
-          rejectedCount={data.rejectedCount}
-          flaggedCount={data.flaggedCount}
+          allCount={root.allCount}
+          acceptedCount={root.acceptedCount}
+          premodCount={root.premodCount}
+          rejectedCount={root.rejectedCount}
+          flaggedCount={root.flaggedCount}
           selectSort={this.props.setSortOrder}
           sort={this.props.moderation.sortOrder}
         />
@@ -205,7 +205,7 @@ export default class Moderation extends Component {
           open={moderation.suspendUserDialog.show}
           username={moderation.suspendUserDialog.username}
           userId={moderation.suspendUserDialog.userId}
-          organizationName={data.settings.organizationName}
+          organizationName={root.settings.organizationName}
           onCancel={props.hideSuspendUserDialog}
           onPerform={this.suspendUser}
         />

client/coral-admin/src/routes/Moderation/components/UserDetail.js

@@ -7,7 +7,7 @@ export default class UserDetail extends React.Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
     hideUserDetail: PropTypes.func.isRequired,
-    data: PropTypes.object.isRequired,
+    root: PropTypes.object.isRequired,
   }
 
   copyPermalink = () => {
@@ -21,13 +21,7 @@ export default class UserDetail extends React.Component {
   }
 
   render () {
-    const {data, hideUserDetail} = this.props;
-
-    if (!('user' in data)) {
-      return null;
-    }
-
-    const {user, totalComments, rejectedComments} = data;
+    const {root: {user, totalComments, rejectedComments}, hideUserDetail} = this.props;
     const localProfile = user.profiles.find((p) => p.provider === 'local');
     let profile;
     if (localProfile) {

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

@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose, graphql, gql} from 'react-apollo';
+import {compose, gql} from 'react-apollo';
 import isEqual from 'lodash/isEqual';
+import withQuery from 'coral-framework/hocs/withQuery';
 
 import {banUser, setCommentStatus, suspendUser} from '../../../graphql/mutations';
 
@@ -31,8 +32,8 @@ class ModerationContainer extends Component {
 
   componentWillReceiveProps(nextProps) {
     const {updateAssets} = this.props;
-    if(!isEqual(nextProps.data.assets, this.props.data.assets)) {
-      updateAssets(nextProps.data.assets);
+    if(!isEqual(nextProps.root.assets, this.props.root.assets)) {
+      updateAssets(nextProps.root.assets);
     }
   }
 
@@ -77,15 +78,16 @@ class ModerationContainer extends Component {
   };
 
   render () {
-    const {data} = this.props;
-
-    if (!('premodCount' in data)) {
-      return <div><Spinner/></div>;
-    }
+    const {root, data} = this.props;
 
     if (data.error) {
       return <div>Error</div>;
     }
+
+    if (!('premodCount' in root)) {
+      return <div><Spinner/></div>;
+    }
+
     return <Moderation {...this.props} loadMore={this.loadMore} />;
   }
 }
@@ -139,7 +141,7 @@ const LOAD_MORE_QUERY = gql`
   ${commentView}
 `;
 
-const withQuery = graphql(gql`
+const withModQueueQuery = withQuery(gql`
   query ModQueue($asset_id: ID, $sort: SORT_ORDER) {
     all: comments(query: {
       statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
@@ -218,7 +220,7 @@ const withQuery = graphql(gql`
   },
 });
 
-const withQueueCountPolling = graphql(gql`
+const withQueueCountPolling = withQuery(gql`
   query Counts($asset_id: ID) {
     allCount: commentCount(query: {
       asset_id: $asset_id
@@ -282,5 +284,5 @@ export default compose(
   banUser,
   suspendUser,
   withQueueCountPolling,
-  withQuery,
+  withModQueueQuery,
 )(ModerationContainer);

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

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react';
-import {compose, graphql, gql} from 'react-apollo';
+import {compose, gql} from 'react-apollo';
 import UserDetail from '../components/UserDetail';
+import withQuery from 'coral-framework/hocs/withQuery';
 
 class UserDetailContainer extends React.Component {
   static propTypes = {
@@ -9,11 +10,15 @@ class UserDetailContainer extends React.Component {
   }
 
   render () {
+    if (!('user' in this.props.root)) {
+      return null;
+    }
+
     return <UserDetail {...this.props}/>;
   }
 }
 
-export const withQuery = graphql(gql`
+export const withUserDetailQuery = withQuery(gql`
   query UserDetail($author_id: ID!) {
     user(id: $author_id) {
       id
@@ -36,5 +41,5 @@ export const withQuery = graphql(gql`
 });
 
 export default compose(
-  withQuery,
+  withUserDetailQuery,
 )(UserDetailContainer);

client/coral-framework/utils/index.js

@@ -55,11 +55,12 @@ export function separateDataAndRoot(
     subscribeToMore,
     updateQuery,
     variables,
+    error,
     ...root,
   }) {
   return {
     data: {fetchMore, loading, networkStatus, refetch, startPolling,
-      stopPolling, subscribeToMore, updateQuery, variables},
+      stopPolling, subscribeToMore, updateQuery, variables, error},
     root,
   };
 }