From 0a2895e0d6da5c186ffecff2aaa4f85d2e54cbb5 Mon Sep 17 00:00:00 2001 From: vrde Date: Thu, 21 May 2015 17:54:27 +0200 Subject: [PATCH] Pagination works, it still needs some love --- js/actions/pagination_actions.js | 23 +++++++++++++++++ js/actions/piece_list_actions.js | 10 +++++--- js/app.js | 9 ++++--- js/components/pagination.js | 43 ++++++++++++++++++++++++++++++++ js/components/piece_list.js | 8 ++++-- js/routes.js | 2 +- js/stores/piece_list_store.js | 6 ++++- js/utils/general_utils.js | 4 +-- 8 files changed, 92 insertions(+), 13 deletions(-) create mode 100644 js/actions/pagination_actions.js create mode 100644 js/components/pagination.js diff --git a/js/actions/pagination_actions.js b/js/actions/pagination_actions.js new file mode 100644 index 00000000..e58fda17 --- /dev/null +++ b/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); diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js index 71d76b79..e75fcf1f 100644 --- a/js/actions/piece_list_actions.js +++ b/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); diff --git a/js/app.js b/js/app.js index 13bad5f5..b757b0ee 100644 --- a/js/app.js +++ b/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( - , - document.getElementById('main') - ); + React.render( + , + document.getElementById('main') + ); }); diff --git a/js/components/pagination.js b/js/components/pagination.js new file mode 100644 index 00000000..35a3d726 --- /dev/null +++ b/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( + + ); + } +}); + +export default Pagination; diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 1638f55d..2b3de95d 100644 --- a/js/components/piece_list.js +++ b/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 ( + ); } diff --git a/js/routes.js b/js/routes.js index 4817b069..b9dd01c8 100644 --- a/js/routes.js +++ b/js/routes.js @@ -10,7 +10,7 @@ let Route = Router.Route; let routes = ( - + diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index 745a8fc0..44ba7a5a 100644 --- a/js/stores/piece_list_store.js +++ b/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; diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js index 27a40446..fe92611b 100644 --- a/js/utils/general_utils.js +++ b/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]; } }); @@ -37,4 +37,4 @@ let GeneralUtils = { } }; -export default GeneralUtils; \ No newline at end of file +export default GeneralUtils;