Reduxify fetching transaction page

This commit is contained in:
Aaron Lindsay 2017-05-22 20:36:36 -04:00
parent a9cf95dba8
commit c61e561b4b
7 changed files with 156 additions and 68 deletions

View File

@ -0,0 +1,84 @@
var TransactionPageConstants = require('../constants/TransactionPageConstants');
var ErrorActions = require('./ErrorActions');
var models = require('../models.js');
var Account = models.Account;
var Transaction = models.Transaction;
var Error = models.Error;
var Big = require('big.js');
function fetchTransactionPage(account, pageSize, page) {
return {
type: TransactionPageConstants.FETCH_TRANSACTION_PAGE,
account: account,
pageSize: pageSize,
page: page
}
}
function transactionPageFetched(account, pageSize, page, numPages,
transactions, endingBalance) {
return {
type: TransactionPageConstants.TRANSACTION_PAGE_FETCHED,
account: account,
pageSize: pageSize,
page: page,
numPages: numPages,
transactions: transactions,
endingBalance: endingBalance
}
}
function fetch(account, pageSize, page) {
return function (dispatch) {
dispatch(fetchTransactionPage(account, pageSize, page));
$.ajax({
type: "GET",
dataType: "json",
url: "account/"+account.AccountId+"/transactions?sort=date-desc&limit="+pageSize+"&page="+page,
success: function(data, status, jqXHR) {
var e = new Error();
e.fromJSON(data);
if (e.isError()) {
dispatch(ErrorActions.serverError(e));
return;
}
var transactions = [];
var balance = new Big(data.EndingBalance);
for (var i = 0; i < data.Transactions.length; i++) {
var t = new Transaction();
t.fromJSON(data.Transactions[i]);
t.Balance = balance.plus(0); // Make a copy of the current balance
// Keep a talley of the running balance of these transactions
for (var j = 0; j < data.Transactions[i].Splits.length; j++) {
var split = data.Transactions[i].Splits[j];
if (account.AccountId == split.AccountId) {
balance = balance.minus(split.Amount);
}
}
transactions.push(t);
}
var a = new Account();
a.fromJSON(data.Account);
var numPages = Math.ceil(data.TotalTransactions / pageSize);
dispatch(transactionPageFetched(account, pageSize, page,
numPages, transactions, new Big(data.EndingBalance)));
},
error: function(jqXHR, status, error) {
dispatch(ErrorActions.ajaxError(error));
}
});
};
}
module.exports = {
fetch: fetch
};

View File

