Merge branch 'master' into new-flags

client/coral-admin/src/components/CountBadge.css

@@ -5,7 +5,7 @@
   vertical-align: middle;
   padding: 1px 5px;
   border-radius: 2px;
-  margin-left: 2px;
+  margin-left: 5px;
   line-height: 18px;
   box-sizing: border-box;
   height: 18px;

client/coral-admin/src/components/CountBadge.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './CommentCount.css';
+import styles from './CountBadge.css';
 
 import t from 'coral-framework/services/i18n';
 
-const CommentCount = ({count}) => {
+const CountBadge = ({count}) => {
   let number = count;
 
   // shorten large counts to abbreviations
@@ -21,8 +21,8 @@ const CommentCount = ({count}) => {
   );
 };
 
-CommentCount.propTypes = {
+CountBadge.propTypes = {
   count: PropTypes.number.isRequired
 };
 
-export default CommentCount;
+export default CountBadge;

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

@@ -4,6 +4,7 @@ import CommunityMenu from './CommunityMenu';
 import People from './People';
 import FlaggedAccounts from '../containers/FlaggedAccounts';
 import RejectUsernameDialog from './RejectUsernameDialog';
+import PropTypes from 'prop-types';
 
 export default class Community extends Component {
 
@@ -76,7 +77,10 @@ export default class Community extends Component {
 
     return (
       <div>
-        <FlaggedAccounts />
+        <FlaggedAccounts
+          data={this.props.data}
+          root={this.props.root}
+        />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}
           handleClose={props.hideRejectUsernameDialog}
@@ -90,15 +94,25 @@ export default class Community extends Component {
   render() {
     const {searchValue} = this.state;
     const tab = this.getTabContent(searchValue, this.props);
+    const {root: {flaggedUsernamesCount}} = this.props;
 
     return (
       <div>
-        <CommunityMenu />
-        <div>
-          { tab }
-        </div>
+        <CommunityMenu flaggedUsernamesCount={flaggedUsernamesCount} />
+        <div>{tab}</div>
       </div>
     );
   }
 }
 
+Community.propTypes = {
+  community: PropTypes.object,
+  fetchAccounts: PropTypes.func,
+  hideRejectUsernameDialog: PropTypes.func,
+  updateSorting: PropTypes.func,
+  newPage: PropTypes.func,
+  route: PropTypes.object,
+  rejectUsername: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object
+};

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

@@ -1,18 +1,21 @@
 import React from 'react';
-
 import styles from './CommunityMenu.css';
 import t from 'coral-framework/services/i18n';
 import {Link} from 'react-router';
+import PropTypes from 'prop-types';
+import CountBadge from '../../../components/CountBadge';
 
-const CommunityMenu = () => {
+const CommunityMenu = ({flaggedUsernamesCount = 0}) => {
   const flaggedPath = '/admin/community/flagged';
   const peoplePath = '/admin/community/people';
+
   return (
     <div className='mdl-tabs'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div>
           <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
             {t('community.flaggedaccounts')}
+            <CountBadge count={flaggedUsernamesCount} />
           </Link>
           <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
             {t('community.people')}
@@ -23,4 +26,8 @@ const CommunityMenu = () => {
   );
 };
 
+CommunityMenu.propTypes = {
+  flaggedUsernamesCount: PropTypes.number,
+};
+
 export default CommunityMenu;

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

@@ -1,9 +1,16 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
+import {compose, gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+import PropTypes from 'prop-types';
+
+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,
@@ -20,15 +27,57 @@ class CommunityContainer extends Component {
   }
 
   render() {
-    return (
-      <Community {...this.props} />
-    );
+    return <Community 
+      fetchAccounts={this.props.fetchAccounts}
+      community={this.props.community}
+      hideRejectUsernameDialog={this.props.hideRejectUsernameDialog}
+      updateSorting={this.props.updateSorting}
+      newPage={this.props.newPage}
+      route={this.props.route}
+      rejectUsername={this.props.rejectUsername}
+      data={this.props.data}
+      root={this.props.root}
+    />;
   }
 }
 const mapStateToProps = (state) => ({
   community: state.community,
 });
 
+CommunityContainer.propTypes = {
+  community: PropTypes.object,
+  fetchAccounts: PropTypes.func,
+  hideRejectUsernameDialog: PropTypes.func,
+  updateSorting: PropTypes.func,
+  newPage: PropTypes.func,
+  route: PropTypes.object,
+  rejectUsername: PropTypes.func,
+  data: PropTypes.object,
+  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,
@@ -41,4 +90,5 @@ export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withSetUserStatus,
   withRejectUsername,
+  withData,
 )(CommunityContainer);

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

@@ -2,8 +2,9 @@ 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 {withFragments} from 'plugin-api/beta/client/hocs';
 import {Spinner} from 'coral-ui';
+import PropTypes from 'prop-types';
 
 import {withSetUserStatus} from 'coral-framework/graphql/mutations';
 import {showBanUserDialog} from 'actions/banUserDialog';
@@ -24,7 +25,10 @@ class FlaggedAccountsContainer extends Component {
   }
 
   approveUser = ({userId}) => {
-    return this.props.setUserStatus({userId, status: 'APPROVED'});
+    return this.props.setUserStatus({
+      userId,
+      status: 'APPROVED'
+    });
   }
 
   loadMore = () => {
@@ -74,6 +78,16 @@ class FlaggedAccountsContainer extends Component {
   }
 }
 
+FlaggedAccountsContainer.propTypes = {
+  showBanUserDialog: PropTypes.func,
+  showSuspendUserDialog: PropTypes.func,
+  showRejectUsernameDialog: PropTypes.func,
+  viewUserDetail: PropTypes.func,
+  setUserStatus: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object
+};
+
 const LOAD_MORE_QUERY = gql`
   query TalkAdmin_LoadMoreFlaggedAccounts($limit: Int, $cursor: Cursor) {
     users(query:{action_type: FLAG, statuses: [PENDING], limit: $limit, cursor: $cursor}){
@@ -88,31 +102,6 @@ const LOAD_MORE_QUERY = gql`
   ${FlaggedUser.fragments.user}
 `;
 
-export const withFlaggedAccountsyQuery = withQuery(gql`
-  query TalkAdmin_FlaggedAccounts {
-    ...${getDefinitionName(FlaggedUser.fragments.root)}
-    users(query:{action_type: FLAG, statuses: [PENDING], limit: 10}){
-      hasNextPage
-      endCursor
-      nodes {
-        __typename
-        ...${getDefinitionName(FlaggedUser.fragments.user)}
-      }
-    }
-    me {
-      __typename
-      ...${getDefinitionName(FlaggedUser.fragments.me)}
-    }
-  }
-  ${FlaggedUser.fragments.root}
-  ${FlaggedUser.fragments.user}
-  ${FlaggedUser.fragments.me}
-`, {
-  options: {
-    fetchPolicy: 'network-only',
-  },
-});
-
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     showBanUserDialog,
@@ -123,6 +112,23 @@ const mapDispatchToProps = (dispatch) =>
 
 export default compose(
   connect(null, mapDispatchToProps),
-  withFlaggedAccountsyQuery,
   withSetUserStatus,
+  withFragments({
+    root: gql`
+      fragment TalkAdminCommunity_FlaggedAccounts_root on RootQuery {
+        users(query:{action_type: FLAG, statuses: [PENDING], limit: 10}){
+          hasNextPage
+          endCursor
+          nodes {
+            __typename
+            ...${getDefinitionName(FlaggedUser.fragments.user)}
+          }
+        }
+        me {
+          id
+        }
+      }
+      ${FlaggedUser.fragments.user}
+    `,
+  }),
 )(FlaggedAccountsContainer);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CommentCount from './CommentCount';
+import CountBadge from '../../../components/CountBadge';
 import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import {Icon} from 'coral-ui';
@@ -28,7 +28,7 @@ const ModerationMenu = ({
               to={getModPath(queue.key, asset.id)}
               className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === queue.key})}
               activeClassName={styles.active}>
-              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CommentCount count={queue.count} />
+              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CountBadge count={queue.count} />
             </Link>
           )}
         </div>