Pagination works, it still needs some love

js/actions/pagination_actions.js

@@ -0,0 +1,23 @@
+import alt from '../alt';
+import PieceListFetcher from '../fetchers/piece_list_fetcher';
+
+
+class UserActions {
+    constructor() {
+        this.generateActions(
+            'updateCurrentUser'
+        );
+    }
+
+    fetchCurrentUser() {
+        UserFetcher.fetchOne()
+            .then((res) => {
+                this.actions.updateCurrentUser(res['users'][0]);
+            })
+            .catch((err) => {
+                console.log(err);           
+            });
+    }
+};
+
+export default alt.createActions(UserActions);

js/actions/piece_list_actions.js

@@ -13,15 +13,19 @@ class PieceListActions {
         PieceListFetcher.fetch(page, pageSize, search, orderBy, orderAsc)
             .then((res) => {
                 this.actions.updatePieceList({
-                    'itemList': res.pieces, 
-                    'orderBy': orderBy,
-                    'orderAsc': orderAsc
+                    page,
+                    pageSize,
+                    search,
+                    orderBy,
+                    orderAsc,
+                    'itemList': res.pieces
                 });
             })
             .catch((err) => {
                 console.log(err);           
             });
     }
+
 };
 
 export default alt.createActions(PieceListActions);

js/app.js

@@ -5,11 +5,12 @@ import Router from 'react-router';
 
 import AscribeApp from './components/ascribe_app';
 import routes from './routes';
+import alt from './alt';
 
 
 Router.run(routes, Router.HashLocation, (AscribeApp) => {
-  React.render(
-  	<AscribeApp />,
-  	document.getElementById('main')
-  );
+    React.render(
+        <AscribeApp />,
+        document.getElementById('main')
+    );
 });

js/components/pagination.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Router from 'react-router';
+
+let Link = Router.Link;
+
+
+let Pagination = React.createClass({
+
+    goToPage(page) {
+        return () => this.props.fetchList(page, this.props.pageSize, this.props.search,
+                                          this.props.orderBy, this.props.orderAsc);
+    },
+
+    render() {
+        let prev = parseInt(this.props.page, 10) - 1;
+        let next = parseInt(this.props.page, 10) + 1;
+
+        return(
+            <nav>
+                <ul className="pager">
+                    <li className="previous">
+                        <Link to="pieces"
+                              query={{page: prev}}
+                              onClick={this.goToPage(prev)}>
+                            <span aria-hidden="true">&larr;</span>
+                            Previous
+                        </Link>
+                    </li>
+                    <li className="next">
+                        <Link to="pieces"
+                              query={{page: next}}
+                              onClick={this.goToPage(next)}>
+                            Next
+                            <span aria-hidden="true">&rarr;</span>
+                        </Link>
+                    </li>
+                </ul>
+            </nav>
+        );
+    }
+});
+
+export default Pagination;

js/components/piece_list.js

@@ -8,22 +8,25 @@ import PieceListActions from '../actions/piece_list_actions';
 import Table from './table';
 import TableItemImg from './table_item_img';
 import TableItemText from './table_item_text';
+import Pagination from './pagination'
 
 let Link = Router.Link;
 
 
 let PieceList = React.createClass({
     
+    // FIXME: this might be useless
     getInitialState() {
         return PieceListStore.getState();
     },
 
     componentDidMount() {
-        PieceListActions.fetchList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
+        let page = this.props.query.page || this.state.page;
+        PieceListActions.fetchList(page, this.state.pageSize, this.state.search,
+                                   this.state.orderBy, this.state.orderAsc);
     },
 
     render() {
-
         // TODO:
         // Specifiy how a TableItemX should look like
         let columnMap = {
@@ -50,6 +53,7 @@ let PieceList = React.createClass({
         return (
             <AltContainer store={PieceListStore} actions={PieceListActions}>
                 <Table columnMap={columnMap} />
+                <Pagination currentPage={this.props.query.page} />
             </AltContainer>
         );
     }

js/routes.js

@@ -10,7 +10,7 @@ let Route = Router.Route;
 
 let routes = (
     <Route name="app" path="/" handler={AscribeApp}>
-        <Route name="pieces" handler={PieceList}>
+        <Route name="pieces" path="/pieces" handler={PieceList}>
             <Route name="piece" path="/pieces/:bitcoin_ID_noPrefix" handler={Piece} />
         </Route>
     </Route>

js/stores/piece_list_store.js

@@ -13,7 +13,11 @@ class PieceListStore {
         this.bindActions(PieceListActions);
     }
 
-    onUpdatePieceList({ itemList, orderBy, orderAsc }) {
+    onUpdatePieceList({ page, pageSize, search, itemList, orderBy, orderAsc }) {
+        console.log('onUpdatePieceList', arguments);
+        this.page = page;
+        this.pageSize = pageSize;
+        this.search = search;
         this.orderAsc = orderAsc;
         this.orderBy = orderBy;
         this.itemList = itemList;

js/utils/general_utils.js

@@ -10,7 +10,7 @@ let GeneralUtils = {
             .map((key) => {
                 // By matching null with a double equal, we can match undefined and null
                 // http://stackoverflow.com/a/15992131
-                if(obj[key] == null) {
+                if(obj[key] == null || obj[key] === '') {
                     delete obj[key];
                 }
             });