From 01fa555255da5500910af1f8c765a072576f1e87 Mon Sep 17 00:00:00 2001 From: sipp11 Date: Wed, 16 Dec 2015 13:14:53 +0700 Subject: [PATCH] TxForm works --- package.json | 1 + src/actions/TxActions.js | 9 ++++++- src/components/Tx.js | 20 +++++++++++---- src/components/TxForm.js | 32 +++++++++++++++-------- src/constants/TxConstants.js | 1 + src/services/TxService.js | 50 ++++++++++++++++++++++++++---------- src/stores/TxStore.js | 14 +++++++++- 7 files changed, 95 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index de0cb03..21e0d83 100644 --- a/package.json +++ b/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", diff --git a/src/actions/TxActions.js b/src/actions/TxActions.js index a2323f3..84fe59b 100644 --- a/src/actions/TxActions.js +++ b/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 + }) } } diff --git a/src/components/Tx.js b/src/components/Tx.js index 85a5124..e620214 100644 --- a/src/components/Tx.js +++ b/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() { diff --git a/src/components/TxForm.js b/src/components/TxForm.js index 413695a..e70f737 100644 --- a/src/components/TxForm.js +++ b/src/components/TxForm.js @@ -3,6 +3,8 @@ */ 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; - } - if (Object.keys(this.state.tx).length == 0) { - this.state.tx = { - id: '', amount: '', currency: '', - date: '2015-12-16', note: '' - }; + this.state.tx = JSON.parse(JSON.stringify(this.props.tx)); } + if (Object.keys(this.state.tx).length == 0) + this.state.tx = this.defaultTxState(); + return (
@@ -86,7 +93,8 @@ class TxForm extends React.Component {
- + +
@@ -100,4 +108,6 @@ TxForm.propTypes = { tx : React.PropTypes.object, } +ReactMixin.onClass(TxForm, Catalyst.LinkedStateMixin); + export default TxForm; diff --git a/src/constants/TxConstants.js b/src/constants/TxConstants.js index fbd81c8..d8bab23 100644 --- a/src/constants/TxConstants.js +++ b/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', } diff --git a/src/services/TxService.js b/src/services/TxService.js index 45d6522..bc98737 100644 --- a/src/services/TxService.js +++ b/src/services/TxService.js @@ -21,20 +21,42 @@ class AccountService { } newTx(tx) { - request({ - url: TX_URL, - method: 'POST', - headers: { - 'Authorization': 'Bearer ' + LoginStore.jwt - }, - data: tx - }) - .then(function(response) { - console.log('new tx created'); - console.log(response); - TxActions.newTx(response); - console.log('---- new tx created ----'); - }); + return when(request({ + url: TX_URL, + method: 'POST', + headers: { + 'Authorization': 'Bearer ' + LoginStore.jwt + }, + data: tx + }).then(function(response) { + TxActions.newTx(response); + return true; + }) + ) + } + + 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; + }); } } diff --git a/src/stores/TxStore.js b/src/stores/TxStore.js index 7b39c38..1012151 100644 --- a/src/stores/TxStore.js +++ b/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