1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

Pagination works, it still needs some love

This commit is contained in:
vrde 2015-05-21 17:54:27 +02:00
parent 0576c308e6
commit 0a2895e0d6
8 changed files with 92 additions and 13 deletions

View File

@ -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);

View File

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

View File

@ -5,6 +5,7 @@ import Router from 'react-router';
import AscribeApp from './components/ascribe_app'; import AscribeApp from './components/ascribe_app';
import routes from './routes'; import routes from './routes';
import alt from './alt';
Router.run(routes, Router.HashLocation, (AscribeApp) => { Router.run(routes, Router.HashLocation, (AscribeApp) => {

View File

@ -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;

View File

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

View File

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

View File

@ -13,7 +13,11 @@ class PieceListStore {
this.bindActions(PieceListActions); 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.orderAsc = orderAsc;
this.orderBy = orderBy; this.orderBy = orderBy;
this.itemList = itemList; this.itemList = itemList;

View File

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