TxForm works

package.json

@@ -39,6 +39,7 @@
     "foundation-apps": "^1.1.0",
     "foundation-sites": "^6.0.0",
     "jwt-decode": "^1.1.0",
+    "moment": "^2.10.6",
     "react": "^0.14",
     "react-catalyst": "^0.3.0",
     "react-dom": "^0.14.3",

src/actions/TxActions.js

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

src/components/Tx.js

@@ -70,18 +70,28 @@ class Tx extends React.Component {
   }
 
   newTx(tx) {
-    /*
-    creating tx via REST; if ok, push to this.state.txs too. 
-     */
     delete tx['id'];
-    TxService.newTx(tx);
+
+    TxService
+      .newTx(tx)
+      .catch(function(err) {
+        alert("Error creating tx");
+        console.log("Error updating tx ", err);
+      });
   }
 
   updateTx(tx) {
     tx.user = this.props.user.user_id;
     if (!tx.id) {
-      this.newTx(tx);
+      delete tx['id'];
+      TxService.newTx(tx);
     }
+    TxService
+      .updateTx(tx)
+      .catch(function(err) {
+        alert("Error updating");
+        console.log("Error updating tx ", err);
+      });
   }
 
   render() {

src/components/TxForm.js

@@ -3,6 +3,8 @@
   <AddTxForm />
 */
 import React from 'react';
+import ReactMixin from 'react-mixin';
+import Catalyst from 'react-catalyst';
 import autobind from 'autobind-decorator';
 
 @autobind
@@ -28,27 +30,32 @@ class TxForm extends React.Component {
 
   handleChange(evt) {
     var currTx = this.state.tx;
-    console.log(evt.target.name);
-    console.log(evt.target.value);
     currTx[evt.target.name] = evt.target.value;
-    console.log(currTx);
     this.setState({updated: currTx});
   }
 
+  defaultTxState() {
+    return {
+      id: '', amount: '', currency: '',
+      date: '2015-12-16', note: ''
+    }
+  }
+
+  resetForm() {
+    this.setState({tx: this.defaultTxState()});
+  }
+
   render() {
     this.state = this.state || {};
     if (this.state.updated) {
       this.state.tx = this.state.updated;
       delete this.state["updated"];
     } else {
-      this.state.tx = this.props.tx;
+      this.state.tx = JSON.parse(JSON.stringify(this.props.tx));
-    }
-    if (Object.keys(this.state.tx).length == 0) {
-      this.state.tx = {
-        id: '', amount: '', currency: '',
-        date: '2015-12-16', note: ''
-      };
     }
+    if (Object.keys(this.state.tx).length == 0)
+      this.state.tx = this.defaultTxState();
+
     return (
       <form className="tx-edit" ref="txForm" onSubmit={this.updateTx}>
         <div className="grid-block">
@@ -86,7 +93,8 @@ 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">+ Add Tx</button>
+            <button type="submit" className="success button">+ {( (this.state.tx.id) ? "Edit" : "Add" )} Tx</button>
+            <button onClick={this.resetForm} className="default button">Reset</button>
           </div>
         </div>
       </form>
@@ -100,4 +108,6 @@ TxForm.propTypes = {
   tx : React.PropTypes.object,
 }
 
+ReactMixin.onClass(TxForm, Catalyst.LinkedStateMixin);
+
 export default TxForm;

src/constants/TxConstants.js

@@ -6,4 +6,5 @@ export default {
   ACCOUNT_GET: 'ACCOUNT_GET',
   TX_GET: 'TX_GET',
   TX_NEW: 'TX_NEW',
+  TX_UPDATE: 'TX_UPDATE',
 }

src/services/TxService.js

@@ -21,20 +21,42 @@ class AccountService {
   }
 
   newTx(tx) {
-    request({
+    return when(request({
-      url: TX_URL,
+        url: TX_URL,
-      method: 'POST',
+        method: 'POST',
-      headers: {
+        headers: {
-        'Authorization': 'Bearer ' + LoginStore.jwt
+          'Authorization': 'Bearer ' + LoginStore.jwt
-      },
+        },
-      data: tx
+        data: tx
-    })
+      }).then(function(response) {
-    .then(function(response) {
+        TxActions.newTx(response);
-      console.log('new tx created');
+        return true;
-      console.log(response);
+      })
-      TxActions.newTx(response);
+    )
-      console.log('---- new tx created ----');
+  }
-    });
+
+  updateTx(tx) {
+    return when(request({
+        url: TX_URL + tx.id + '/',
+        method: 'PUT',
+        type: 'json',
+        headers: {
+          'Authorization': 'Bearer ' + LoginStore.jwt,
+        },
+        data: tx
+      }).then(function(response) {
+        TxActions.updateTx(response);
+        return true;
+      })
+    )
+  }
+
+  handlePromise(txPromise) {
+    return txPromise
+      .then(function(response) {
+        TxActions.newTx(response);
+        return true;
+      });
   }
 
 }

src/stores/TxStore.js

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