Implement more pagination functionality

js/actions/piece_list_actions.js

@@ -20,7 +20,8 @@ class PieceListActions {
                     search,
                     orderBy,
                     orderAsc,
-                    'pieceList': res.pieces
+                    'pieceList': res.pieces,
+                    'pieceListCount': res.count
                 });
             })
             .catch((err) => {

js/components/pagination.js

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

js/components/pagination_button.js

@@ -6,13 +6,16 @@ let Link = Router.Link;
 let PaginationButton = React.createClass({
     propTypes: {
         direction: React.PropTypes.oneOf(['previous', 'next']),
-        goToPage: React.PropTypes.func.isRequired
+        goToPage: React.PropTypes.func.isRequired,
+        currentPage: React.PropTypes.number.isRequired
     },
 
     render() {
-        let page = parseInt(this.props.page, 10);
+        let page = parseInt(this.props.currentPage, 10);
         let directionDisplay;
 
+        let isDisabled = '';
+
         if(this.props.direction === 'previous') {
             page -= 1;
             directionDisplay = (
@@ -29,8 +32,12 @@ let PaginationButton = React.createClass({
                 );
         }
 
+        if(page === 0) {
+            isDisabled += ' disabled';
+        }
+
         return (
-            <li className={this.props.direction}>
+            <li className={this.props.direction + isDisabled }>
                 <Link to="pieces"
                       query={{page}}
                       onClick={this.props.goToPage(page)}>

js/components/piece_list.js

@@ -15,7 +15,6 @@ import Pagination from './pagination'
 
 let PieceList = React.createClass({
     
-    // FIXME: this might be useless
     getInitialState() {
         return PieceListStore.getState();
     },
@@ -38,6 +37,7 @@ let PieceList = React.createClass({
             new TableColumnModel('title', 'Title', TableItemText, 4, true)
         ];
 
+        // Could wrap this altContainer potentially once again.
         return (
             <AltContainer
                 store={PieceListStore} 
@@ -45,6 +45,7 @@ let PieceList = React.createClass({
                 transform={(props) => {
                     return {
                         'itemList': props.pieceList,
+                        'itemListCount': props.pieceListCount,
                         'fetchList': props.fetchPieceList,
                         'orderBy': props.orderBy,
                         'orderAsc': props.orderAsc,

js/stores/piece_list_store.js

@@ -4,7 +4,18 @@ import PieceListActions from '../actions/piece_list_actions';
 
 class PieceListStore {
     constructor() {
-        this.pieceList = []; // rename this to pieceList after figuring out AltContainer transform
+        /**
+         * The store manages the state that is introduced by fetching 
+         * the resource with certain parameters.
+         *
+         * This means that pieceList for example only contains pageSize-many items.
+         * Of course this can be altered by page as well.
+         *
+         * This is also the reason why we store a pieceListCount, which is essentially
+         * the number of items the resource actually - without pagination - provides.
+         */
+        this.pieceList = [];
+        this.pieceListCount = 0;
         this.page = 1;
         this.pageSize = 10;
         this.search = "";
@@ -13,13 +24,14 @@ class PieceListStore {
         this.bindActions(PieceListActions);
     }
 
-    onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc }) {
+    onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
         this.page = page;
         this.pageSize = pageSize;
         this.search = search;
         this.orderAsc = orderAsc;
         this.orderBy = orderBy;
         this.pieceList = pieceList;
+        this.pieceListCount = pieceListCount;
     }
 };