RecentCreated_feedback

src/client/js/components/RecentCreated/RecentCreated.js

@@ -13,14 +13,12 @@ export default class RecentCreated extends React.Component {
       PaginationNumbers: {},
 
     };
-    this.getRecentCreatedList = this.getRecentCreatedList.bind(this);
     this.calculatePagination = this.calculatePagination.bind(this);
   }
 
 
   componentWillMount() {
     this.getRecentCreatedList(1);
-    console.log('will mount this.state=', this.state);
   }
   getRecentCreatedList(selectPageNumber) {
 
@@ -29,7 +27,8 @@ export default class RecentCreated extends React.Component {
     const limit = this.state.limit;
     const offset = (selectPageNumber - 1) * limit;
 
-    this.props.crowi.apiGet('/pages.recentCreated', {page_id: pageId , user: userId , limit: limit , offset: offset , })
+    // pagiNation
+    this.props.crowi.apiGet('/pages.recentCreated', {page_id: pageId, user: userId, limit: limit, offset: offset, })
       .then(res => {
         const totalCount = res.pages[0].totalCount;
         const activePage = selectPageNumber;
@@ -45,16 +44,18 @@ export default class RecentCreated extends React.Component {
   }
   calculatePagination(limit, totalCount, activePage) {
     let PaginationNumbers = {};
-    // pageNation totalPageNumber calculate
+    // pagiNation totalPageNumber calculate
     let totalPage = totalCount % limit === 0 ? totalCount / limit : Math.floor(totalCount / limit) + 1;
     let paginationStart;
-    // pageNation Number area size = 5 , pageNuber calculate in here
+    // pagiNation Number area size = 5 , pageNuber calculate in here
     // activePage Position calculate ex. 4 5 [6] 7 8 (Page8 over is Max), 3 4 5 [6] 7 (Page7 is Max)
     if ( activePage < 4) {
       paginationStart = 1;
-    } else if ( activePage <= (totalPage - 2 )) {
+    }
+    else if ( activePage <= (totalPage - 2 )) {
       paginationStart = activePage- 2;
-    } else if ( activePage >= (totalPage -2) ) {
+    }
+    else if ( activePage >= (totalPage -2) ) {
       paginationStart = (totalPage > 5)? totalPage -4 : 1;
     }
     // MaxViewPageNum calculate ex. 4 5 6 7 8 , 1 2 3 4
@@ -66,74 +67,126 @@ export default class RecentCreated extends React.Component {
     PaginationNumbers.paginationStart = paginationStart;
     PaginationNumbers.MaxViewPageNum = MaxViewPageNum;
 
-    console.log('PagenationNumbers=', PaginationNumbers);
     return PaginationNumbers;
   }
+  /**
+   * generate Elements of Page
+   *
+   * @param {any} pages Array of pages Model Obj
+   *
+   */
+  generatePageList(pages) {
+    return pages.map((page, i) => {
+      return (
+        <li key={i}>
+          <img src="/images/icons/user.svg" className="picture img-circle" ></img>
+          <a href={page.path} className="page-list-link" data-path={page.path} data-short-path={page.revision.body}>{decodeURI(page.path)}</a>
+        </li>
+      );
+    });
 
+  }
 
-  render() {
-    console.log('this.state=', this.state);
-    let totalPage = this.state.PaginationNumbers.totalPage;
-    let activePage = this.state.activePage;
-    let items = [];
-    let paginationStart = this.state.PaginationNumbers.paginationStart;
-    let MaxViewPageNum =  this.state.PaginationNumbers.MaxViewPageNum;
-    if (1 == activePage) {
-      items.push(
-        <Pagination.First disabled />
+  /**
+   * generate Elements of Pagination First Prev
+   * ex.  <<   <   1  2  3  >  >>
+   * this function set << & <
+   */
+  generateFirstPrev(activePage) {
+    let paginationItems = [];
+    if (1 != activePage) {
+      paginationItems.push(
+        <Pagination.First key="first" onClick={() => this.getRecentCreatedList(1)} />
       );
-      items.push(
-        <Pagination.Prev disabled />
+      paginationItems.push(
+        <Pagination.Prev key="prev" onClick={() => this.getRecentCreatedList(this.state.activePage - 1)} />
       );
     }
     else {
-      items.push(
-        <Pagination.First onClick={() => this.getRecentCreatedList(1)} />
+      paginationItems.push(
+        <Pagination.First key="first" disabled />
       );
-      items.push(
-        <Pagination.Prev onClick={() => this.getRecentCreatedList(this.state.activePage - 1)} />
+      paginationItems.push(
+        <Pagination.Prev key="prev" disabled />
       );
+
     }
+    return paginationItems;
+  }
+
+  /**
+   * generate Elements of Pagination First Prev
+   *  ex. << < 4 5 6 7 8 > >>, << < 1 2 3 4 > >>
+   * this function set  numbers
+   */
+  generatePaginations(activePage, paginationStart, MaxViewPageNum) {
+    let paginationItems = [];
     for (let number = paginationStart; number <= MaxViewPageNum; number++) {
-      items.push(
+      paginationItems.push(
         <Pagination.Item key={number} active={number === activePage} onClick={ () => this.getRecentCreatedList(number)}>{number}</Pagination.Item>
       );
     }
-    if (totalPage === activePage) {
-      items.push(
-        <Pagination.Next disabled />
+    return paginationItems;
+  }
+
+  /**
+   * generate Elements of Pagination First Prev
+   * ex.  <<   <   1  2  3  >  >>
+   * this function set > & >>
+   */
+  generateNextLast(activePage, totalPage) {
+    let paginationItems = [];
+    if (totalPage != activePage) {
+      paginationItems.push(
+        <Pagination.Next key="next" onClick={() => this.getRecentCreatedList(this.state.activePage + 1)} />
       );
-      items.push(
-        <Pagination.Last disabled />
+      paginationItems.push(
+        <Pagination.Last key="last" onClick={() => this.getRecentCreatedList(totalPage)} />
       );
     }
     else {
-      items.push(
-        <Pagination.Next onClick={() => this.getRecentCreatedList(this.state.activePage + 1)} />
+      paginationItems.push(
+        <Pagination.Next key="next" disabled />
       );
-      items.push(
-        <Pagination.Last onClick={() => this.getRecentCreatedList(totalPage)} />
+      paginationItems.push(
+        <Pagination.Last key="last" disabled />
       );
+
     }
-// TODO same key Warning
+    return paginationItems;
+
+  }
+
+  render() {
+    const pageList = this.generatePageList(this.state.pages);
+
+    let paginationItems = [];
+    let activePage = this.state.activePage;
+    let totalPage = this.state.PaginationNumbers.totalPage;
+    let paginationStart = this.state.PaginationNumbers.paginationStart;
+    let MaxViewPageNum =  this.state.PaginationNumbers.MaxViewPageNum;
+    let firstPrevItems = this.generateFirstPrev(activePage);
+    paginationItems.push(firstPrevItems);
+    let paginations = this.generatePaginations(activePage, paginationStart, MaxViewPageNum);
+    paginationItems.push(paginations);
+    let nextLastItems = this.generateNextLast(activePage, totalPage);
+    paginationItems.push(nextLastItems);
+
     return (
       <div className="page-list-container-create">
         <ul className="page-list-ul page-list-ul-flat">
-          {!this.state.pages.lenth != 0 &&
-            this.state.pages.map((page, i) => {
-            return <li key="{page.id}">
-                   <img src="/images/icons/user.svg" className="picture img-circle" ></img>
-                   <a href="{page.path}" className="page-list-link" data-path="{page.path}" data-short-path="{page.revision.body}">{decodeURI(page.path)}</a>
-                 </li> ;
-            })
-          }
+            {pageList}
         </ul>
-        <Pagination bsSize="small">{items}</Pagination>
+        {
+        <Pagination bsSize="small">{paginationItems}</Pagination>
+        }
       </div>
     );
   }
 }
 
+
+
 RecentCreated.propTypes = {
   pageId: PropTypes.string.isRequired,
   crowi: PropTypes.object.isRequired,