diff --git a/src/components/Account.js b/src/components/Account.js
index fbf2c10..abe28f0 100644
--- a/src/components/Account.js
+++ b/src/components/Account.js
@@ -1,5 +1,6 @@
import React from 'react';
import {Link} from 'react-router';
+import autobind from 'autobind-decorator';
import AuthenticatedComponent from './AuthenticatedComponent';
import AccountStore from '../stores/AccountStore.js';
import AccountService from '../services/AccountService.js';
@@ -9,6 +10,7 @@ import Tx from './Tx';
List of all account related to user
*/
+@autobind
class Account extends React.Component {
constructor(props) {
super(props);
@@ -51,29 +53,67 @@ class Account extends React.Component {
return AccountStore.account
}
- renderAccounts(act) {
+ renderAccounts(act, index) {
return (
-
-
- {this.state.accounts.map(this.renderAccounts)}
-
+
+
+
+
+ {this.state.accounts.map(this.renderAccounts)}
+
+
+
+ {accountView}
+
+
+
)
}
diff --git a/src/components/Tx.js b/src/components/Tx.js
index d3f35ff..63914a7 100644
--- a/src/components/Tx.js
+++ b/src/components/Tx.js
@@ -25,18 +25,22 @@ class Tx extends React.Component {
this.setState(this.getTxState());
}
+ _accountChange() {
+ this._account = AccountStore.account;
+ AccountStore.removeChangeListener(this._accountChange);
+ }
+
componentDidMount() {
- if ( ( !this.state.account ) ||
- ( this.state.account.id !== +this.props.params.accountId ) ) {
- this.fetchAccount(this.props.params.accountId);
- this.fetchTxs(this.props.params.accountId);
+ this._account = this.props.account;
+ if (!this._account) {
+ this._account = this.fetchAccount(this.props.params.accountId);
+ AccountStore.addChangeListener(this._accountChange);
}
+ this.fetchTxs(this.props.params.accountId);
TxStore.addChangeListener(this._onChange);
- AccountStore.addChangeListener(this._onChange);
}
componentWillUnmount() {
- AccountStore.removeChangeListener(this._onChange);
TxStore.removeChangeListener(this._onChange);
}
@@ -50,7 +54,6 @@ class Tx extends React.Component {
getTxState() {
return {
- account: AccountStore.account,
txs: TxStore.txs,
tx: {}
}
@@ -82,6 +85,7 @@ class Tx extends React.Component {
updateTx(tx) {
tx.user = this.props.user.user_id;
+ tx.account = this._account.id;
if (!tx.id)
return this.newTx(tx)
@@ -104,14 +108,20 @@ class Tx extends React.Component {
}
render() {
+ var txsList = (
+
No transaction yet
+ );
+ if (this.state.txs.length) {
+ txsList = this.state.txs.map(this.renderTx);
+ }
return (
-
{this.state.account.title}
+ {this.props.account.title}
-
{this.state.txs.map(this.renderTx)}
+
diff --git a/src/components/TxForm.js b/src/components/TxForm.js
index c31d318..6edd86f 100644
--- a/src/components/TxForm.js
+++ b/src/components/TxForm.js
@@ -8,7 +8,7 @@ import Catalyst from 'react-catalyst';
import autobind from 'autobind-decorator';
import cx from 'classnames';
import parser from '../libs/parser';
-import Moment from 'moment';
+import moment from 'moment';
@autobind
@@ -23,7 +23,7 @@ class TxForm extends React.Component {
amount : this.parseEquation(this.refs.amount.value),
currency : this.refs.currency.value,
date : this.refs.date.value,
- account : this.refs.account.value,
+ // account : this.refs.account.value,
note : this.refs.note.value
}
// 3. Add the tx to the App State
@@ -57,14 +57,10 @@ class TxForm extends React.Component {
defaultTxState() {
return {
id: '', amount: '', currency: '',
- date: '2015-12-16', note: ''
+ date: moment().format('YYYY-MM-DD'), note: ''
}
}
- resetForm() {
- this.setState({tx: this.defaultTxState()});
- }
-
deleteItem() {
var tx = {
id : +this.refs.id.value
@@ -73,16 +69,26 @@ class TxForm extends React.Component {
this.refs.txForm.reset();
}
+ resetForm() {
+ this.refs.txForm.reset();
+ this.setState({tx: this.defaultTxState(), clearForm: true})
+ }
+
render() {
this.state = this.state || {};
if (this.state.updated) {
this.state.tx = this.state.updated;
delete this.state["updated"];
- } else {
+ } else if (!this.state.clearForm) {
this.state.tx = JSON.parse(JSON.stringify(this.props.tx));
}
- if (Object.keys(this.state.tx).length == 0)
+ if (Object.keys(this.state.tx).length == 0) {
this.state.tx = this.defaultTxState();
+ }
+
+ if (this.state.clearForm) {
+ delete this.state["clearForm"];
+ }
var hasItem = ( (this.state.tx.id) ? true : false );
var delDisabledClassName = cx({
@@ -130,15 +136,11 @@ class TxForm extends React.Component {
name="date" value={this.state.tx.date} onChange={this.handleChange} />
-
+
+
+
+
@@ -150,9 +152,11 @@ class TxForm extends React.Component {
-
-
-
+
+
Reset
+
- Remove Tx