Refactor and implement pagination

client/coral-admin/src/containers/SuspendUserDialog.js

@@ -54,8 +54,9 @@ class SuspendUserDialogContainer extends Component {
 
 const withOrganizationName = withQuery(gql`
   query CoralAdmin_SuspendUserDialog {
+      __typename
      settings {
-      organizationName
+       organizationName
     }
   }
 `);

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

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 
 import CommunityMenu from './CommunityMenu';
 import People from './People';
-import FlaggedAccounts from './FlaggedAccounts';
+import FlaggedAccounts from '../containers/FlaggedAccounts';
 import RejectUsernameDialog from './RejectUsernameDialog';
 
 export default class Community extends Component {
@@ -54,7 +54,7 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, root: {users}, viewUserDetail} = props;
+    const {community} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -76,16 +76,7 @@ export default class Community extends Component {
 
     return (
       <div>
-        <FlaggedAccounts
-          commenters={users.nodes}
-          showBanUserDialog={props.showBanUserDialog}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-          showRejectUsernameDialog={props.showRejectUsernameDialog}
-          approveUser={props.approveUser}
-          rejectUsername={props.rejectUsername}
-          currentUser={this.props.currentUser}
-          viewUserDetail={viewUserDetail}
-        />
+        <FlaggedAccounts />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}
           handleClose={props.hideRejectUsernameDialog}

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

@@ -3,33 +3,48 @@ import React from 'react';
 import t from 'coral-framework/services/i18n';
 import styles from './Community.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
-import User from './User';
+import LoadMore from '../../../components/LoadMore';
+import FlaggedUser from '../containers/FlaggedUser';
 
 const FlaggedAccounts = (props) => {
-  const {commenters} = props;
-  const hasResults = commenters && !!commenters.length;
+  const {
+    users,
+    loadMore,
+    showBanUserDialog,
+    showSuspendUserDialog,
+    showRejectUsernameDialog,
+    approveUser,
+    me,
+    viewUserDetail,
+  } = props;
+
+  const hasResults = users.nodes && !!users.nodes.length;
 
   return (
     <div className={styles.container}>
       <div className={styles.mainFlaggedContent}>
         {
           hasResults
-          ? commenters.map((commenter, index) => {
-            return <User
-              user={commenter}
+          ? users.nodes.map((user, index) => {
+            return <FlaggedUser
+              user={user}
               key={index}
               index={index}
               modActionButtons={['APPROVE', 'REJECT']}
-              showBanUserDialog={props.showBanUserDialog}
-              showSuspendUserDialog={props.showSuspendUserDialog}
-              showRejectUsernameDialog={props.showRejectUsernameDialog}
-              approveUser={props.approveUser}
-              currentUser={props.currentUser}
-              viewUserDetail={props.viewUserDetail}
+              showBanUserDialog={showBanUserDialog}
+              showSuspendUserDialog={showSuspendUserDialog}
+              showRejectUsernameDialog={showRejectUsernameDialog}
+              approveUser={approveUser}
+              me={me}
+              viewUserDetail={viewUserDetail}
               />;
           })
           : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
         }
+        <LoadMore
+          loadMore={loadMore}
+          showLoadMore={users.hasNextPage}
+          />
       </div>
     </div>
   );

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

@@ -39,7 +39,7 @@ const User = (props) => {
         <div className={styles.itemHeader}>
           <div className={styles.author}>
             <button onClick={() => {props.viewUserDetail(user.id);}} className={styles.button}>{user.username}</button>
-            {props.currentUser.id !== user.id &&
+            {props.me.id !== user.id &&
               <ActionsMenu icon="not_interested">
                 <ActionsMenuItem
                   disabled={user.status === 'BANNED'}

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

@@ -1,23 +1,15 @@
 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 {Spinner} from 'coral-ui';
+import {compose} from 'react-apollo';
 
 import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
-
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
-
 import {
   fetchAccounts,
   updateSorting,
   newPage,
-  showRejectUsernameDialog,
   hideRejectUsernameDialog
 } from '../../../actions/community';
-import {viewUserDetail} from '../../../actions/userDetail';
 
 import Community from '../components/Community';
 
@@ -27,89 +19,26 @@ class CommunityContainer extends Component {
     this.props.fetchAccounts({});
   }
 
-  approveUser = ({userId}) => {
-    return this.props.setUserStatus({userId, status: 'APPROVED'});
-  }
-
-  banUser = ({userId}) => {
-    return this.props.setUserStatus({userId, status: 'BANNED'});
-  }
-
   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} approveUser={this.approveUser} banUser={this.banUser}/>
+      <Community {...this.props} />
     );
   }
 }
-
-export const withCommunityQuery = withQuery(gql`
-  query CoralAdmin_Community($action_type: ACTION_TYPE) {
-    users(query:{action_type: $action_type}){
-      hasNextPage
-      endCursor
-      nodes {
-        id
-        username
-        status
-        roles
-        actions{
-          id
-          created_at
-          ... on FlagAction {
-            reason
-            message
-            user {
-              id
-              username
-            }
-          }
-        }
-        action_summaries {
-          count
-          ... on FlagActionSummary {
-            reason
-          }
-        }
-      }
-    }
-  }
-`, {
-  options: ({params: {action_type = 'FLAG'}}) => {
-    return {
-      variables: {
-        action_type: action_type
-      }
-    };
-  }
-});
-
 const mapStateToProps = (state) => ({
   community: state.community,
-  currentUser: state.auth.user,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     fetchAccounts,
-    showBanUserDialog,
-    showSuspendUserDialog,
-    showRejectUsernameDialog,
     hideRejectUsernameDialog,
     updateSorting,
     newPage,
-    viewUserDetail,
   }, dispatch);
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withCommunityQuery,
   withSetUserStatus,
   withRejectUsername,
 )(CommunityContainer);

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

@@ -0,0 +1,120 @@
+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 {Spinner} from 'coral-ui';
+
+import {withSetUserStatus} from 'coral-framework/graphql/mutations';
+import {showBanUserDialog} from 'actions/banUserDialog';
+import {showSuspendUserDialog} from 'actions/suspendUserDialog';
+import {showRejectUsernameDialog} from '../../../actions/community';
+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 FlaggedAccounts from '../components/FlaggedAccounts';
+import FlaggedUser from '../containers/FlaggedUser';
+
+class FlaggedAccountsContainer extends Component {
+
+  approveUser = ({userId}) => {
+    return this.props.setUserStatus({userId, status: 'APPROVED'});
+  }
+
+  loadMore = () => {
+    return this.props.data.fetchMore({
+      query: LOAD_MORE_QUERY,
+      variables: {
+        limit: 5,
+        cursor: this.props.root.users.endCursor,
+      },
+      updateQuery: (previous, {fetchMoreResult:{users}}) => {
+        const updated = update(previous, {
+          users: {
+            nodes: {
+              $apply: (nodes) => appendNewNodes(nodes, users.nodes),
+            },
+            hasNextPage: {$set: users.hasNextPage},
+            endCursor: {$set: users.endCursor},
+          },
+        });
+        return updated;
+      },
+    });
+  };
+
+  render() {
+    if (this.props.data.error) {
+      return <div>{this.props.data.error.message}</div>;
+    }
+
+    if (this.props.data.loading) {
+      return <div><Spinner/></div>;
+    }
+    return (
+      <FlaggedAccounts
+        showBanUserDialog={this.props.showBanUserDialog}
+        showSuspendUserDialog={this.props.showSuspendUserDialog}
+        showRejectUsernameDialog={this.props.showRejectUsernameDialog}
+        viewUserDetail={this.props.viewUserDetail}
+        approveUser={this.approveUser}
+        loadMore={this.loadMore}
+        data={this.props.data}
+        root={this.props.root}
+        users={this.props.root.users}
+        me={this.props.root.me}
+      />
+    );
+  }
+}
+
+const LOAD_MORE_QUERY = gql`
+  query TalkAdmin_LoadMoreFlaggedAccounts($limit: Int, $cursor: Cursor) {
+    users(query:{action_type: FLAG, limit: $limit, cursor: $cursor}){
+      hasNextPage
+      endCursor
+      nodes {
+        __typename
+        ...${getDefinitionName(FlaggedUser.fragments.user)}
+      }
+    }
+  }
+  ${FlaggedUser.fragments.user}
+`;
+
+export const withFlaggedAccountsyQuery = withQuery(gql`
+  query TalkAdmin_FlaggedAccounts {
+    ...${getDefinitionName(FlaggedUser.fragments.root)}
+    users(query:{action_type: FLAG, 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}
+`);
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    showBanUserDialog,
+    showSuspendUserDialog,
+    showRejectUsernameDialog,
+    viewUserDetail,
+  }, dispatch);
+
+export default compose(
+  connect(null, mapDispatchToProps),
+  withFlaggedAccountsyQuery,
+  withSetUserStatus,
+)(FlaggedAccountsContainer);

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

@@ -0,0 +1,42 @@
+import {gql} from 'react-apollo';
+import FlaggedUser from '../components/FlaggedUser';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+
+export default withFragments({
+  root: gql`
+    fragment TalkAdminCommunity_FlaggedUser_root on RootQuery {
+      __typename
+    }
+    `,
+  me: gql`
+    fragment TalkAdminCommunity_FlaggedUser_me on User {
+      id
+    }
+    `,
+  user: gql`
+    fragment TalkAdminCommunity_FlaggedUser_user on User {
+      id
+      username
+      status
+      roles
+      actions{
+        id
+        created_at
+        ... on FlagAction {
+          reason
+          message
+          user {
+            id
+            username
+          }
+        }
+      }
+      action_summaries {
+        count
+        ... on FlagActionSummary {
+          reason
+        }
+      }
+    }
+  `
+})(FlaggedUser);