WIP

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 (
-      <li key={act.id}><Link to={`/account/txs/${act.id}`}><b>{act.title}</b> </Link>
-      {act.currency}
-      -- owner {act.owner}
-      -- ro #{act.ro_users.length}
-      -- rw #{act.rw_users.length}</li>
+      <li key={act.id}><a onClick={this.handleAccountView.bind(this, act)}>
+      <b>{act.title}</b> {act.currency}
+      -- owner {act.owner}</a></li>
     )
   }
 
+  handleAccountView(act) {
+    this.setState({account: act});
+  }
+
+  renderAccountView() {
+    var act = this.state.account;
+    return (
+      <div>
+        <h1>{act.title}</h1>
+        <ul>
+          <li><b>Currency</b>: {act.currency}</li>
+          <li><b>Owner</b>: {act.owner}</li>
+          <li><b>RO users</b>: #{act.ro_users.length}</li>
+          <li><b>RW users</b>: #{act.rw_users.length}</li>
+        </ul>
+        <Link to={`/account/txs/${act.id}`} className="button hollow">
+          Transactions</Link>
+      </div>
+    );
+  }
+
+
   render() {
+    var accountView = '';
+    if (this.state.account) {
+      accountView = this.renderAccountView();
+    }
+
     if (this.props.params.accountId) {
       return (
         <div className="grid-block">
-          <Tx {...this.props} accounts={this.state.accounts} />
+          <div className="large-12 medium-12 small-12">
+            <Tx {...this.props} account={this.state.account}
+              accounts={this.state.accounts} />
+          </div>
         </div>
       )
     } else {
       return (
-        <div className="grid-block">
-          <ul>
-            {this.state.accounts.map(this.renderAccounts)}
-          </ul>
+        <div>
+          <div className="grid-block">
+            <div className="large-4 medium-4 small-12">
+              <ul>
+                {this.state.accounts.map(this.renderAccounts)}
+              </ul>
+            </div>
+            <div className="large-6 medium-6 small-12">
+              {accountView}
+            </div>
+            <div className="large-2 medium-2 small-12">
+              <a className="success button">+ Account</a>
+            </div>
+          </div>
         </div>
       )
     }

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 = (
+        <li>No transaction yet</li>
+      );
+    if (this.state.txs.length) {
+      txsList = this.state.txs.map(this.renderTx);
+    }
     return (
       <div className="grid-block">
         <div className="large-2 medium-2 small-12">
-          <h1>{this.state.account.title}</h1>
+          <h1>{this.props.account.title}</h1>
         </div>
         <div className="large-5 medium-5 small-12">
           <hr/>
-          <ul className="unstyled-list">{this.state.txs.map(this.renderTx)}</ul>
+          <ul className="unstyled-list">{txsList}</ul>
         </div>
         <div className="large-5 medium-5 small-12">
           <hr/>

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} />
           </div>
           <div className="small-12 medium-6 grid-content">
-          <select ref="account">
-            {this.props.accounts.map((account) => {
-              var opts = { value: account.id };
-              return (
-                <option {...opts} key={account.id}>
-                  {account.title} ({account.currency})</option>
-              )
-            })}
-          </select>
+            <div className="small switch">
+            <input type="checkbox" id="switch-example" name="income"
+              checked onChange={this.handleChange}/>
+            <label></label>
+            </div>
           </div>
         </div>
         <div className="grid-block">
@@ -150,9 +152,11 @@ class TxForm extends React.Component {
         <div className="grid-block">
           <div className="small-12 medium-12 grid-content">
             <input type="hidden" ref="id" value={this.state.tx.id} />
-            <button type="submit" className="success button">+ {( (this.state.tx.id) ? "Edit" : "Add" )} Tx</button>
-            <button onClick={this.resetForm} className="default button">Reset</button>
-            <button onClick={this.deleteItem} className={delDisabledClassName} disabled={!hasItem}>- Remove Tx</button>
+            <button type="submit" className="success button">
+              + {( (this.state.tx.id) ? "Edit" : "Add" )} Tx</button>
+            <a onClick={this.resetForm} className="default button">Reset</a>
+            <a onClick={this.deleteItem} className={delDisabledClassName}
+              disabled={!hasItem}>- Remove Tx</a>
           </div>
         </div>
       </form>