diff --git a/js/components/pagination.js b/js/components/pagination.js index 35a3d726..9ace55af 100644 --- a/js/components/pagination.js +++ b/js/components/pagination.js @@ -1,14 +1,10 @@ import React from 'react'; -import Router from 'react-router'; - -let Link = Router.Link; +import PaginationButton from './pagination_button'; let Pagination = React.createClass({ - - goToPage(page) { - return () => this.props.fetchList(page, this.props.pageSize, this.props.search, - this.props.orderBy, this.props.orderAsc); + propTypes: { + goToPage: React.PropTypes.func.isRequired }, render() { @@ -18,22 +14,14 @@ let Pagination = React.createClass({ return( ); diff --git a/js/components/pagination_button.js b/js/components/pagination_button.js new file mode 100644 index 00000000..a7488d0a --- /dev/null +++ b/js/components/pagination_button.js @@ -0,0 +1,44 @@ +import React from 'react'; +import Router from 'react-router'; + +let Link = Router.Link; + +let PaginationButton = React.createClass({ + propTypes: { + direction: React.PropTypes.oneOf(['previous', 'next']), + goToPage: React.PropTypes.func.isRequired + }, + + render() { + let page = parseInt(this.props.page, 10); + let directionDisplay; + + if(this.props.direction === 'previous') { + page -= 1; + directionDisplay = ( + + Previous + + ); + } else { + page += 1; + directionDisplay = ( + + Next + + ); + } + + return ( +
  • + + {directionDisplay} + +
  • + ); + } +}); + +export default PaginationButton; \ No newline at end of file diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 22f0ee3e..e4b8af64 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -26,6 +26,11 @@ let PieceList = React.createClass({ this.state.orderBy, this.state.orderAsc); }, + paginationGoToPage(page) { + return () => PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, + this.state.orderBy, this.state.orderAsc); + }, + render() { let columnList = [ new TableColumnModel('thumbnail', '', TableItemImg, 2, false), @@ -49,7 +54,7 @@ let PieceList = React.createClass({ } }}> - + ); }