From c1a26d2e7153eb640c941ede20490e64298d0394 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Thu, 18 Jan 2018 18:22:16 +0100 Subject: [PATCH] Split community queries --- client/coral-admin/src/graphql/index.js | 4 +- .../routes/Community/containers/Community.js | 43 +------------------ .../Community/containers/CommunityMenu.js | 30 +------------ .../Community/containers/FlaggedAccounts.js | 28 ++++++------ .../Community/containers/FlaggedUser.js | 6 +-- .../src/routes/Community/containers/People.js | 19 +++++--- .../src/routes/Community/graphql.js | 11 ----- .../hocs/withCachedFlaggedUsernamesCount.js | 29 +++++++++++++ 8 files changed, 63 insertions(+), 107 deletions(-) create mode 100644 client/coral-admin/src/routes/Community/hocs/withCachedFlaggedUsernamesCount.js diff --git a/client/coral-admin/src/graphql/index.js b/client/coral-admin/src/graphql/index.js index 5aa355573..9c0b251b2 100644 --- a/client/coral-admin/src/graphql/index.js +++ b/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: { diff --git a/client/coral-admin/src/routes/Community/containers/Community.js b/client/coral-admin/src/routes/Community/containers/Community.js index fba3ff9fd..2ace2692e 100644 --- a/client/coral-admin/src/routes/Community/containers/Community.js +++ b/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); diff --git a/client/coral-admin/src/routes/Community/containers/CommunityMenu.js b/client/coral-admin/src/routes/Community/containers/CommunityMenu.js index 9aa7b3305..425d46653 100644 --- a/client/coral-admin/src/routes/Community/containers/CommunityMenu.js +++ b/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); diff --git a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js index 7f5bcae14..e6f4f716a 100644 --- a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js +++ b/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); diff --git a/client/coral-admin/src/routes/Community/containers/FlaggedUser.js b/client/coral-admin/src/routes/Community/containers/FlaggedUser.js index c51ecc0dc..54da9be78 100644 --- a/client/coral-admin/src/routes/Community/containers/FlaggedUser.js +++ b/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 diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js index 166ed90bd..dfee82ad5 100644 --- a/client/coral-admin/src/routes/Community/containers/People.js +++ b/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); diff --git a/client/coral-admin/src/routes/Community/graphql.js b/client/coral-admin/src/routes/Community/graphql.js index d497a9d99..cacb268d0 100644 --- a/client/coral-admin/src/routes/Community/graphql.js +++ b/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 diff --git a/client/coral-admin/src/routes/Community/hocs/withCachedFlaggedUsernamesCount.js b/client/coral-admin/src/routes/Community/hocs/withCachedFlaggedUsernamesCount.js new file mode 100644 index 000000000..1a044cac1 --- /dev/null +++ b/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'), + })) +);