Tx form

rearrange new route

src/app.jsx

@@ -16,8 +16,9 @@ var routes = (
     <Route name="signup" handler={Signup}/>
     <Route name="home" path="/" handler={Home}/>
     <Route name="quote" handler={Quote}/>
-    <Route name="account" handler={Account}/>
-    <Route path="account/txs/:accountId" handler={Tx}/>
+    <Route name="account" handler={Account}>
+      <Route path="txs/:accountId" handler={Tx}/>
+    </Route>
   </Route>
 );
 

src/components/Account.js

@@ -3,6 +3,7 @@ import {Link} from 'react-router';
 import AuthenticatedComponent from './AuthenticatedComponent';
 import AccountStore from '../stores/AccountStore.js';
 import AccountService from '../services/AccountService.js';
+import Tx from './Tx';
 
 /*
 List of all account related to user
@@ -61,13 +62,21 @@ class Account extends React.Component {
   }
 
   render() {
-    return (
-      <div className="grid-block">
-        <ul>
-          {this.state.accounts.map(this.renderAccounts)}
-        </ul>
-      </div>
-    )
+    if (this.props.params.accountId) {
+      return (
+        <div className="grid-block">
+          <Tx {...this.props} />
+        </div>
+      )
+    } else {
+      return (
+        <div className="grid-block">
+          <ul>
+            {this.state.accounts.map(this.renderAccounts)}
+          </ul>
+        </div>
+      )
+    }
   }
 };
 

src/components/AccountForm.js

@@ -0,0 +1 @@
+AccountForm.js

src/components/Tx.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import AuthenticatedComponent from './AuthenticatedComponent';
+import TxForm from './TxForm';
+
 import AccountStore from '../stores/AccountStore';
 import AccountService from '../services/AccountService';
 import TxStore from '../stores/TxStore';
@@ -59,16 +61,23 @@ class Tx extends React.Component {
     )
   }
 
+  updateTx(tx) {
+
+  }
+
   render() {
+
     return (
       <div className="grid-block">
         <h1>{this.state.account.title}</h1>
         <ul>
           {this.state.txs.map(this.renderTx)}
         </ul>
+
+        <TxForm {...this.props} />
       </div>
     )
   }
 }
 
-export default AuthenticatedComponent(Tx);
+export default Tx;

src/components/TxForm.js

@@ -0,0 +1,57 @@
+/*
+  Add Tx Form
+  <AddTxForm />
+*/
+
+import React from 'react';
+import AccountStore from '../stores/AccountStore';
+
+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
+    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
+    }
+
+    // 3. Add the fish to the App State
+    this.props.addFish(fish);
+    this.refs.fishForm.reset();
+  }
+
+  render() {
+    return (
+      <form className="tx-edit" ref="txForm" onSubmit={this.updateTx}>
+        <input type="hidden" ref="id" value="" />
+        <input type="text" ref="amount" placeholder="Amount" />
+        <input type="text" ref="currency" placeholder="Currency" />
+        <input type="text" ref="date" placeholder="Date" />
+        <select ref="account">
+          {this.state.accounts.map((account) => {
+            return (
+              <option value="{account.id}">
+              {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>
+      </form>
+    )
+  }
+};
+
+export default TxForm;