merge

src/components/AccountForm.js

@@ -0,0 +1,120 @@
+/*
+  Add Account Form
+  <AddAccountForm />
+*/
+import React from 'react';
+import ReactMixin from 'react-mixin';
+import Catalyst from 'react-catalyst';
+import autobind from 'autobind-decorator';
+import cx from 'classnames';
+import parser from '../libs/parser';
+import moment from 'moment';
+
+
+@autobind
+class AccountForm extends React.Component {
+
+  updateAccount(event) {
+    // 1. Stop the form from submitting
+    event.preventDefault();
+    // 2. Take the data from the form and create an object
+    var account = {
+      id : this.refs.id.value,
+      title : this.refs.title.value,
+      currency : this.refs.currency.value,
+      budget : this.refs.budget.value,
+      note : this.refs.note.value,
+    }
+    // 3. Add the Account to the App State
+    // console.log(this.props);
+    this.props.accountFormHandler(account);
+    this.refs.AccountForm.reset();
+  }
+
+  handleChange(evt) {
+    var currAccount = this.state.account;
+    currAccount[evt.target.name] = evt.target.value;
+    this.setState({updated: currAccount});
+  }
+
+  defaultAccountState() {
+    return {
+      id: '', title: 'new account', currency: 'usd', budget: '', note: '',
+    }
+  }
+
+  resetForm() {
+    this.setState({account: this.defaultAccountState()});
+  }
+
+  deleteItem() {
+    var account = {
+      id : +this.refs.id.value
+    }
+    this.props.deleteAccount(account);
+    this.refs.AccountForm.reset();
+  }
+
+  render() {
+    this.state = this.state || {};
+    if (this.state.updated) {
+      this.state.account = this.state.updated;
+      delete this.state["updated"];
+    } else {
+      this.state.account = JSON.parse(JSON.stringify(this.props.account));
+    }
+    if (Object.keys(this.state.account).length == 0)
+      this.state.account = this.defaultAccountState();
+
+    var hasItem = ( (this.state.account.id) ? true : false );
+
+    return (
+      <form className="account-edit" ref="accountForm" onSubmit={this.updateAccount}>
+        <div className="grid-block">
+          <div className="small-12 grid-content">
+            <input type="text" ref="title" placeholder="Title" required
+              name="title" value={this.state.account.title}
+              onChange={this.handleChange} />
+          </div>
+        </div>
+        <div className={homeValueBoxClassName}>
+          <div className="small-6 medium-8 grid-content">
+            <input type="text" ref="budget" placeholder="Budget" required
+              name="budget" value={this.state.account.budget}
+              onChange={this.handleChange} />
+          </div>
+          <div className="small-6 medium-4 grid-content">
+            <input type="text" ref="currency" placeholder="Currency" required
+              name="currency" value={this.state.account.currency}
+              onChange={this.handleChange} />
+          </div>
+        </div>
+        <div className="grid-block">
+          <div className="small-12 medium-12 grid-content">
+            <textarea type="text" ref="note" placeholder="Note" name="note" 
+              value={this.state.account.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={this.state.account.id} />
+            <button type="submit" className="success button">+ {( (this.state.account.id) ? "Edit" : "Add" )} Account</button>
+            <button onClick={this.resetForm} className="default button">Reset</button>
+            <button onClick={this.deleteItem} className={delDisabledClassName} disabled={!hasItem}>- Remove Account</button>
+          </div>
+        </div>
+      </form>
+    )
+  }
+};
+
+AccountForm.propTypes = {
+  AccountFormHandler : React.PropTypes.func.isRequired,
+  deleteAccount : React.PropTypes.func.isRequired,
+  accounts : React.PropTypes.array.isRequired,
+  Account : React.PropTypes.object,
+}
+
+ReactMixin.onClass(AccountForm, Catalyst.LinkedStateMixin);
+
+export default AccountForm;