paginate pages

src/client/js/components/Admin/UserGroupDetail/UserGroupPageList.jsx

@@ -3,21 +3,68 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import Page from '../../PageList/Page';
+import PaginationWrapper from '../../PaginationWrapper';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import UserGroupDetailContainer from '../../../services/UserGroupDetailContainer';
+import { toastError } from '../../../util/apiNotification';
 
 class UserGroupPageList extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentPages: [],
+      activePage: 1,
+      total: 0,
+      pagingLimit: 10,
+    };
+
+    this.handlePageChange = this.handlePageChange.bind(this);
+  }
+
+  async componentDidMount() {
+    await this.handlePageChange(this.state.activePage);
+  }
+
+  async handlePageChange(pageNum) {
+    const limit = this.state.pagingLimit;
+    const offset = (pageNum - 1) * limit;
+
+    try {
+      const res = await this.props.appContainer.apiv3.get(`/user-groups/${this.props.userGroupDetailContainer.state.userGroup._id}/pages`, {
+        limit,
+        offset,
+      });
+      const { total, pages } = res.data;
+
+      this.setState({
+        total,
+        activePage: pageNum,
+        currentPages: pages,
+      });
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
   render() {
     const { t, userGroupDetailContainer } = this.props;
 
     return (
       <Fragment>
         <ul className="page-list-ul page-list-ul-flat">
-          {userGroupDetailContainer.state.relatedPages.map((page) => { return <Page key={page._id} page={page} /> })}
+          {this.state.currentPages.map((page) => { return <Page key={page._id} page={page} /> })}
         </ul>
         {userGroupDetailContainer.state.relatedPages.length === 0 ? <p>{ t('user_group_management.no_pages') }</p> : null}
+        <PaginationWrapper
+          activePage={this.state.activePage}
+          changePage={this.handlePageChange}
+          totalItemsCount={this.state.total}
+          pagingLimit={this.state.pagingLimit}
+        />
       </Fragment>
     );
   }

src/server/routes/apiv3/user-group.js

@@ -564,12 +564,18 @@ module.exports = (crowi) => {
     const { limit, offset } = req.query;
 
     try {
-      const pages = await Page
-        .find({ grant: Page.GRANT_USER_GROUP, grantedGroup: { $in: [id] } }, null, { skip: offset, limit })
-        .populate('lastUpdateUser', User.USER_PUBLIC_FIELDS)
-        .exec();
+      const [pages, total] = await Promise.all([
+        Page
+          .find({ grant: Page.GRANT_USER_GROUP, grantedGroup: { $in: [id] } }, null, { skip: offset, limit })
+          .populate('lastUpdateUser', User.USER_PUBLIC_FIELDS)
+          .exec(),
+        Page.countDocuments({ grant: Page.GRANT_USER_GROUP, grantedGroup: { $in: [id] } }),
+      ]);
+
+      const current = offset / limit + 1;
 
-      return res.apiv3({ pages });
+      // TODO: create a moudle for paginated response
+      return res.apiv3({ total, current, pages });
     }
     catch (err) {
       const msg = `Error occurred in fetching pages for group: ${id}`;