Make Pagination more generic

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({
-
+    propTypes: {
-    goToPage(page) {
+        goToPage: React.PropTypes.func.isRequired
-        return () => this.props.fetchList(page, this.props.pageSize, this.props.search,
-                                          this.props.orderBy, this.props.orderAsc);
     },
 
     render() {
@@ -18,22 +14,14 @@ let Pagination = React.createClass({
         return(
             <nav>
                 <ul className="pager">
-                    <li className="previous">
+                    <PaginationButton 
-                        <Link to="pieces"
+                        direction='previous'
-                              query={{page: prev}}
+                        goToPage={this.props.goToPage}>
-                              onClick={this.goToPage(prev)}>
+                    </PaginationButton>
-                            <span aria-hidden="true">&larr;</span>
+                    <PaginationButton 
-                            Previous
+                        direction='next'
-                        </Link>
+                        goToPage={this.props.goToPage}>
-                    </li>
+                    </PaginationButton>
-                    <li className="next">
-                        <Link to="pieces"
-                              query={{page: next}}
-                              onClick={this.goToPage(next)}>
-                            Next
-                            <span aria-hidden="true">&rarr;</span>
-                        </Link>
-                    </li>
                 </ul>
             </nav>
         );

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 = (
+                <span>
+                    <span aria-hidden="true">&larr;</span> Previous
+                </span>
+                );
+        } else {
+            page += 1;
+            directionDisplay = (
+                <span>
+                    Next <span aria-hidden="true">&rarr;</span>
+                </span>
+                );
+        }
+
+        return (
+            <li className={this.props.direction}>
+                <Link to="pieces"
+                      query={{page}}
+                      onClick={this.props.goToPage(page)}>
+                    {directionDisplay}
+                </Link>
+            </li>
+        );
+    }
+});
+
+export default PaginationButton;

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({
                     }
                 }}>
                 <Table columnList={columnList} />
-                <Pagination currentPage={this.props.query.page} />
+                <Pagination currentPage={this.props.query.page} goToPage={this.paginationGoToPage} />
             </AltContainer>
         );
     }