- Handle app flow in app.js

- Wire up connect() to "Secure connection" button
- Refactor code
- Drop promises in Backend in favor of event based approach

1 files changed, 18 insertions, 4 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 578460f76b..0898f28a44 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,18 +1,32 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { servers } from '../constants';
 
 export default class Connect extends Component {
+  
+  static propTypes = {
+    settings: PropTypes.object.isRequired,
+    onConnect: PropTypes.func.isRequired,
+    onDisconnect: PropTypes.func.isRequired
+  };
 
   onSettings() {
     this.props.router.push('/settings');
   }
 
-  openLocationPicker() {
+  onSelectLocation() {
     this.props.router.push('/select-location');
   }
 
+  onConnect() {
+    this.props.onConnect();
+  }
+
+  onDisconnect() {
+    this.props.onDisconnect();
+  }
+
   serverName(key) {
     switch(key) {
       case 'fastest': return 'Fastest';
@@ -35,7 +49,7 @@ export default class Connect extends Component {
               <div className="connect__footer">
                 
                 <div className="connect__row">
-                  <div className="connect__server" onClick={ ::this.openLocationPicker }>
+                  <div className="connect__server" onClick={ ::this.onSelectLocation }>
                     <div className="connect__server-label">Connect to</div>                    
                     <div className="connect__server-value">
 
@@ -58,7 +72,7 @@ export default class Connect extends Component {
                 </div>
 
                 <div className="connect__row">
-                  <button className="connect__secure-button">Secure my connection</button>
+                  <button className="connect__secure-button" onClick={ ::this.onConnect }>Secure my connection</button>
                 </div>
 
               </div>