Add Tx view

src/actions/TxActions.js

@@ -0,0 +1,13 @@
+import AppDispatcher from '../dispatchers/AppDispatcher.js';
+import {TX_GET} from '../constants/TxConstants.js';
+
+export default {
+
+  gotTxs: (txs) => {
+    AppDispatcher.dispatch({
+      actionType: TX_GET,
+      txs: txs
+    })
+  }
+
+}

src/app.jsx

@@ -6,6 +6,7 @@ import Signup from './components/Signup';
 import Home from './components/Home';
 import Quote from './components/Quote';
 import Account from './components/Account';
+import Tx from './components/Tx';
 import RouterContainer from './services/RouterContainer';
 import LoginActions from './actions/LoginActions';
 
@@ -16,6 +17,7 @@ var routes = (
     <Route name="home" path="/" handler={Home}/>
     <Route name="quote" handler={Quote}/>
     <Route name="account" handler={Account}/>
+    <Route path="account/txs/:accountId" handler={Tx}/>
   </Route>
 );
 

src/components/Account.js

@@ -1,15 +1,17 @@
 import React from 'react';
+import {Link} from 'react-router';
 import AuthenticatedComponent from './AuthenticatedComponent';
 import AccountStore from '../stores/AccountStore.js';
 import AccountService from '../services/AccountService.js';
 
