Merge pull request #598 from appirio-tech/feature/pagination_bar_reduce_number_of_pages

Github issue #372, [Pagination] - keep fixed pagination option displaying 5 pages.

Author: vikasrohit

src/components/Grid/GridView.scss

@@ -496,7 +496,6 @@
       }
 
       &.go-to-page-pill {
-        // position: inherit;
         .tooltip-target {
           min-width: 27px;
           height: 28px;

src/components/Grid/PaginationBar.jsx

@@ -37,8 +37,8 @@ const GoToPagePill = ({minPage, maxPage, onPageClick}) => {
   }
   return (
     <li className="go-to-page-pill">
-      <Tooltip popMethod="click">
-        <div className="tooltip-target"><span>...</span></div>
+      <Tooltip popMethod="click" theme="light">
+        <div className="tooltip-target"><a href="javascript:">...</a></div>
         <div className="tooltip-body">
           <div className="go-to-page-tooltip">Go to page: <input type="number" min={minPage} max={maxPage} onKeyUp={handleChange} /></div>
         </div>
@@ -130,6 +130,7 @@ const PaginationBar = enhance(({onPageChange, currentPageNum, totalCount, pageSi
       pagePills.splice(1,
         0,
         <GoToPagePill
+          key="goToPagePill-1"
           onPageClick={ handlePageSelection }
           minPage={currentPageNum - pagesBeforeCurrent + remainingPillsLeft }
           maxPage={currentPageNum}
@@ -141,6 +142,7 @@ const PaginationBar = enhance(({onPageChange, currentPageNum, totalCount, pageSi
       pagePills.splice(pagePills.length - 1,
         0, 
         <GoToPagePill
+          key="goToPagePill-2"
           onPageClick={ handlePageSelection }
           minPage={currentPageNum}
           maxPage={ currentPageNum + pagesAfterCurrent - remainingPillsRight}

src/projects/list/components/Projects/Projects.jsx

@@ -12,6 +12,7 @@ class Projects extends Component {
     this.sortHandler = this.sortHandler.bind(this)
     this.onPageChange = this.onPageChange.bind(this)
     this.applyFilters = this.applyFilters.bind(this)
+    this.init = this.init.bind(this)
   }
 
   componentDidUpdate() {
@@ -23,13 +24,26 @@ class Projects extends Component {
     window.sessionStorage.setItem('projectsPageScrollTop', scrollingElement.scrollTop)
   }
 
+  componentWillReceiveProps(nextProps) {
+    console.log(nextProps)
+    const prevQueryParams = _.get(this.props, 'location.query', null)
+    const queryParams = _.get(nextProps, 'location.query', null)
+    if (!_.isEqual(prevQueryParams, queryParams)) {
+      this.init(nextProps)
+    }
+  }
+
   componentWillMount() {
+    this.init(this.props)
+  }
+
+  init(props) {
     document.title = 'Projects - Topcoder'
     // this.searchTermFromQuery = this.props.location.query.q || ''
-    const {criteria, loadProjects} = this.props
-    let pageNum = this.props.pageNum
+    const {criteria, loadProjects} = props
+    let pageNum = props.pageNum
     // check for criteria specified in URL.
-    const queryParams = _.get(this.props, 'location.query', null)
+    const queryParams = _.get(props, 'location.query', null)
     if (!_.isEmpty(queryParams)) {
       const initialCriteria = {}
       if (queryParams.sort) initialCriteria.sort = queryParams.sort