diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js index 4d2514b6..8830b2b6 100644 --- a/js/actions/piece_list_actions.js +++ b/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) => { diff --git a/js/components/pagination.js b/js/components/pagination.js index 9ace55af..90863c25 100644 --- a/js/components/pagination.js +++ b/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 next = parseInt(this.props.page, 10) + 1; + let currentPage = parseInt(this.props.currentPage, 10); return( diff --git a/js/components/pagination_button.js b/js/components/pagination_button.js index a7488d0a..e2badc99 100644 --- a/js/components/pagination_button.js +++ b/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 ( -
  • +
  • diff --git a/js/components/piece_list.js b/js/components/piece_list.js index e4b8af64..4fe55f2d 100644 --- a/js/components/piece_list.js +++ b/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,13 +37,15 @@ let PieceList = React.createClass({ new TableColumnModel('title', 'Title', TableItemText, 4, true) ]; + // Could wrap this altContainer potentially once again. return ( - { return { 'itemList': props.pieceList, + 'itemListCount': props.pieceListCount, 'fetchList': props.fetchPieceList, 'orderBy': props.orderBy, 'orderAsc': props.orderAsc, diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index 4b0a32e0..97e3f4a4 100644 --- a/js/stores/piece_list_store.js +++ b/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; } };