add pager

src/client/js/components/PageHistory.jsx

@@ -9,6 +9,7 @@ import { withLoadingSppiner } from './SuspenseUtils';
 import PageRevisionList from './PageHistory/PageRevisionList';
 
 import PageHistroyContainer from '../services/PageHistoryContainer';
+import PaginationWrapper from './PaginationWrapper';
 
 const logger = loggerFactory('growi:PageHistory');
 
@@ -19,7 +20,7 @@ function PageHistory(props) {
   if (pageHistoryContainer.state.revisions === pageHistoryContainer.dummyRevisions) {
     throw new Promise(async() => {
       try {
-        await props.pageHistoryContainer.retrieveRevisions();
+        await props.pageHistoryContainer.retrieveRevisions(1);
       }
       catch (err) {
         toastError(err);
@@ -29,6 +30,32 @@ function PageHistory(props) {
     });
   }
 
+  async function handlePage(selectedPage) {
+    try {
+      await props.pageHistoryContainer.retrieveRevisions(selectedPage);
+    }
+    catch (err) {
+      toastError(err);
+      pageHistoryContainer.setState({ errorMessage: err.message });
+      logger.error(err);
+    }
+  }
+
+
+  function pager() {
+    return (
+      <div className="pull-right my-3">
+        <PaginationWrapper
+          activePage={pageHistoryContainer.state.activePage}
+          changePage={handlePage}
+          totalItemsCount={pageHistoryContainer.state.totalRevisions}
+          pagingLimit={pageHistoryContainer.state.pagingLimit}
+        />
+      </div>
+    );
+  }
+
+
   return (
     <div className="mt-4">
       {pageHistoryContainer.state.errorMessage && (
@@ -36,12 +63,16 @@ function PageHistory(props) {
         <div className="text-danger">{pageHistoryContainer.state.errorMessage}</div>
       </div>
         ) }
+
+      {pager()}
       <PageRevisionList
         revisions={pageHistoryContainer.state.revisions}
         diffOpened={pageHistoryContainer.state.diffOpened}
         getPreviousRevision={pageHistoryContainer.getPreviousRevision}
         onDiffOpenClicked={pageHistoryContainer.onDiffOpenClicked}
       />
+      {pager()}
+
     </div>
   );
 

src/client/js/services/PageHistoryContainer.js

@@ -26,6 +26,10 @@ export default class PageHistoryContainer extends Container {
       // set dummy rivisions for using suspense
       revisions: this.dummyRevisions,
       diffOpened: {},
+
+      totalRevisions: 0,
+      activePage: 1,
+      pagingLimit: Infinity,
     };
 
     this.retrieveRevisions = this.retrieveRevisions.bind(this);
@@ -41,9 +45,13 @@ export default class PageHistoryContainer extends Container {
     return 'PageHistoryContainer';
   }
 
-  async retrieveRevisions() {
+  /**
+   * syncRevisions of selectedPage
+   * @param {number} selectedPage
+   */
+  async retrieveRevisions(selectedPage) {
     const { pageId, shareLinkId } = this.pageContainer.state;
-
+    console.log(selectedPage);
     if (!pageId) {
       return;
     }