wip

package.json

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

src/components/Account.js

@@ -65,7 +65,7 @@ class Account extends React.Component {
     if (this.props.params.accountId) {
       return (
         <div className="grid-block">
-          <Tx {...this.props} />
+          <Tx {...this.props} accounts={this.state.accounts} />
         </div>
       )
     } else {

src/components/AuthenticatedApp.js

@@ -41,7 +41,7 @@ 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><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>

src/components/Tx.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import autobind from 'autobind-decorator';
 import AuthenticatedComponent from './AuthenticatedComponent';
 import TxForm from './TxForm';
 
@@ -11,6 +12,7 @@ import TxService from '../services/TxService';
 List of all Tx related to user 
  */
 
+@autobind
 class Tx extends React.Component {
 
   constructor(props) {
@@ -24,10 +26,8 @@ class Tx extends React.Component {
   }
 
   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 ) {
+    if ( ( !this.state.account ) ||
+        ( this.state.account.id !== +this.props.params.accountId ) ) {
       this.fetchAccount(this.props.params.accountId);
       this.fetchTxs(this.props.params.accountId);
     }
@@ -62,7 +62,7 @@ class Tx extends React.Component {
   }
 
   updateTx(tx) {
-
+    console.log("updateTx: " + tx);
   }
 
   render() {

src/components/TxForm.js

@@ -2,33 +2,35 @@
   Add Tx Form
   <AddTxForm />
 */
-
 import React from 'react';
-import AccountStore from '../stores/AccountStore';
+import autobind from 'autobind-decorator';
 
+@autobind
 class TxForm extends React.Component {
 
-  constructor(props) {
-    super(props);
-    console.log(AccountStore.accounts)
-    this.state = {accounts: []};
-  }
-
   updateTx(event) {
     // 1. Stop the form from submitting
     event.preventDefault();
     // 2. Take the data from the form and create an object
+    console.log(this.refs);
+    console.log(this.refs.txForm);
+    alert(React.findDOMNode(this.refs.account).value);
+    alert(React.findDOMNode(this.refs.account).value);
     var tx = {
-      id : this.refs.id.value,
-      price : this.refs.price.value,
-      status : this.refs.status.value,
-      desc : this.refs.desc.value,
-      image : this.refs.image.value
+      id : React.findDOMNode(this.refs.id).value,
+      amount : React.findDOMNode(this.refs.amount).value,
+      currency : React.findDOMNode(this.refs.currency).value,
+      date : React.findDOMNode(this.refs.date).value,
+      account : React.findDOMNode(this.refs.account).value,
+      note : React.findDOMNode(this.refs.note).value,
+      image : React.findDOMNode(this.refs.image).value
     }
+    // 3. Add the tx to the App State
+    console.log(tx);
 
-    // 3. Add the fish to the App State
-    this.props.addFish(fish);
-    this.refs.fishForm.reset();
+    React.findDOMNode(this.refs.txForm).reset();
+    // this.props.addFish(fish);
+    // this.refs.fishForm.reset();
   }
 
   render() {
@@ -39,16 +41,16 @@ class TxForm extends React.Component {
         <input type="text" ref="currency" placeholder="Currency" />
         <input type="text" ref="date" placeholder="Date" />
         <select ref="account">
-          {this.state.accounts.map((account) => {
+          {this.props.accounts.map((account) => {
+            var opts = { value: account.id };
             return (
-              <option value="{account.id}">
-              {account.title} ({account.currency})</option>
+              <option {...opts}>{account.title} ({account.currency})</option>
             )
           })}
         </select>
         <textarea type="text" ref="note" placeholder="Note"></textarea>
         <input type="text" ref="image" placeholder="URL to Image" />
-        <button type="submit">+ Add Tx </button>
+        <button type="submit">+ Add Tx</button>
       </form>
     )
   }