+/*
+List of all account related to user
+ */
+
 class Account extends React.Component {
   constructor(props) {
     super(props);
-    console.log('init accounts');
     this.state = this.getAccountState();
-    console.log('init2 accounts');
-    console.log(this.state);
     this._onChange = this._onChange.bind(this);
   }
 
@@ -18,7 +20,6 @@ class Account extends React.Component {
   }
 
   componentDidMount() {
-    console.log('componentDidMount accounts');
     if (this.state.accounts.length < 1) {
       this.fetchAllAccounts();
     }
@@ -31,14 +32,13 @@ class Account extends React.Component {
   }
 
   fetchAllAccounts() {
-    console.log('fetchAllAccounts accounts');
     AccountService.getAllAccounts();
   }
 
   getAccountState() {
     return {
       accounts: this.getAllAccountsState(),
-      account: this.getOneAccountState()
+      account: this.getOneAccountsState()
     }
   }
 
@@ -46,13 +46,14 @@ class Account extends React.Component {
     return AccountStore.accounts
   }
 
-  getOneAccountState() {
+  getOneAccountsState() {
     return AccountStore.account
   }
 
   renderAccounts(act) {
     return (
-      <li><b>{act.title}</b> {act.currency}
+      <li><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>
@@ -60,9 +61,8 @@ class Account extends React.Component {
   }
 
   render() {
-    console.log(this.state.accounts);
     return (
-      <div>
+      <div className="grid-block">
         <ul>
           {this.state.accounts.map(this.renderAccounts)}
         </ul>

src/components/AuthenticatedApp.js

@@ -67,10 +67,11 @@ export default class AuthenticatedApp extends React.Component {
     } else {
       return (
         <div className="title-bar">
-          <div className="center title"><a>getExpensy</a></div>
+          <div className="center title"><Link to={`/`}>getExpensy</Link></div>
-          <span className="left hide-for-medium"><a zf-toggle="sub-nav">Menu</a></span>
+          {/*<span className="left hide-for-medium"><a zf-toggle="sub-nav">Menu</a></span>*/}
+          <span className="left"><Link to={`/account`}>Account</Link></span>
           <span className="right"><a ui-sref="settings">Settings</a></span>
-          <span className="right"><a onClick={this.logout}>Logout</a></span>
+          {/*<span className="right"><a onClick={this.logout}>Logout</a></span>*/}
         </div>
       )
     }

src/components/Home.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import AuthenticatedComponent from './AuthenticatedComponent'
 
-export default AuthenticatedComponent(class Home extends React.Component {
+class Home extends React.Component {
   render() {
     return (
       <div className="grid-block">
@@ -9,4 +9,6 @@ export default AuthenticatedComponent(class Home extends React.Component {
       </div>
     );
   }
-});
+}
+
+export default AuthenticatedComponent(Home);

src/components/Tx.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import AuthenticatedComponent from './AuthenticatedComponent';
+import AccountStore from '../stores/AccountStore';
+import AccountService from '../services/AccountService';
+import TxStore from '../stores/TxStore';
+import TxService from '../services/TxService';
+
+/*
+List of all Tx related to user 
+ */
+
+class Tx extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = this.getTxState();
+    this._onChange = this._onChange.bind(this);
+  }
+
+  _onChange() {
+    this.setState(this.getTxState());
+  }
+
+  componentDidMount() {
+    if (!this.state.account) {
+      this.fetchAccount(this.props.params.accountId);
+      this.fetchTxs(this.props.params.accountId);
+    } else if ( this.state.account.id !== +this.props.params.accountId ) {
+      this.fetchAccount(this.props.params.accountId);
+      this.fetchTxs(this.props.params.accountId);
+    }
+    TxStore.addChangeListener(this._onChange);
+    AccountStore.addChangeListener(this._onChange);
+  }
+
+  componentWillUnmount() {
+    AccountStore.removeChangeListener(this._onChange);
+    TxStore.removeChangeListener(this._onChange);
+  }
+
+  fetchAccount(accountId) {
+    AccountService.getAccount(accountId);
+  }
+
+  fetchTxs(accountId) {
+    TxService.getTxs(accountId);
+  }
+
+  getTxState() {
+    return {
+      account: AccountStore.account,
+      txs: TxStore.txs
+    }
+  }
+
+  renderTx(tx) {
+    return (
+      <li>{tx.date} <b>{tx.amount} {tx.currency}</b></li>
+    )
+  }
+
+  render() {
+    return (
+      <div className="grid-block">
+        <h1>{this.state.account.title}</h1>
+        <ul>
+          {this.state.txs.map(this.renderTx)}
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default AuthenticatedComponent(Tx);

src/constants/TxConstants.js

@@ -0,0 +1,7 @@
+var BASE_URL = 'http://rocket.dev/';
+export default {
+  BASE_URL: BASE_URL,
+  TX_URL_SUFFIX: '/txs',
+  ACCOUNT_GET: 'ACCOUNT_GET',
+  TX_GET: 'TX_GET',
+}

src/services/AccountService.js

@@ -7,7 +7,6 @@ import LoginStore from '../stores/LoginStore.js';
 class AccountService {
 
   getAllAccounts() {
-    console.log('get all account');
     request({
       url: ACCOUNT_URL,
       method: 'GET',
@@ -16,21 +15,19 @@ class AccountService {
       }
     })
     .then(function(response) {
-    console.log('got all account');
       AccountActions.getAllAccounts(response.results);
     });
   }
 
   getAccount(accountId) {
     request({
-      url: ACCOUNT_URL + accountId,
+      url: ACCOUNT_URL + accountId + '/',
       method: 'GET',
       headers: {
         'Authorization': 'Bearer ' + LoginStore.jwt
       }
     })
     .then(function(response) {
-      console.log(response);
       AccountActions.gotAccount(response);
     });
   }

src/services/TxService.js

@@ -0,0 +1,25 @@
+import request from 'reqwest';
+import when from 'when';
+import {ACCOUNT_URL} from '../constants/AccountConstants';
+import {TX_URL_SUFFIX} from '../constants/TxConstants';
+import TxActions from '../actions/TxActions';
+import LoginStore from '../stores/LoginStore';
+
+class AccountService {
+
+  getTxs(accountId) {
+    request({
+      url: ACCOUNT_URL + accountId + TX_URL_SUFFIX + '/',
+      method: 'GET',
+      headers: {
+        'Authorization': 'Bearer ' + LoginStore.jwt
+      }
+    })
+    .then(function(response) {
+      TxActions.gotTxs(response.results);
+    });
+  }
+
+}
+
+export default new AccountService()

src/stores/AccountStore.js

@@ -8,13 +8,12 @@ class AccountStore extends BaseStore {
     super();
     this.subscribe(() => this._registerToActions.bind(this))
     this._accounts = [];
-    this._account = {};
+    this._account = '';
   }
 
   _registerToActions(action) {
     switch(action.actionType) {
       case ALL_ACCOUNTS_GET:
-        console.log('here');
         this._accounts = action.accounts;
         this.emitChange();
         break;

src/stores/TxStore.js

@@ -0,0 +1,44 @@
+import {ACCOUNT_GET} from '../constants/AccountConstants';
+import {TX_GET} from '../constants/TxConstants';
+import {LOGOUT_USER} from '../constants/LoginConstants';
+import BaseStore from './BaseStore';
+
+class TxStore extends BaseStore {
+
+  constructor() {
+    super();
+    this.subscribe(() => this._registerToActions.bind(this))
+    this._account = null;
+    this._txs = [];
+  }
+
+  _registerToActions(action) {
+    switch(action.actionType) {
+      case ACCOUNT_GET:
+        this._account = action.account;
+        this.emitChange();
+        break;
+      case TX_GET:
+        this._txs = action.txs;
+        this.emitChange();
+        break;
+      case LOGOUT_USER:
+        this._account = null;
+        this._txs = [];
+        this.emitChange();
+        break;
+      default:
+        break;
+    };
+  }
+
+  get txs() {
+    return this._txs;
+  }
+
+  get account() {
+    return this._account;
+  }
+}
+
+export default new TxStore();