wip

package.json

@@ -35,6 +35,7 @@
   "homepage": "https://github.com/mgonto/react-browserify-spa-seed",
   "dependencies": {
     "autobind-decorator": "^1.3.2",
+    "classnames": "^2.2.1",
     "flux": "^2.0.1",
     "foundation-apps": "^1.1.0",
     "foundation-sites": "^6.0.0",

src/actions/AccountActions.js

@@ -1,5 +1,6 @@
 import AppDispatcher from '../dispatchers/AppDispatcher.js';
-import {ACCOUNT_GET, ALL_ACCOUNTS_GET} from '../constants/AccountConstants.js';
+import {ACCOUNT_GET, ALL_ACCOUNTS_GET, ACCOUNT_NEW,
+  ACCOUNT_UPDATE, ACCOUNT_DELETE} from '../constants/AccountConstants.js';
 
 export default {
 
@@ -15,5 +16,27 @@ export default {
       actionType: ACCOUNT_GET,
       account: account
     })
+  },
+
+  newAccount: (account) => {
+    AppDispatcher.dispatch({
+      actionType: ACCOUNT_NEW,
+      account: account
+    })
+  },
+
+  updateAccount: (account) => {
+    AppDispatcher.dispatch({
+      actionType: ACCOUNT_UPDATE,
+      account: account
+    })
+  },
+
+  deleteAccount: (account) => {
+    AppDispatcher.dispatch({
+      actionType: ACCOUNT_DELETE,
+      account: account
+    })
   }
+
 }

src/actions/TxActions.js

@@ -1,5 +1,5 @@
 import AppDispatcher from '../dispatchers/AppDispatcher.js';
-import {TX_GET, TX_NEW, TX_UPDATE} from '../constants/TxConstants.js';
+import {TX_GET, TX_NEW, TX_UPDATE, TX_DELETE} from '../constants/TxConstants.js';
 
 export default {
 
@@ -22,6 +22,13 @@ export default {
       actionType: TX_UPDATE,
       tx: tx
     })
+  },
+
+  deleteTx: (tx) => {
+    AppDispatcher.dispatch({
+      actionType: TX_DELETE,
+      tx: tx
+    })
   }
 
 }

src/components/Tx.js

@@ -93,6 +93,16 @@ class Tx extends React.Component {
       });
   }
 
