From cd4140788418529f1c583dffbc7ff7f06a007186 Mon Sep 17 00:00:00 2001 From: sipp11 Date: Mon, 14 Dec 2015 04:40:04 +0700 Subject: [PATCH] Add Tx view --- src/actions/TxActions.js | 13 ++++++ src/app.jsx | 2 + src/components/Account.js | 20 ++++---- src/components/AuthenticatedApp.js | 7 +-- src/components/Home.js | 6 ++- src/components/Tx.js | 74 ++++++++++++++++++++++++++++++ src/constants/TxConstants.js | 7 +++ src/services/AccountService.js | 5 +- src/services/TxService.js | 25 ++++++++++ src/stores/AccountStore.js | 3 +- src/stores/TxStore.js | 44 ++++++++++++++++++ 11 files changed, 185 insertions(+), 21 deletions(-) create mode 100644 src/actions/TxActions.js create mode 100644 src/components/Tx.js create mode 100644 src/constants/TxConstants.js create mode 100644 src/services/TxService.js create mode 100644 src/stores/TxStore.js diff --git a/src/actions/TxActions.js b/src/actions/TxActions.js new file mode 100644 index 0000000..ca5d5ab --- /dev/null +++ b/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 + }) + } + +} diff --git a/src/app.jsx b/src/app.jsx index 713e387..ec58419 100644 --- a/src/app.jsx +++ b/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 = ( + ); diff --git a/src/components/Account.js b/src/components/Account.js index 2d94889..a9232d0 100644 --- a/src/components/Account.js +++ b/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 ( -
  • {act.title} {act.currency} +
  • {act.title} + {act.currency} -- owner {act.owner} -- ro #{act.ro_users.length} -- rw #{act.rw_users.length}
    • @@ -60,9 +61,8 @@ class Account extends React.Component { } render() { - console.log(this.state.accounts); return ( -
    +
      {this.state.accounts.map(this.renderAccounts)}
    diff --git a/src/components/AuthenticatedApp.js b/src/components/AuthenticatedApp.js index 00bc4b6..8f36905 100644 --- a/src/components/AuthenticatedApp.js +++ b/src/components/AuthenticatedApp.js @@ -67,10 +67,11 @@ export default class AuthenticatedApp extends React.Component { } else { return (
    - - Menu +
    getExpensy
    + {/*Menu*/} + Account Settings - Logout + {/*Logout*/}
    ) } diff --git a/src/components/Home.js b/src/components/Home.js index 4e019ab..3f0bb42 100644 --- a/src/components/Home.js +++ b/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 (
    @@ -9,4 +9,6 @@ export default AuthenticatedComponent(class Home extends React.Component {
    ); } -}); +} + +export default AuthenticatedComponent(Home); diff --git a/src/components/Tx.js b/src/components/Tx.js new file mode 100644 index 0000000..c9ba6eb --- /dev/null +++ b/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 ( +
  • {tx.date} {tx.amount} {tx.currency}
    • + ) + } + + render() { + return ( +
    +

    {this.state.account.title}

    +
      + {this.state.txs.map(this.renderTx)} +
    +
    + ) + } +} + +export default AuthenticatedComponent(Tx); diff --git a/src/constants/TxConstants.js b/src/constants/TxConstants.js new file mode 100644 index 0000000..8a27e3e --- /dev/null +++ b/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', +} diff --git a/src/services/AccountService.js b/src/services/AccountService.js index 97c3e17..28951aa 100644 --- a/src/services/AccountService.js +++ b/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); }); } diff --git a/src/services/TxService.js b/src/services/TxService.js new file mode 100644 index 0000000..d02da81 --- /dev/null +++ b/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() diff --git a/src/stores/AccountStore.js b/src/stores/AccountStore.js index 23f558d..7e34731 100644 --- a/src/stores/AccountStore.js +++ b/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; diff --git a/src/stores/TxStore.js b/src/stores/TxStore.js new file mode 100644 index 0000000..d757095 --- /dev/null +++ b/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();