Add backend mockup and wire it up with all components

5 files changed, 101 insertions, 16 deletions

diff --git a/app/actions/user.js b/app/actions/user.js
index 4fbd1c30d9..a809669a60 100644
--- a/app/actions/user.js
+++ b/app/actions/user.js
@@ -1,8 +1,23 @@
 import { createAction } from 'redux-actions';
 
-export default {
-  login: createAction('user.login', (account) => {
-    return { account };
-  })
+const loginSuccess = createAction('user.loginSuccess', (account) => {
+  return { account, loggedIn: true };
+});
+
+const loginFailure = createAction('user.loginFailure', (account, error) => {
+  return { account, error, loggedIn: false };
+});
+
+const login = (backend, account) => {
+  return async (dispatch) => {
+    try {
+      await backend.login(account);
+      dispatch(loginSuccess(account));
+    } catch(e) {
+      dispatch(loginFailure(account, e));
+    }
+  };
 };
 
+export default { login, loginSuccess, loginFailure };
+
diff --git a/app/app.js b/app/app.js
index d92e5e8fa8..4b85a79ffd 100644
--- a/app/app.js
+++ b/app/app.js
@@ -8,6 +8,9 @@ import path from 'path';
 import routes from './routes';
 import configureStore from './store';
 import Tray from './containers/Tray';
+import Backend from './lib/backend';
+
+const backend = new Backend();
 
 const iconPath = path.join(__dirname, 'assets/images/trayicon.png');
 const tray = new remote.Tray(iconPath);
@@ -20,10 +23,18 @@ const rootElement = document.querySelector(document.currentScript.getAttribute('
 // disable smart pinch.
 webFrame.setVisualZoomLevelLimits(1, 1);
 
+// helper method for router to pass backend down the component tree
+const createElement = (Component, props) => {
+  const newProps = { ...props, backend };
+  return (
+    <Component {...newProps} />
+  );
+};
+
 ReactDOM.render(
   <div>
     <Provider store={store}>
-      <Router history={routerHistory} routes={routes} />
+      <Router history={routerHistory} routes={routes} createElement={createElement} />
     </Provider>
     <Provider store={store}>
       <Tray handle={tray} history={routerHistory} />
diff --git a/app/components/Login.js b/app/components/Login.js
index e13086d3db..d503200a21 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -15,10 +15,7 @@ export default class Login extends Component {
   }
 
   handleLogin() {
-    const { onLogin } = this.props;
-    const username = this.refs.username.value;
-
-    onLogin({ username, loggedIn: true });
+    this.props.onLogin(this.props.backend, this.state.account);
   }
 
   handleCreateAccount() {
@@ -26,19 +23,17 @@ export default class Login extends Component {
   }
 
   handleInputChange(e) {
-    let val = e.target.value.replace(/[^0-9]/g, '');
+    const val = e.target.value.replace(/[^0-9]/g, '');
     this.setState({ account: val });
   }
 
   handleInputKeyUp(e) {
     if(e.which === 13) {
-      // enter pressed
+      this.handleLogin();
     }
   }
 
-  formattedAccount() {
-    const val = this.state.account;
-
+  formattedAccount(val) {
     // display number altogether when longer than 12
     if(val.length > 12) {
       return val;
@@ -62,7 +57,7 @@ export default class Login extends Component {
                        placeholder="0000 0000 0000" 
                        onChange={::this.handleInputChange}
                        onKeyUp={::this.handleInputKeyUp}
-                       value={this.formattedAccount()} />
+                       value={this.formattedAccount(this.state.account)} />
               </div>
             </div>
           </div>
diff --git a/app/lib/backend.js b/app/lib/backend.js
new file mode 100644
index 0000000000..33194c4325
--- /dev/null
+++ b/app/lib/backend.js
@@ -0,0 +1,61 @@
+import privateData from './private';
+
+/**
+ * Private data
+ */
+const { get: getImpl, set: setImpl } = privateData();
+
+/**
+ * Remote backend implementation
+ * 
+ * @class BackendImpl
+ */
+class BackendImpl {
+  constructor() {
+    this._account = null;
+    this._loggedIn = false;
+  }
+
+  get account() {
+    return this._account;
+  }
+
+  get loggedIn() {
+    return this._loggedIn;
+  }
+
+  login(account) {
+    return new Promise((resolve, reject) => {
+      // @TODO: Add login call
+      setTimeout(() => {
+        reject(new Error("Invalid account number."));
+      }, 2000);
+    });
+  }
+}
+
+/**
+ * Backend implementation
+ * 
+ * @export
+ * @class Backend
+ */
+export default class Backend {
+
+  constructor() {
+    setImpl(this, new BackendImpl());
+  }
+
+  get account() { 
+    return getImpl(this).account; 
+  }
+
+  get loggedIn() { 
+    return getImpl(this).loggedIn;
+  }
+
+  login(account) {
+    return getImpl(this).login(account);
+  }
+
+};
diff --git a/app/reducers/user.js b/app/reducers/user.js
index 340a73127f..3e3565a15a 100644
--- a/app/reducers/user.js
+++ b/app/reducers/user.js
@@ -3,7 +3,10 @@ import { handleActions } from 'redux-actions';
 import actions from '../actions/user';
 
 export default handleActions({
-  [actions.login]: (state, action) => {
+  [actions.loginSuccess]: (state, action) => {
+    return { ...state, ...action.payload };
+  },
+  [actions.loginFailure]: (state, action) => {
     return { ...state, ...action.payload };
   }
 }, {});