Add more logic to pagination

js/components/ascribe_pagination/pagination.js

@@ -5,28 +5,26 @@ import PaginationButton from './pagination_button';
 let Pagination = React.createClass({
     propTypes: {
         goToPage: React.PropTypes.func.isRequired,
-        currentPage: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.number
-        ]).isRequired
+        currentPage: React.PropTypes.number.isRequired,
+        totalPages: React.PropTypes.number.isRequired
         //itemListCount: React.PropTypes.number.isRequired 
     },
 
     render() {
-        let currentPage = parseInt(this.props.currentPage, 10);
-
         return(
             <nav>
                 <ul className="pager">
                     <PaginationButton 
                         direction='previous'
                         goToPage={this.props.goToPage}
-                        currentPage={currentPage}>
+                        currentPage={this.props.currentPage}
+                        totalPages={this.props.totalPages}>
                     </PaginationButton>
                     <PaginationButton 
                         direction='next'
                         goToPage={this.props.goToPage}
-                        currentPage={currentPage}>
+                        currentPage={this.props.currentPage}
+                        totalPages={this.props.totalPages}>
                     </PaginationButton>
                 </ul>
             </nav>

js/components/ascribe_pagination/pagination_button.js

@@ -7,14 +7,19 @@ let PaginationButton = React.createClass({
     propTypes: {
         direction: React.PropTypes.oneOf(['previous', 'next']),
         goToPage: React.PropTypes.func.isRequired,
-        currentPage: React.PropTypes.number.isRequired
+        currentPage: React.PropTypes.number.isRequired,
+        totalPages: React.PropTypes.number.isRequired
+    },
+
+    isInRange(page) {
+        return page > 0 && page <= this.props.totalPages;
     },
 
     render() {
-        let page = parseInt(this.props.currentPage, 10);
         let directionDisplay;
-
+        let page = this.props.currentPage;
         let isDisabled = '';
+        let anchor;
 
         if(this.props.direction === 'previous') {
             page -= 1;
@@ -32,20 +37,29 @@ let PaginationButton = React.createClass({
                 );
         }
 
-        if(page === 0) {
-            isDisabled += ' disabled';
-        }
-
-        return (
-            <li className={this.props.direction + isDisabled }>
+        if (this.isInRange(page)) {
+            anchor = (
                 <Link to="pieces"
                       query={{page}}
                       onClick={this.props.goToPage(page)}>
                     {directionDisplay}
                 </Link>
+            );
+        } else {
+            isDisabled += ' disabled';
+            anchor = (
+                <a>
+                    {directionDisplay}
+                </a>
+            );
+        }
+
+        return (
+            <li className={this.props.direction + isDisabled }>
+                {anchor}
             </li>
         );
     }
 });
 
-export default PaginationButton;
+export default PaginationButton;

js/components/ascribe_table/table.js

@@ -12,7 +12,6 @@ let Table = React.createClass({
         changeOrder: React.PropTypes.func.isRequired
     },
     render() {
-
         if(this.props.itemList && this.props.itemList.length > 0) {
             return (
                 <div className="ascribe-table">

js/components/piece_list.js

@@ -21,16 +21,28 @@ let PieceList = React.createClass({
 
     componentDidMount() {
         let page = this.props.query.page || this.state.page;
+        PieceListStore.listen(this.onChange);
         PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
                                    this.state.orderBy, this.state.orderAsc);
     },
 
+    componentWillUnmount() {
+        PieceListStore.unlisten(this.onChange);
+    },
+
+    onChange() {
+        this.setState(this.getInitialState());
+    },
+
     paginationGoToPage(page) {
-        return () => PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
+        return (e) => PieceListActions.fetchPieceList(page, this.state.pageSize,
+                                                      this.state.search, this.state.orderBy,
+                                                      this.state.orderAsc);
     },
 
     tableChangeOrder(orderBy, orderAsc) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, orderBy, orderAsc);
+        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize,
+                                        this.state.search, orderBy, orderAsc);
     },
 
     render() {
@@ -40,6 +52,9 @@ let PieceList = React.createClass({
             new TableColumnModel('title', 'Title', TableItemText, 4, true)
         ];
 
+        let currentPage = parseInt(this.props.query.page, 10);
+        let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize)
+
         // Could wrap this altContainer potentially once again.
         return (
             <AltContainer
@@ -57,7 +72,9 @@ let PieceList = React.createClass({
                     }
                 }}>
                 <Table columnList={columnList} changeOrder={this.tableChangeOrder} />
-                <Pagination currentPage={this.props.query.page} goToPage={this.paginationGoToPage} />
+                <Pagination currentPage={currentPage}
+                            totalPages={totalPages}
+                            goToPage={this.paginationGoToPage} />
             </AltContainer>
         );
     }