Merge pull request #2729 from weseek/imprv/transplant-gw3575

GW-3575

src/client/js/components/PageTimeline.jsx

@@ -5,6 +5,7 @@ import { withTranslation } from 'react-i18next';
 
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
+import PaginationWrapper from './PaginationWrapper';
 import { withUnstatedContainers } from './UnstatedUtils';
 
 import RevisionLoader from './Page/RevisionLoader';
@@ -17,21 +18,35 @@ class PageTimeline extends React.Component {
 
     const { appContainer } = this.props;
     this.showPages = this.showPages.bind(this);
+    this.handlePage = this.handlePage.bind(this);
     this.state = {
+      activePage: 1,
+      totalPages: 0,
+      limit: appContainer.getConfig().recentCreatedLimit,
       isEnabled: appContainer.getConfig().isEnabledTimeline,
-
       // TODO: remove after when timeline is implemented with React and inject data with props
       pages: this.props.pages,
     };
 
   }
 
-  async showPages() {
+  async handlePage(selectedPage) {
+    await this.showPages(selectedPage);
+  }
+
+  async showPages(selectedPage) {
     const { appContainer, pageContainer } = this.props;
     const { path } = pageContainer.state;
-    const res = await appContainer.apiv3Get('/pages/list', { path });
+    const limit = this.state.limit;
+    const offset = (selectedPage - 1) * limit;
+    const res = await appContainer.apiv3Get('/pages/list', { path, limit, offset });
+    const activePage = selectedPage;
+    const totalPages = res.data.totalCount;
+    const pages = res.data.pages;
     this.setState({
-      pages: res.data.pages,
+      activePage,
+      totalPages,
+      pages,
     });
   }
 
@@ -43,7 +58,7 @@ class PageTimeline extends React.Component {
 
     // initialize GrowiRenderer
     this.growiRenderer = appContainer.getRenderer('timeline');
-    this.showPages();
+    this.showPages(1);
   }
 
   render() {
@@ -57,23 +72,33 @@ class PageTimeline extends React.Component {
       return <React.Fragment></React.Fragment>;
     }
 
-    return pages.map((page) => {
-      return (
-        <div className="timeline-body" key={`key-${page.id}`}>
-          <div className="card card-timeline">
-            <div className="card-header"><a href={page.path}>{page.path}</a></div>
-            <div className="card-body">
-              <RevisionLoader
-                lazy
-                growiRenderer={this.growiRenderer}
-                pageId={page.id}
-                revisionId={page.revision}
-              />
+    return (
+      <div>
+        { pages.map((page) => {
+          return (
+            <div className="timeline-body" key={`key-${page.id}`}>
+              <div className="card card-timeline">
+                <div className="card-header"><a href={page.path}>{page.path}</a></div>
+                <div className="card-body">
+                  <RevisionLoader
+                    lazy
+                    growiRenderer={this.growiRenderer}
+                    pageId={page.id}
+                    revisionId={page.revision}
+                  />
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      );
-    });
+          );
+        }) }
+        <PaginationWrapper
+          activePage={this.state.activePage}
+          changePage={this.handlePage}
+          totalItemsCount={this.state.totalPages}
+          pagingLimit={this.state.limit}
+        />
+      </div>
+    );
 
   }