diff --git a/js/components/pagination.js b/js/components/ascribe_pagination/pagination.js similarity index 69% rename from js/components/pagination.js rename to js/components/ascribe_pagination/pagination.js index 90863c25..e99f8e4e 100644 --- a/js/components/pagination.js +++ b/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( diff --git a/js/components/pagination_button.js b/js/components/ascribe_pagination/pagination_button.js similarity index 68% rename from js/components/pagination_button.js rename to js/components/ascribe_pagination/pagination_button.js index e2badc99..ee9c1374 100644 --- a/js/components/pagination_button.js +++ b/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 ( -
  • + if (this.isInRange(page)) { + anchor = ( {directionDisplay} + ); + } else { + isDisabled += ' disabled'; + anchor = ( + + {directionDisplay} + + ); + } + + return ( +
  • + {anchor}
  • ); } }); -export default PaginationButton; \ No newline at end of file +export default PaginationButton; diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js index c5ef0fbb..7de508bb 100644 --- a/js/components/ascribe_table/table.js +++ b/js/components/ascribe_table/table.js @@ -24,9 +24,8 @@ let Table = React.createClass({ }); }); }, - + render() { - if(this.props.itemList && this.props.itemList.length > 0) { return (
    diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 54b56382..f1e2b558 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -16,7 +16,7 @@ import TableItemSubtableButton from './ascribe_table/table_item_subtable_button' import TableColumnContentModel from '../models/table_column_content_model'; -import Pagination from './pagination' +import Pagination from './ascribe_pagination/pagination' let PieceList = React.createClass({ @@ -30,12 +30,23 @@ let PieceList = React.createClass({ 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() { @@ -45,6 +56,9 @@ let PieceList = React.createClass({ new TableColumnContentModel('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 ( - + ); }