Upgrade to React 0.14.*

package.json

@@ -39,7 +39,9 @@
     "foundation-apps": "^1.1.0",
     "foundation-sites": "^6.0.0",
     "jwt-decode": "^1.1.0",
-    "react": "^0.13",
+    "react": "^0.14",
+    "react-catalyst": "^0.3.0",
+    "react-dom": "^0.14.3",
     "react-mixin": "^1.1.0",
     "react-router": "^0.13.2",
     "reqwest": "^1.1.5",

scss/style.scss

@@ -3,7 +3,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-$foundation-version: '1.1.0';
+$foundation-version: '1.2.0';
 
 // Make sure the charset is set appropriately
 @charset "UTF-8";

src/app.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Router, {Route} from 'react-router';
 import AuthenticatedApp from './components/AuthenticatedApp'
 import Login from './components/Login';
 import Signup from './components/Signup';
 import Home from './components/Home';
-import Quote from './components/Quote';
 import Account from './components/Account';
 import Tx from './components/Tx';
 import RouterContainer from './services/RouterContainer';
@@ -15,7 +15,6 @@ var routes = (
     <Route name="login" handler={Login}/>
     <Route name="signup" handler={Signup}/>
     <Route name="home" path="/" handler={Home}/>
-    <Route name="quote" handler={Quote}/>
     <Route name="account" handler={Account}>
       <Route path="txs/:accountId" handler={Tx}/>
     </Route>
@@ -31,5 +30,5 @@ if (jwt) {
 }
 
 router.run(function (Handler) {
-  React.render(<Handler />, document.getElementById('content'));
+  ReactDOM.render(<Handler />, document.getElementById('content'));
 });

src/components/Account.js

@@ -53,7 +53,7 @@ class Account extends React.Component {
 
   renderAccounts(act) {
     return (
-      <li><Link to={`/account/txs/${act.id}`}><b>{act.title}</b> </Link>
+      <li key={act.id}><Link to={`/account/txs/${act.id}`}><b>{act.title}</b> </Link>
       {act.currency}
       -- owner {act.owner}
       -- ro #{act.ro_users.length}

src/components/AccountForm.js

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

src/components/Login.js

@@ -1,8 +1,9 @@
-import React from 'react/addons';
+import React from 'react';
+import Catalyst from 'react-catalyst';
 import ReactMixin from 'react-mixin';
 import Auth from '../services/AuthService'
 
-export default class Login extends React.Component {
+class Login extends React.Component {
 
   constructor() {
     super()
@@ -84,4 +85,6 @@ export default class Login extends React.Component {
 
 }
 
-ReactMixin(Login.prototype, React.addons.LinkedStateMixin);
+ReactMixin.onClass(Login, Catalyst.LinkedStateMixin);
+
+export default Login;

src/components/Quote.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import AuthenticatedComponent from './AuthenticatedComponent';
-import QuoteStore from '../stores/QuoteStore.js';
-import QuoteService from '../services/QuoteService.js';
-
-export default AuthenticatedComponent(class Quote extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = this.getQuoteState();
-    this._onChange = this._onChange.bind(this);
-  }
-
-  componentDidMount() {
-    if (!this.state.quote) {
-      this.requestNextQuote();
-    }
-
-    QuoteStore.addChangeListener(this._onChange);
-  }
-
-  componentWillUnmount() {
-    QuoteStore.removeChangeListener(this._onChange);
-  }
-
-  _onChange() {
-    this.setState(this.getQuoteState());
-  }
-
-  requestNextQuote() {
-    QuoteService.nextQuote();
-  }
-
-  getQuoteState() {
-    return {
-      quote: QuoteStore.quote
-    };
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>{this.state.quote}</h1>
-        <button className="btn btn-primary" type="button" onClick={this.requestNextQuote}>Next Quote</button>
-      </div>
-    );
-  }
-});

src/components/Signup.js

@@ -1,8 +1,9 @@
-import React from 'react/addons';
+import React from 'react';
+import Catalyst from 'react-catalyst';
 import ReactMixin from 'react-mixin';
 import Auth from '../services/AuthService'
 
-export default class Signup extends React.Component {
+class Signup extends React.Component {
 
   constructor() {
     super()
@@ -44,6 +45,9 @@ export default class Signup extends React.Component {
     </div>
     );
   }
+
 }
 
-ReactMixin(Signup.prototype, React.addons.LinkedStateMixin);
+ReactMixin.onClass(Signup, Catalyst.LinkedStateMixin);
+
+export default Signup;

src/components/Tx.js

@@ -57,7 +57,7 @@ class Tx extends React.Component {
 
   renderTx(tx) {
     return (
-      <li>{tx.date} <b>{tx.amount} {tx.currency}</b></li>
+      <li key={tx.id}>{tx.date} <b>{tx.amount} {tx.currency}</b></li>
     )
   }
 

src/components/TxForm.js

@@ -12,45 +12,56 @@ class TxForm extends React.Component {
     // 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 : 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
+      id : this.refs.id.value,
+      amount : this.refs.amount.value,
+      currency : this.refs.currency.value,
+      date : this.refs.date.value,
+      account : this.refs.account.value,
+      note : this.refs.note.value
     }
     // 3. Add the tx to the App State
-    console.log(tx);
-
-    React.findDOMNode(this.refs.txForm).reset();
-    // this.props.addFish(fish);
-    // this.refs.fishForm.reset();
+    this.props.UpdateTx(tx);
+    this.refs.txForm.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.props.accounts.map((account) => {
-            var opts = { value: account.id };
-            return (
-              <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>
+        <div className="grid-block">
+          <div className="small-6 medium-8 grid-content">
+            <input type="text" ref="amount" placeholder="Amount" required />
+          </div>
+          <div className="small-6 medium-4 grid-content">
+            <input type="text" ref="currency" placeholder="Currency" required />
+          </div>
+        </div>
+        <div className="grid-block">
+          <div className="small-12 medium-6 grid-content">
+            <input type="text" ref="date" placeholder="Date" required />
+          </div>
+          <div className="small-12 medium-6 grid-content">
+          <select ref="account">
+            {this.props.accounts.map((account) => {
+              var opts = { value: account.id };
+              return (
+                <option {...opts} key={account.id}>{account.title} ({account.currency})</option>
+              )
+            })}
+          </select>
+          </div>
+        </div>
+        <div className="grid-block">
+          <div className="small-12 medium-12 grid-content">
+            <textarea type="text" ref="note" placeholder="Note"></textarea>
+          </div>
+        </div>
+        <div className="grid-block">
+          <div className="small-12 medium-12 grid-content">
+            <input type="hidden" ref="id" value="" />
+            <button type="submit" className="success button">+ Add Tx</button>
+          </div>
+        </div>
       </form>
     )
   }

src/constants/QuoteConstants.js

@@ -1,6 +0,0 @@
-var BASE_URL = 'http://rocket.dev/';
-export default {
-  BASE_URL: BASE_URL,
-  QUOTE_URL: BASE_URL + 'account/',
-  QUOTE_GET: 'QUOTE_GET'
-}

src/services/QuoteService.js

@@ -1,27 +0,0 @@
-import request from 'reqwest';
-import when from 'when';
-import {QUOTE_URL} from '../constants/QuoteConstants';
-import QuoteActions from '../actions/QuoteActions';
-import LoginStore from '../stores/LoginStore.js';
-
-class QuoteService {
-
-  nextQuote() {
-
-    request({
-      url: QUOTE_URL,
-      method: 'GET',
-      crossOrigin: true,
-      headers: {
-        'Authorization': 'Bearer ' + LoginStore.jwt
-      }
-    })
-    .then(function(response) {
-      console.log(response);
-      QuoteActions.gotQuote(response);
-    });
-  }
-
-}
-
-export default new QuoteService()

src/stores/QuoteStore.js

@@ -1,33 +0,0 @@
-import {QUOTE_GET} from '../constants/QuoteConstants';
-import {LOGOUT_USER} from '../constants/LoginConstants';
-import BaseStore from './BaseStore';
-
-class QuoteStore extends BaseStore {
-
-  constructor() {
-    super();
-    this.subscribe(() => this._registerToActions.bind(this))
-    this._quote = '';
-  }
-
-  _registerToActions(action) {
-    switch(action.actionType) {
-      case QUOTE_GET:
-        this._quote = action.quote;
-        this.emitChange();
-        break;
-      case LOGOUT_USER:
-        this._quote = null;
-        this.emitChange();
-        break;
-      default:
-        break;
-    };
-  }
-
-  get quote() {
-    return this._quote;
-  }
-}
-
-export default new QuoteStore();