diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js index d50aeb3f6..d8e1b5377 100644 --- a/client/coral-admin/src/AppRouter.js +++ b/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 */} - + diff --git a/client/coral-admin/src/containers/Layout.js b/client/coral-admin/src/containers/Layout.js index f2d71c93b..e97f64b8a 100644 --- a/client/coral-admin/src/containers/Layout.js +++ b/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 ; } + if (!loggedIn) { return ( ); } + if (can(user, 'ACCESS_ADMIN') && loggedIn) { return ( - {this.props.children} + {cloneElement(children, { + root: this.props.root, + data: this.props.data + })} ); } 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); diff --git a/client/coral-admin/src/routes/Community/components/Community.js b/client/coral-admin/src/routes/Community/components/Community.js index bf300a166..41bca2529 100644 --- a/client/coral-admin/src/routes/Community/components/Community.js +++ b/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 (
diff --git a/client/coral-admin/src/routes/Community/components/CommunityLayout.js b/client/coral-admin/src/routes/Community/components/CommunityLayout.js deleted file mode 100644 index 0665b967d..000000000 --- a/client/coral-admin/src/routes/Community/components/CommunityLayout.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const CommunityLayout = (props) => ( -
- {props.children} -
-); - -export default CommunityLayout; diff --git a/client/coral-admin/src/routes/Community/containers/Community.js b/client/coral-admin/src/routes/Community/containers/Community.js index 445b7f413..0356762d4 100644 --- a/client/coral-admin/src/routes/Community/containers/Community.js +++ b/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); diff --git a/client/coral-admin/src/routes/Community/index.js b/client/coral-admin/src/routes/Community/index.js deleted file mode 100644 index 528fe63cd..000000000 --- a/client/coral-admin/src/routes/Community/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export {default as Community} from './containers/Community'; -export {default as CommunityLayout} from './components/CommunityLayout';