Split community queries

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

@@ -164,7 +164,7 @@ export default {
     }),
     ApproveUsername: ({ variables: { id } }) => ({
       updateQueries: {
-        TalkAdmin_Community: prev => {
+        TalkAdmin_Community_FlaggedAccounts: prev => {
           const updated = update(prev, {
             flaggedUsernamesCount: { $apply: count => count - 1 },
             flaggedUsers: {
@@ -177,7 +177,7 @@ export default {
     }),
     RejectUsername: ({ variables: { id: userId } }) => ({
       updateQueries: {
-        TalkAdmin_Community: prev => {
+        TalkAdmin_Community_FlaggedAccounts: prev => {
           const updated = update(prev, {
             flaggedUsernamesCount: { $apply: count => count - 1 },
             flaggedUsers: {

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

@@ -1,12 +1,7 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { compose, gql } from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
-import { getDefinitionName } from 'coral-framework/utils';
+import { compose } from 'react-apollo';
 import { withRejectUsername } from 'coral-framework/graphql/mutations';
-import FlaggedAccounts from '../containers/FlaggedAccounts';
-import FlaggedUser from '../containers/FlaggedUser';
-import People from '../containers/People';
 import { hideRejectUsernameDialog } from '../../../actions/community';
 import Community from '../components/Community';
 
@@ -22,41 +17,7 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-const withData = withQuery(
-  gql`
-  query TalkAdmin_Community {
-    flaggedUsernamesCount: userCount(
-      query:{
-        action_type: FLAG,
-        state: {
-          status: {
-            username: [SET, CHANGED]
-          }
-        }
-      }
-    )
-    ...${getDefinitionName(FlaggedAccounts.fragments.root)}
-    ...${getDefinitionName(FlaggedUser.fragments.root)}
-    ...${getDefinitionName(People.fragments.root)}
-    me {
-      ...${getDefinitionName(FlaggedUser.fragments.me)}
-      __typename
-    }
-  }
-  ${People.fragments.root}
-  ${FlaggedAccounts.fragments.root}
-  ${FlaggedUser.fragments.root}
-  ${FlaggedUser.fragments.me}
-`,
-  {
-    options: {
-      fetchPolicy: 'network-only',
-    },
-  }
-);
-
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withRejectUsername,
-  withData
+  withRejectUsername
 )(Community);

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

@@ -1,30 +1,4 @@
-import { compose, gql } from 'react-apollo';
-import { mapProps } from 'recompose';
-import withQuery from 'coral-framework/hocs/withQuery';
+import withCachedFlaggedUsernamesCount from '../hocs/withCachedFlaggedUsernamesCount';
 import CommunityMenu from '../components/CommunityMenu';
-import get from 'lodash/get';
 
-const withData = withQuery(
-  gql`
-    query TalkAdmin_CommunityMenu {
-      flaggedUsernamesCount: userCount(
-        query: {
-          action_type: FLAG
-          state: { status: { username: [SET, CHANGED] } }
-        }
-      )
-    }
-  `,
-  {
-    options: {
-      fetchPolicy: 'cache-only',
-    },
-  }
-);
-
-export default compose(
-  withData,
-  mapProps(ownProps => ({
-    flaggedUsernamesCount: get(ownProps, 'root.flaggedUsernamesCount'),
-  }))
-)(CommunityMenu);
+export default withCachedFlaggedUsernamesCount(CommunityMenu);

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { compose, gql } from 'react-apollo';
-import { withFragments } from 'plugin-api/beta/client/hocs';
+import withQuery from 'coral-framework/hocs/withQuery';
 import { Spinner } from 'coral-ui';
 import PropTypes from 'prop-types';
 import { withApproveUsername } from 'coral-framework/graphql/mutations';
@@ -11,7 +11,7 @@ import { viewUserDetail } from '../../../actions/userDetail';
 import { getDefinitionName } from 'coral-framework/utils';
 import { appendNewNodes } from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
-import { handleFlaggedUsernameChange, cleanUpDangling } from '../graphql';
+import { handleFlaggedUsernameChange } from '../graphql';
 import { notify } from 'coral-framework/actions/notification';
 import { isFlaggedUserDangling } from '../utils';
 
@@ -95,15 +95,6 @@ class FlaggedAccountsContainer extends Component {
 
   componentWillUnmount() {
     this.unsubscribe();
-    this.cleanUpDangling();
-  }
-
-  cleanUpDangling() {
-    if (!this.props.data.loading) {
-      this.props.data.updateQuery(query => {
-        return cleanUpDangling(query);
-      });
-    }
   }
 
   approveUser = ({ userId: id }) => {
@@ -245,9 +236,9 @@ const mapDispatchToProps = dispatch =>
 export default compose(
   connect(null, mapDispatchToProps),
   withApproveUsername,
-  withFragments({
-    root: gql`
-      fragment TalkAdminCommunity_FlaggedAccounts_root on RootQuery {
+  withQuery(
+    gql`
+      query TalkAdmin_Community_FlaggedAccounts {
         flaggedUsernamesCount: userCount(
           query: {
             action_type: FLAG
@@ -272,9 +263,16 @@ export default compose(
         }
         me {
           id
+          ...${getDefinitionName(FlaggedUser.fragments.me)}
         }
       }
       ${FlaggedUser.fragments.user}
+      ${FlaggedUser.fragments.me}
     `,
-  })
+    {
+      options: {
+        fetchPolicy: 'network-only',
+      },
+    }
+  )
 )(FlaggedAccountsContainer);

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

@@ -4,17 +4,17 @@ import { withFragments } from 'plugin-api/beta/client/hocs';
 
 export default withFragments({
   root: gql`
-    fragment TalkAdminCommunity_FlaggedUser_root on RootQuery {
+    fragment TalkAdmin_Community_FlaggedUser_root on RootQuery {
       __typename
     }
   `,
   me: gql`
-    fragment TalkAdminCommunity_FlaggedUser_me on User {
+    fragment TalkAdmin_Community_FlaggedUser_me on User {
       id
     }
   `,
   user: gql`
-    fragment TalkAdminCommunity_FlaggedUser_user on User {
+    fragment TalkAdmin_Community_FlaggedUser_user on User {
       id
       username
       created_at

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

@@ -4,7 +4,6 @@ import { bindActionCreators } from 'redux';
 import { compose, gql } from 'react-apollo';
 import People from '../components/People';
 import PropTypes from 'prop-types';
-import { withFragments } from 'plugin-api/beta/client/hocs';
 import {
   withUnbanUser,
   withUnsuspendUser,
@@ -16,6 +15,7 @@ import { viewUserDetail } from '../../../actions/userDetail';
 import { appendNewNodes } from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
 import { Spinner } from 'coral-ui';
+import withQuery from 'coral-framework/hocs/withQuery';
 
 class PeopleContainer extends React.Component {
   timer = null;
@@ -137,7 +137,7 @@ const mapDispatchToProps = dispatch =>
   );
 
 const LOAD_MORE_QUERY = gql`
-  query TalkAdminCommunity_People_LoadMoreUsers(
+  query TalkAdmin_Community_People_LoadMoreUsers(
     $limit: Int
     $cursor: Cursor
     $value: String
@@ -171,7 +171,7 @@ const LOAD_MORE_QUERY = gql`
 `;
 
 const SEARCH_QUERY = gql`
-  query TalkAdminCommunity_People_SearchUsers($value: String, $limit: Int) {
+  query TalkAdmin_Community_People_SearchUsers($value: String, $limit: Int) {
     users(query: { value: $value, limit: $limit }) {
       hasNextPage
       endCursor
@@ -205,9 +205,9 @@ export default compose(
   withSetUserRole,
   withUnsuspendUser,
   withUnbanUser,
-  withFragments({
-    root: gql`
-      fragment TalkAdminCommunity_People_root on RootQuery {
+  withQuery(
+    gql`
+      query TalkAdmin_Community_People {
         users(query: {}) {
           hasNextPage
           endCursor
@@ -235,5 +235,10 @@ export default compose(
         }
       }
     `,
-  })
+    {
+      options: {
+        fetchPolicy: 'network-only',
+      },
+    }
+  )
 )(PeopleContainer);

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

@@ -1,5 +1,4 @@
 import update from 'immutability-helper';
-import { isFlaggedUserDangling } from './utils';
 
 function shouldAddFlaggedUser(root, user) {
   const isEmpty = !root.flaggedUsers.nodes.length;
@@ -49,16 +48,6 @@ function decrementFlaggedUserCount(root) {
   });
 }
 
-export function cleanUpDangling(root) {
-  return update(root, {
-    flaggedUsers: {
-      nodes: {
-        $apply: nodes => nodes.filter(node => !isFlaggedUserDangling(node)),
-      },
-    },
-  });
-}
-
 /**
  * Assimilate flagged user changes into current store.
  * @param  {Object}   root             current state of the store

client/coral-admin/src/routes/Community/hocs/withCachedFlaggedUsernamesCount.js

@@ -0,0 +1,29 @@
+import { compose, gql } from 'react-apollo';
+import { mapProps } from 'recompose';
+import withQuery from 'coral-framework/hocs/withQuery';
+import get from 'lodash/get';
+
+const withData = withQuery(
+  gql`
+    query TalkAdmin_CommunityMenu {
+      flaggedUsernamesCount: userCount(
+        query: {
+          action_type: FLAG
+          state: { status: { username: [SET, CHANGED] } }
+        }
+      )
+    }
+  `,
+  {
+    options: {
+      fetchPolicy: 'cache-only',
+    },
+  }
+);
+
+export default compose(
+  withData,
+  mapProps(ownProps => ({
+    flaggedUsernamesCount: get(ownProps, 'root.flaggedUsernamesCount'),
+  }))
+);