move to container

src/client/js/components/Admin/Users/Users.jsx

@@ -18,36 +18,12 @@ class UserPage extends React.Component {
   constructor(props) {
     super();
 
-    this.state = {
-      totalUsers: 0,
-      activePage: 1,
-      pagingLimit: Infinity,
-    };
-
     this.handlePage = this.handlePage.bind(this);
   }
 
   async handlePage(selectedPage) {
-    await this.setState({ activePage: selectedPage });
-    await this.syncUserGroupAndRelations();
-  }
-
-  async syncUserGroupAndRelations() {
-
     try {
-      const params = { page: this.state.activePage };
-      const response = await this.props.appContainer.apiv3.get('/users', params);
-
-      const users = response.data.users;
-      const totalUsers = response.data.totalUsers;
-      const pagingLimit = response.data.pagingLimit;
-
-      this.props.adminUsersContainer.setState({ users });
-
-      this.setState({
-        totalUsers,
-        pagingLimit,
-      });
+      await this.props.adminUsersContainer.syncUsers(selectedPage);
     }
     catch (err) {
       toastError(err);
@@ -69,10 +45,10 @@ class UserPage extends React.Component {
         </p>
         <UserTable />
         <PaginationWrapper
-          activePage={this.state.activePage}
+          activePage={adminUsersContainer.state.activePage}
           changePage={this.handlePage}
-          totalItemsCount={this.state.totalUsers}
-          pagingLimit={this.state.pagingLimit}
+          totalItemsCount={adminUsersContainer.state.totalUsers}
+          pagingLimit={adminUsersContainer.state.pagingLimit}
         />
       </Fragment>
     );

src/client/js/services/AdminUsersContainer.js

@@ -21,6 +21,9 @@ export default class AdminUsersContainer extends Container {
       isPasswordResetModalShown: false,
       isUserInviteModalShown: false,
       userForPasswordResetModal: null,
+      totalUsers: 0,
+      activePage: 1,
+      pagingLimit: Infinity,
     };
 
     this.showPasswordResetModal = this.showPasswordResetModal.bind(this);
@@ -35,6 +38,29 @@ export default class AdminUsersContainer extends Container {
     return 'AdminUsersContainer';
   }
 
+  /**
+   * syncUsers of selectedPage
+   * @memberOf AdminUsersContainer
+   * @param {number} selectedPage
+   */
+  async syncUsers(selectedPage) {
+
+    const params = { page: selectedPage };
+    const response = await this.appContainer.apiv3.get('/users', params);
+
+    const users = response.data.users;
+    const totalUsers = response.data.totalUsers;
+    const pagingLimit = response.data.pagingLimit;
+
+    this.setState({
+      users,
+      totalUsers,
+      pagingLimit,
+      activePage: selectedPage,
+    });
+
+  }
+
   /**
    * open reset password modal, and props user
    * @memberOf AdminUsersContainer