wip

src/actions/TxActions.js

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

src/components/AuthenticatedApp.js

@@ -41,7 +41,6 @@ export default class AuthenticatedApp extends React.Component {
           <div className="small-12 medium-3 content">
             <ul className="menu-bar">
               <li><a href="#">p</a></li>
-              <li><span className="right"><a onClick={this.logout}>Logout</a></span></li>
               <li><a href="#"><input type="range" /></a></li>
             </ul>
           </div>
@@ -61,17 +60,15 @@ export default class AuthenticatedApp extends React.Component {
         <div className="title-bar">
           <div className="center title"><a>getExpensy</a></div>
           <span className="left hide-for-medium"><a zf-toggle="sub-nav">Menu</a></span>
-          <span className="right"><a ui-sref="settings">Settings</a></span>
+          <span className="right"><Link to={`signup`}>Sign Up</Link></span>
         </div>
       )
     } else {
       return (
         <div className="title-bar">
           <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"><Link to={`/account`}>Account</Link></span>
-          <span className="right"><a ui-sref="settings">Settings</a></span>
+          <span className="right"><a onClick={this.logout}>Sign out</a></span>
-          {/*<span className="right"><a onClick={this.logout}>Logout</a></span>*/}
         </div>
       )
     }

src/components/Login.js

@@ -25,7 +25,23 @@ class Login extends React.Component {
   render() {
     return (
       <div className="grid-block">
-      <a href="#" className="fb-login-button" data-max-rows="1" data-size="large" onClick={this.handleClickFb.bind(this)}>FB Login</a>
+
+        <h1>Login</h1>
+        <form role="form">
+        <div className="form-group">
+          <label htmlFor="username">Username</label>
+          <input type="text" valueLink={this.linkState('user')} className="form-control" id="username" placeholder="Username" />
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password</label>
+          <input type="password" valueLink={this.linkState('password')} className="form-control" id="password" ref="password" placeholder="Password" />
+        </div>
+        <button type="submit" className="btn btn-default" onClick={this.login.bind(this)}>Submit</button>
+        </form>
+
+        <a href="#" className="fb-login-button" data-max-rows="1"
+          data-size="large" onClick={this.handleClickFb.bind(this)}>
+          FB Login</a>
       </div>
     );
   }

src/components/Tx.js

@@ -61,20 +61,37 @@ 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);
+  }
+
   updateTx(tx) {
-    console.log("updateTx: " + tx);
+    tx.user = this.props.user.user_id;
+    if (!tx.id) {
+      this.newTx(tx);
+    }
   }
 
   render() {
 
     return (
       <div className="grid-block">
+        <div className="large-2 medium-2 small-12">
           <h1>{this.state.account.title}</h1>
-        <ul>
+        </div>
-          {this.state.txs.map(this.renderTx)}
+        <div className="large-5 medium-5 small-12">
-        </ul>
+          <hr/>
+          <ul>{this.state.txs.map(this.renderTx)}</ul>
+        </div>
+        <div className="large-5 medium-5 small-12">
 
-        <TxForm {...this.props} />
+          <hr/>
+          <TxForm txFormHandler={this.updateTx} accounts={this.props.accounts} />
+        </div>
       </div>
     )
   }

src/components/TxForm.js

@@ -21,7 +21,8 @@ class TxForm extends React.Component {
       note : this.refs.note.value
     }
     // 3. Add the tx to the App State
-    this.props.UpdateTx(tx);
+    // console.log(this.props);
+    this.props.txFormHandler(tx);
     this.refs.txForm.reset();
   }
 
@@ -67,4 +68,9 @@ class TxForm extends React.Component {
   }
 };
 
+TxForm.propTypes = {
+  txFormHandler : React.PropTypes.func.isRequired,
+  accounts : React.PropTypes.array.isRequired
+}
+
 export default TxForm;

src/constants/TxConstants.js

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

src/services/TxService.js

@@ -1,7 +1,7 @@
 import request from 'reqwest';
 import when from 'when';
 import {ACCOUNT_URL} from '../constants/AccountConstants';
-import {TX_URL_SUFFIX} from '../constants/TxConstants';
+import {TX_URL, TX_LIST_URL_SUFFIX} from '../constants/TxConstants';
 import TxActions from '../actions/TxActions';
 import LoginStore from '../stores/LoginStore';
 
@@ -9,7 +9,7 @@ class AccountService {
 
   getTxs(accountId) {
     request({
-      url: ACCOUNT_URL + accountId + TX_URL_SUFFIX + '/',
+      url: ACCOUNT_URL + accountId + TX_LIST_URL_SUFFIX,
       method: 'GET',
       headers: {
         'Authorization': 'Bearer ' + LoginStore.jwt
@@ -20,6 +20,23 @@ 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 ----');
+    });
+  }
+
 }
 
 export default new AccountService()

src/stores/TxStore.js

@@ -1,5 +1,5 @@
 import {ACCOUNT_GET} from '../constants/AccountConstants';
-import {TX_GET} from '../constants/TxConstants';
+import {TX_GET, TX_NEW} from '../constants/TxConstants';
 import {LOGOUT_USER} from '../constants/LoginConstants';
 import BaseStore from './BaseStore';
 
@@ -22,6 +22,10 @@ class TxStore extends BaseStore {
         this._txs = action.txs;
         this.emitChange();
         break;
+      case TX_NEW:
+        this._txs.push(action.tx);
+        this.emitChange();
+        break;
       case LOGOUT_USER:
         this._account = null;
         this._txs = [];