Merge pull request #2757 from weseek/add-pagination-for-displaying-attachment-data

Add pagination for displaying attachment data

src/client/js/components/PageAttachment.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 
 import PageAttachmentList from './PageAttachment/PageAttachmentList';
 import DeleteAttachmentModal from './PageAttachment/DeleteAttachmentModal';
+import PaginationWrapper from './PaginationWrapper';
 import { withUnstatedContainers } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
@@ -14,6 +15,9 @@ class PageAttachment extends React.Component {
     super(props);
 
     this.state = {
+      activePage: 1,
+      limit: 10,
+      totalAttachments: 0,
       attachments: [],
       inUse: {},
       attachmentToDelete: null,
@@ -21,22 +25,26 @@ class PageAttachment extends React.Component {
       deleteError: '',
     };
 
+    this.handlePage = this.handlePage.bind(this);
     this.onAttachmentDeleteClicked = this.onAttachmentDeleteClicked.bind(this);
     this.onAttachmentDeleteClickedConfirm = this.onAttachmentDeleteClickedConfirm.bind(this);
   }
 
-  async componentDidMount() {
+
+  async handlePage(selectedPage) {
     const { pageId } = this.props.pageContainer.state;
+    const { limit } = this.state;
+    const offset = (selectedPage - 1) * limit;
+    const activePage = selectedPage;
 
-    if (!pageId) {
-      return;
-    }
+    if (!pageId) { return }
 
-    const limit = 10;
-    // offset値は、dummy data この後のタスクで実装
-    const offset = 0;
-    const res = await this.props.appContainer.apiv3Get('/attachment/list', { pageId, limit, offset });
+    const res = await this.props.appContainer.apiv3Get('/attachment/list', {
+      pageId, limit, offset,
+    });
     const attachments = res.data.paginateResult.docs;
+    const totalAttachments = res.data.paginateResult.totalDocs;
+
     const inUse = {};
 
     for (const attachment of attachments) {
@@ -44,11 +52,18 @@ class PageAttachment extends React.Component {
     }
 
     this.setState({
+      activePage,
+      totalAttachments,
       attachments,
       inUse,
     });
   }
 
+
+  async componentDidMount() {
+    await this.handlePage(1);
+  }
+
   checkIfFileInUse(attachment) {
     const { markdown } = this.props.pageContainer.state;
 
@@ -93,6 +108,7 @@ class PageAttachment extends React.Component {
     return this.props.appContainer.currentUser != null;
   }
 
+
   render() {
     let deleteAttachmentModal = '';
     if (this.isUserLoggedIn()) {
@@ -133,6 +149,13 @@ class PageAttachment extends React.Component {
         />
 
         {deleteAttachmentModal}
+
+        <PaginationWrapper
+          activePage={this.state.activePage}
+          changePage={this.handlePage}
+          totalItemsCount={this.state.totalAttachments}
+          pagingLimit={this.state.limit}
+        />
       </div>
     );
   }

src/server/routes/apiv3/attachment.js

@@ -58,7 +58,6 @@ module.exports = (crowi) => {
       );
 
       return res.apiv3({ paginateResult });
-
     }
     catch (err) {
       logger.error('Attachment not found', err);