UpdateForm

src/components/AuthenticatedApp.js

@@ -37,14 +37,14 @@ export default class AuthenticatedApp extends React.Component {
 
         <RouteHandler/>
 
-        <div className="grid-block shrink player">
+        {/*<div className="grid-block shrink player">
           <div className="small-12 medium-3 content">
             <ul className="menu-bar">
               <li><a href="#">p</a></li>
               <li><a href="#"><input type="range" /></a></li>
             </ul>
           </div>
-        </div>
+        </div>*/}
       </div>
     );
   }

src/components/Tx.js

@@ -51,13 +51,21 @@ class Tx extends React.Component {
   getTxState() {
     return {
       account: AccountStore.account,
-      txs: TxStore.txs
+      txs: TxStore.txs,
+      tx: {}
     }
   }
 
+  changeTx(selTx) {
+    this.setState({tx: selTx});
+  }
+
   renderTx(tx) {
     return (
-      <li key={tx.id}>{tx.date} <b>{tx.amount} {tx.currency}</b></li>
+      <li key={tx.id}>
+      <a onClick={this.changeTx.bind(this, tx)} className="pull-left hollow tiny button">Edit</a>
+      {tx.date} <b>{tx.amount} {tx.currency}</b>
+      </li>
     )
   }
 
@@ -77,7 +85,6 @@ class Tx extends React.Component {
   }
 
   render() {
-
     return (
       <div className="grid-block">
         <div className="large-2 medium-2 small-12">
@@ -85,12 +92,12 @@ class Tx extends React.Component {
         </div>
         <div className="large-5 medium-5 small-12">
           <hr/>
-          <ul>{this.state.txs.map(this.renderTx)}</ul>
+          <ul className="unstyled-list">{this.state.txs.map(this.renderTx)}</ul>
         </div>
         <div className="large-5 medium-5 small-12">
-
           <hr/>
-          <TxForm txFormHandler={this.updateTx} accounts={this.props.accounts} />
+          <TxForm txFormHandler={this.updateTx} accounts={this.props.accounts}
+            tx={this.state.tx} />
         </div>
       </div>
     )

src/components/TxForm.js

@@ -26,20 +26,45 @@ class TxForm extends React.Component {
     this.refs.txForm.reset();
   }
 
+  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});
+  }
+
   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: ''
+      };
+    }
     return (
       <form className="tx-edit" ref="txForm" onSubmit={this.updateTx}>
         <div className="grid-block">
           <div className="small-6 medium-8 grid-content">
-            <input type="text" ref="amount" placeholder="Amount" required />
+            <input type="text" ref="amount" placeholder="Amount" required
+              name="amount" value={this.state.tx.amount} onChange={this.handleChange} />
           </div>
           <div className="small-6 medium-4 grid-content">
-            <input type="text" ref="currency" placeholder="Currency" required />
+            <input type="text" ref="currency" placeholder="Currency" required
+              name="currency" value={this.state.tx.currency} onChange={this.handleChange} />
           </div>
         </div>
         <div className="grid-block">
           <div className="small-12 medium-6 grid-content">
-            <input type="text" ref="date" placeholder="Date" required />
+            <input type="text" ref="date" placeholder="Date" required
+              name="date" value={this.state.tx.date} onChange={this.handleChange} />
           </div>
           <div className="small-12 medium-6 grid-content">
           <select ref="account">
@@ -54,12 +79,13 @@ class TxForm extends React.Component {
         </div>
         <div className="grid-block">
           <div className="small-12 medium-12 grid-content">
-            <textarea type="text" ref="note" placeholder="Note"></textarea>
+            <textarea type="text" ref="note" placeholder="Note" name="note" 
+              value={this.state.tx.note} onChange={this.handleChange}></textarea>
           </div>
         </div>
         <div className="grid-block">
           <div className="small-12 medium-12 grid-content">
-            <input type="hidden" ref="id" value="" />
+            <input type="hidden" ref="id" value={this.state.tx.id} />
             <button type="submit" className="success button">+ Add Tx</button>
           </div>
         </div>
@@ -70,7 +96,8 @@ class TxForm extends React.Component {
 
 TxForm.propTypes = {
   txFormHandler : React.PropTypes.func.isRequired,
-  accounts : React.PropTypes.array.isRequired
+  accounts : React.PropTypes.array.isRequired,
+  tx : React.PropTypes.object,
 }
 
 export default TxForm;