Reduxify fetching transaction page

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
+};

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)
+		if (newpage >= this.props.transactionPage.numPages)
-			newpage = this.state.numPages-1;
+			newpage = this.props.transactionPage.numPages - 1;
-		if (newpage != this.state.currentPage) {
+		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++) {
+			for (var i = 0; i < this.props.transactionPage.transactions.length; i++) {
-				var t = this.state.transactions[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}
+						items={this.props.transactionPage.numPages}
-						maxButtons={Math.min(5, this.state.numPages)}
+						maxButtons={Math.min(5, this.props.transactionPage.numPages)}
-						activePage={this.state.currentPage+1}
+						activePage={this.props.transactionPage.page + 1}
 						onSelect={this.handleSelectPage} />
 					</ButtonGroup>
 					<ButtonGroup>

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({
 					</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>
 		);

js/constants/TransactionPageConstants.js

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

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))},
 	}
 }
 

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

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;
+	}
+};