+  deleteTx(tx) {
+
+    return TxService
+      .deleteTx(tx)
+      .catch(function(err) {
+        alert("Error deleting");
+        console.log("Error deleting tx ", err);
+      });
+  }
+
   render() {
     return (
       <div className="grid-block">
@@ -106,7 +116,7 @@ class Tx extends React.Component {
         <div className="large-5 medium-5 small-12">
           <hr/>
           <TxForm txFormHandler={this.updateTx} accounts={this.props.accounts}
-            tx={this.state.tx} />
+            tx={this.state.tx} deleteTx={this.deleteTx} />
         </div>
       </div>
     )

src/components/TxForm.js

@@ -6,6 +6,10 @@ import React from 'react';
 import ReactMixin from 'react-mixin';
 import Catalyst from 'react-catalyst';
 import autobind from 'autobind-decorator';
+import cx from 'classnames';
+import parser from '../libs/parser';
+import Moment from 'moment';
+
 
 @autobind
 class TxForm extends React.Component {
@@ -16,7 +20,7 @@ class TxForm extends React.Component {
     // 2. Take the data from the form and create an object
     var tx = {
       id : this.refs.id.value,
-      amount : this.refs.amount.value,
+      amount : this.parseEquation(this.refs.amount.value),
       currency : this.refs.currency.value,
       date : this.refs.date.value,
       account : this.refs.account.value,
@@ -28,6 +32,22 @@ class TxForm extends React.Component {
     this.refs.txForm.reset();
   }
 
+  parseEquation(string) {
+    try {
+      var Parser = parser.Parser;
+      string = Parser.evaluate(string);
+    } catch (e) {
+      // I guess we just don't care
+    } finally {
+      return string;
+    }
+  }
+
+  handleAmountChange(evt) {
+    var result = evt.target.value;
+    this.handleChange(evt)
+  }
+
   handleChange(evt) {
     var currTx = this.state.tx;
     currTx[evt.target.name] = evt.target.value;
@@ -45,6 +65,14 @@ class TxForm extends React.Component {
     this.setState({tx: this.defaultTxState()});
   }
 
+  deleteItem() {
+    var tx = {
+      id : +this.refs.id.value
+    }
+    this.props.deleteTx(tx);
+    this.refs.txForm.reset();
+  }
+
   render() {
     this.state = this.state || {};
     if (this.state.updated) {
@@ -56,16 +84,44 @@ class TxForm extends React.Component {
     if (Object.keys(this.state.tx).length == 0)
       this.state.tx = this.defaultTxState();
 
+    var hasItem = ( (this.state.tx.id) ? true : false );
+    var delDisabledClassName = cx({
+      'hollow': true, 'alert': true, 'button': true, tiny: true,
+      'disabled': !hasItem, hide: !hasItem,
+    });
+    var hasDiffHomeValue = false;
+    var homeValue = this.parseEquation(this.state.tx.amount);
+    if ( ( this.state.tx.amount ) && ( this.state.tx.amount != homeValue ) ) {
+      hasDiffHomeValue = true;
+      this.state.homeValue = homeValue;
+    }
+    var homeValueBoxClassName = cx({
+      'grid-block': true,
+      'hide': !hasDiffHomeValue,
+    })
+
     return (
       <form className="tx-edit" ref="txForm" onSubmit={this.updateTx}>
         <div className="grid-block">
           <div className="small-6 medium-8 grid-content">
             <input type="text" ref="amount" placeholder="Amount" required
-              name="amount" value={this.state.tx.amount} onChange={this.handleChange} />
+              name="amount" value={this.state.tx.amount}
+              onChange={this.handleAmountChange} />
           </div>
           <div className="small-6 medium-4 grid-content">
             <input type="text" ref="currency" placeholder="Currency" required
-              name="currency" value={this.state.tx.currency} onChange={this.handleChange} />
+              name="currency" value={this.state.tx.currency}
+              onChange={this.handleChange} />
+          </div>
+        </div>
+        <div className={homeValueBoxClassName}>
+          <div className="small-6 medium-8 grid-content">
+            <input type="text" ref="xrate" placeholder="exchange rate" required
+              name="xrate" defaultValue="1" value={this.state.tx.xrate}
+              onChange={this.handleChange} />
+          </div>
+          <div className="small-6 medium-4 grid-content">
+            <input type="text" value={this.state.homeValue} disabled="true" />
           </div>
         </div>
         <div className="grid-block">
@@ -78,7 +134,8 @@ class TxForm extends React.Component {
             {this.props.accounts.map((account) => {
               var opts = { value: account.id };
               return (
-                <option {...opts} key={account.id}>{account.title} ({account.currency})</option>
+                <option {...opts} key={account.id}>
+                  {account.title} ({account.currency})</option>
               )
             })}
           </select>
@@ -95,6 +152,7 @@ class TxForm extends React.Component {
             <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>
           </div>
         </div>
       </form>
@@ -104,6 +162,7 @@ class TxForm extends React.Component {
 
 TxForm.propTypes = {
   txFormHandler : React.PropTypes.func.isRequired,
+  deleteTx : React.PropTypes.func.isRequired,
   accounts : React.PropTypes.array.isRequired,
   tx : React.PropTypes.object,
 }

src/constants/AccountConstants.js

@@ -3,5 +3,8 @@ export default {
   BASE_URL: BASE_URL,
   ACCOUNT_URL: BASE_URL + 'account/',
   ACCOUNT_GET: 'ACCOUNT_GET',
-  ALL_ACCOUNTS_GET: 'ALL_ACCOUNTS_GET'
+  ALL_ACCOUNTS_GET: 'ALL_ACCOUNTS_GET',
+  ACCOUNT_NEW: 'ACCOUNT_NEW',
+  ACCOUNT_UPDATE: 'ACCOUNT_UPDATE',
+  ACCOUNT_DELETE: 'ACCOUNT_DELETE',
 }

src/constants/TxConstants.js

@@ -7,4 +7,5 @@ export default {
   TX_GET: 'TX_GET',
   TX_NEW: 'TX_NEW',
   TX_UPDATE: 'TX_UPDATE',
+  TX_DELETE: 'TX_DELETE',
 }

src/services/AccountService.js

@@ -32,6 +32,52 @@ class AccountService {
     });
   }
 
+  newAccount(account) {
+    return when(request({
+        url: ACCOUNT_URL,
+        method: 'POST',
+        headers: {
+          'Authorization': 'Bearer ' + LoginStore.jwt
+        },
+        data: account
+      }).then(function(response) {
+        AccountActions.newAccount(response);
+        return true;
+      })
+    )
+  }
+
+  updateAccount(account) {
+    return when(request({
+        url: ACCOUNT_URL + account.id + '/',
+        method: 'PUT',
+        type: 'json',
+        headers: {
+          'Authorization': 'Bearer ' + LoginStore.jwt,
+        },
+        data: account
+      }).then(function(response) {
+        AccountActions.updateAccount(response);
+        return true;
+      })
+    )
+  }
+
+  deleteAccount(account) {
+    return when(request({
+        url: ACCOUNT_URL + account.id + '/',
+        method: 'DELETE',
+        type: 'json',
+        headers: {
+          'Authorization': 'Bearer ' + LoginStore.jwt,
+        },
+      }).then(function(response) {
+        AccountActions.deleteAccount(account);
+        return true;
+      })
+    )
+  }
+
 }
 
 export default new AccountService()

src/services/AuthService.js

@@ -3,6 +3,7 @@ import when from 'when';
 import {LOGIN_URL, SIGNUP_URL, SOCIAL_LOGIN_URL} from '../constants/LoginConstants';
 import LoginActions from '../actions/LoginActions';
 
+
 class AuthService {
 
   login(username, password) {

src/services/TxService.js

@@ -5,7 +5,7 @@ import {TX_URL, TX_LIST_URL_SUFFIX} from '../constants/TxConstants';
 import TxActions from '../actions/TxActions';
 import LoginStore from '../stores/LoginStore';
 
-class AccountService {
+class TxService {
 
   getTxs(accountId) {
     request({
@@ -51,14 +51,21 @@ class AccountService {
     )
   }
 
-  handlePromise(txPromise) {
-    return txPromise
-      .then(function(response) {
-        TxActions.newTx(response);
+  deleteTx(tx) {
+    return when(request({
+        url: TX_URL + tx.id + '/',
+        method: 'DELETE',
+        type: 'json',
+        headers: {
+          'Authorization': 'Bearer ' + LoginStore.jwt,
+        },
+      }).then(function(response) {
+        TxActions.deleteTx(tx);
         return true;
-      });
+      })
+    )
   }
 
 }
 
-export default new AccountService()
+export default new TxService()

src/stores/AccountStore.js

@@ -1,4 +1,5 @@
-import {ACCOUNT_GET, ALL_ACCOUNTS_GET} from '../constants/AccountConstants';
+import {ACCOUNT_GET, ALL_ACCOUNTS_GET, ACCOUNT_NEW,
+  ACCOUNT_UPDATE, ACCOUNT_DELETE} from '../constants/AccountConstants';
 import {LOGOUT_USER} from '../constants/LoginConstants';
 import BaseStore from './BaseStore';
 
@@ -21,6 +22,34 @@ class AccountStore extends BaseStore {
         this._account = action.account;
         this.emitChange();
         break;
+      case ACCOUNT_NEW:
+        this._accounts.push(action.account);
+        this.emitChange();
+        break;
+      case ACCOUNT_UPDATE:
+        var updated = false;
+        for (var i=0; i<this._accounts.length; i++) {
+          if (this._accounts[i].id === action.account.id) {
+            this._accounts[i] = action.account;
+            updated = true;
+          }
+          if (updated)
+            break;
+        }
+        this.emitChange();
+        break;
+      case ACCOUNT_DELETE:
+        var del = false;
+        for (var i=0; i<this._accounts.length; i++) {
+          if (this._accounts[i].id === +action.account.id) {
+            this._accounts.splice(i, 1);
+            del = true;
+          }
+          if (del)
+            break;
+        }
+        this.emitChange();
+        break;
       case LOGOUT_USER:
         this._account = null;
         this._accounts = null;

src/stores/TxStore.js

@@ -1,5 +1,5 @@
 import {ACCOUNT_GET} from '../constants/AccountConstants';
-import {TX_GET, TX_NEW, TX_UPDATE} from '../constants/TxConstants';
+import {TX_GET, TX_NEW, TX_UPDATE, TX_DELETE} from '../constants/TxConstants';
 import {LOGOUT_USER} from '../constants/LoginConstants';
 import BaseStore from './BaseStore';
 
@@ -38,6 +38,18 @@ class TxStore extends BaseStore {
         }
         this.emitChange();
         break;
+      case TX_DELETE:
+        var del = false;
+        for (var i=0; i<this._txs.length; i++) {
+          if (this._txs[i].id === +action.tx.id) {
+            this._txs.splice(i, 1);
+            del = true;
+          }
+          if (del)
+            break;
+        }
+        this.emitChange();
+        break;
       case LOGOUT_USER:
         this._account = null;
         this._txs = [];