From c61e561b4b400058af7d341e9e944f37a25e6394 Mon Sep 17 00:00:00 2001 From: Aaron Lindsay Date: Mon, 22 May 2017 20:36:36 -0400 Subject: [PATCH] Reduxify fetching transaction page --- js/actions/TransactionPageActions.js | 84 ++++++++++++++++++++++++ js/components/AccountRegister.js | 78 ++++------------------ js/components/AccountsTab.js | 6 +- js/constants/TransactionPageConstants.js | 6 ++ js/containers/AccountsTabContainer.js | 8 ++- js/reducers/MoneyGoReducer.js | 2 + js/reducers/TransactionPageReducer.js | 40 +++++++++++ 7 files changed, 156 insertions(+), 68 deletions(-) create mode 100644 js/actions/TransactionPageActions.js create mode 100644 js/constants/TransactionPageConstants.js create mode 100644 js/reducers/TransactionPageReducer.js diff --git a/js/actions/TransactionPageActions.js b/js/actions/TransactionPageActions.js new file mode 100644 index 0000000..f2d29da --- /dev/null +++ b/js/actions/TransactionPageActions.js @@ -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 +}; diff --git a/js/components/AccountRegister.js b/js/components/AccountRegister.js index 88c2953..8fcd583 100644 --- a/js/components/AccountRegister.js +++ b/js/components/AccountRegister.js @@ -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(( diff --git a/js/components/AccountsTab.js b/js/components/AccountsTab.js index de2866d..324cfcd 100644 --- a/js/components/AccountsTab.js +++ b/js/components/AccountsTab.js @@ -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({ + securities={this.props.securities} + transactionPage={this.props.transactionPage} + onFetchTransactionPage={this.props.onFetchTransactionPage}/> ); diff --git a/js/constants/TransactionPageConstants.js b/js/constants/TransactionPageConstants.js new file mode 100644 index 0000000..1feda45 --- /dev/null +++ b/js/constants/TransactionPageConstants.js @@ -0,0 +1,6 @@ +var keyMirror = require('keymirror'); + +module.exports = keyMirror({ + FETCH_TRANSACTION_PAGE: null, + TRANSACTION_PAGE_FETCHED: null +}); diff --git a/js/containers/AccountsTabContainer.js b/js/containers/AccountsTabContainer.js index 255c718..78e877d 100644 --- a/js/containers/AccountsTabContainer.js +++ b/js/containers/AccountsTabContainer.js @@ -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))}, } } diff --git a/js/reducers/MoneyGoReducer.js b/js/reducers/MoneyGoReducer.js index 8546436..7664a66 100644 --- a/js/reducers/MoneyGoReducer.js +++ b/js/reducers/MoneyGoReducer.js @@ -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 }); diff --git a/js/reducers/TransactionPageReducer.js b/js/reducers/TransactionPageReducer.js new file mode 100644 index 0000000..5e8696a --- /dev/null +++ b/js/reducers/TransactionPageReducer.js @@ -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; + } +};