@ -652,10 +652,6 @@ module.exports = React.createClass({
importingTransactions: false,
editingTransaction: false,
selectedTransaction: new Transaction(),
transactions: [],
pageSize: 20,
numPages: 0,
currentPage: 0,
height: 0
};
},
@ -708,71 +704,27 @@ module.exports = React.createClass({
e.ErrorString = "Request Failed: " + status + error;
this.setState({error: e});
},
getTransactionPage: function(account, page) {
$.ajax({
type: "GET",
dataType: "json",
url: "account/"+account.AccountId+"/transactions?sort=date-desc&limit="+this.state.pageSize+"&page="+page,
success: function(data, status, jqXHR) {
var e = new Error();
e.fromJSON(data);
if (e.isError()) {
this.setState({error: e});
return;
}
var transactions = [];
var balance = new Big(data.EndingBalance);
for (var i = 0; i < data.Transactions.length; i++) {
var t = new Transaction();
t.fromJSON(data.Transactions[i]);
t.Balance = balance.plus(0); // Make a copy of the current balance
// Keep a talley of the running balance of these transactions
for (var j = 0; j < data.Transactions[i].Splits.length; j++) {
var split = data.Transactions[i].Splits[j];
if (this.props.accounts[this.props.selectedAccount].AccountId == split.AccountId) {
balance = balance.minus(split.Amount);
}
}
transactions.push(t);
}
var a = new Account();
a.fromJSON(data.Account);
var pages = Math.ceil(data.TotalTransactions / this.state.pageSize);
this.setState({
transactions: transactions,
numPages: pages
});
}.bind(this),
error: this.ajaxError
});
},
handleSelectPage: function(eventKey) {
var newpage = eventKey - 1;
// Don't do pages that don't make sense
if (newpage < 0)
newpage = 0;
if (newpage >= this.state.numPages)
newpage = this.state.numPages-1;
if (newpage != this.state.currentPage) {
if (newpage >= this.props.transactionPage.numPages)
newpage = this.props.transactionPage.numPages - 1;
if (newpage != this.props.transactionPage.page) {
if (this.props.selectedAccount != -1) {
this.getTransactionPage(this.props.accounts[this.props.selectedAccount], newpage);
this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, newpage);
}
this.setState({currentPage: newpage});
}
},
onNewTransaction: function() {
this.getTransactionPage(this.props.accounts[this.props.selectedAccount], this.state.currentPage);
this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, this.props.transactionPage.page);
},
onUpdatedTransaction: function() {
this.getTransactionPage(this.props.accounts[this.props.selectedAccount], this.state.currentPage);
this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, this.props.transactionPage.page);
},
onDeletedTransaction: function() {
this.getTransactionPage(this.props.accounts[this.props.selectedAccount], this.state.currentPage);
this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, this.props.transactionPage.page);
},
createNewTransaction: function(transaction) {
$.ajax({
@ -829,7 +781,7 @@ module.exports = React.createClass({
},
handleImportComplete: function() {
this.setState({importingTransactions: false});
this.getTransactionPage(this.props.accounts[this.props.selectedAccount], this.state.currentPage);
this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, this.props.transactionPage.page);
},
handleDeleteTransaction: function(transaction) {
this.setState({
@ -851,11 +803,7 @@ module.exports = React.createClass({
if (nextProps.selectedAccount != this.props.selectedAccount) {
this.setState({
selectedTransaction: new Transaction(),
transactions: [],
currentPage: 0
});
if (nextProps.selectedAccount != -1)
this.getTransactionPage(nextProps.accounts[nextProps.selectedAccount], 0);
}
},
render: function() {
@ -866,8 +814,8 @@ module.exports = React.createClass({
name = this.props.accounts[this.props.selectedAccount].Name;
var transactionRows = [];
for (var i = 0; i < this.state.transactions.length; i++) {
var t = this.state.transactions[i];
for (var i = 0; i < this.props.transactionPage.transactions.length; i++) {
var t = this.props.transactionPage.transactions[i];
transactionRows.push((
<TransactionRow
key={t.TransactionId}
@ -926,9 +874,9 @@ module.exports = React.createClass({
<Pagination
className="skinny-pagination"
prev next first last ellipsis
items={this.state.numPages}
maxButtons={Math.min(5, this.state.numPages)}
activePage={this.state.currentPage+1}
items={this.props.transactionPage.numPages}
maxButtons={Math.min(5, this.props.transactionPage.numPages)}
activePage={this.props.transactionPage.page + 1}
onSelect={this.handleSelectPage} />
</ButtonGroup>
<ButtonGroup>

View File

@ -425,6 +425,7 @@ module.exports = React.createClass({
},
handleAccountSelected: function(account) {
this.props.onSelectAccount(account.AccountId);
this.props.onFetchTransactionPage(account, 20, 0);
},
render: function() {
var disabled = (this.props.selectedAccount == -1) ? true : false;
@ -476,10 +477,13 @@ module.exports = React.createClass({
</ButtonGroup>
</Col><Col xs={10} className="fullheight transactions-column">
<AccountRegister
pageSize={20}
selectedAccount={this.props.selectedAccount}
accounts={this.props.accounts}
accountChildren={this.props.accountChildren}
securities={this.props.securities} />
securities={this.props.securities}
transactionPage={this.props.transactionPage}
onFetchTransactionPage={this.props.onFetchTransactionPage}/>
</Col>
</Row></Grid>
);

View File

@ -0,0 +1,6 @@
var keyMirror = require('keymirror');
module.exports = keyMirror({
FETCH_TRANSACTION_PAGE: null,
TRANSACTION_PAGE_FETCHED: null
});

View File

@ -1,6 +1,8 @@
var connect = require('react-redux').connect;
var AccountActions = require('../actions/AccountActions');
var TransactionPageActions = require('../actions/TransactionPageActions');
var AccountsTab = require('../components/AccountsTab');
function mapStateToProps(state) {
@ -14,7 +16,8 @@ function mapStateToProps(state) {
accountChildren: state.accounts.children,
securities: state.securities,
security_list: security_list,
selectedAccount: state.selectedAccount
selectedAccount: state.selectedAccount,
transactionPage: state.transactionPage
}
}
@ -23,7 +26,8 @@ function mapDispatchToProps(dispatch) {
onCreateAccount: function(account) {dispatch(AccountActions.create(account))},
onUpdateAccount: function(account) {dispatch(AccountActions.update(account))},
onDeleteAccount: function(accountId) {dispatch(AccountActions.remove(accountId))},
onSelectAccount: function(accountId) {dispatch(AccountActions.select(accountId))}
onSelectAccount: function(accountId) {dispatch(AccountActions.select(accountId))},
onFetchTransactionPage: function(account, pageSize, page) {dispatch(TransactionPageActions.fetch(account, pageSize, page))},
}
}

View File

@ -9,6 +9,7 @@ var SelectedAccountReducer = require('./SelectedAccountReducer');
var SelectedSecurityReducer = require('./SelectedSecurityReducer');
var ReportReducer = require('./ReportReducer');
var SelectedReportReducer = require('./SelectedReportReducer');
var TransactionPageReducer = require('./TransactionPageReducer');
var ErrorReducer = require('./ErrorReducer');
module.exports = Redux.combineReducers({
@ -21,5 +22,6 @@ module.exports = Redux.combineReducers({
selectedSecurity: SelectedSecurityReducer,
reports: ReportReducer,
selectedReport: SelectedReportReducer,
transactionPage: TransactionPageReducer,
error: ErrorReducer
});

View File

@ -0,0 +1,40 @@
var assign = require('object-assign');
var TransactionPageConstants = require('../constants/TransactionPageConstants');
var UserConstants = require('../constants/UserConstants');
var Account = require('../models').Account;
module.exports = function(state = {account: new Account(), pageSize: 1, page: 0, numPages: 0, transactions: [], endingBalance: "0" }, action) {
switch (action.type) {
case TransactionPageConstants.FETCH_TRANSACTION_PAGE:
return {
account: action.account,
pageSize: action.pageSize,
page: action.page,
numPages: 0,
transactions: [],
endingBalance: "0"
};
case TransactionPageConstants.TRANSACTION_PAGE_FETCHED:
return {
account: action.account,
pageSize: action.pageSize,
page: action.page,
numPages: action.numPages,
transactions: action.transactions,
endingBalance: action.endingBalance
};
case UserConstants.USER_LOGGEDOUT:
return {
account: new Account(),
pageSize: 1,
page: 0,
numPages: 0,
transactions: [],
endingBalance: "0"
};
default:
return state;
}
};