Move the hardcoded relay endpoint data to the Connect component

9 files changed, 55 insertions, 29 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 7d6269655a..66696fef64 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -10,6 +10,7 @@ import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
 import type { ServerInfo } from '../lib/backend';
 import type { HeaderBarStyle } from './HeaderBar';
 import type { ConnectionReduxState } from '../redux/connection/reducers';
+import type { RelayEndpoint } from '../lib/ipc-facade';
 
 export type ConnectProps = {
   accountExpiry: string,
@@ -17,7 +18,7 @@ export type ConnectProps = {
   preferredServer: string,
   onSettings: () => void,
   onSelectLocation: () => void,
-  onConnect: (address: string) => void,
+  onConnect: (relayEndpoint: RelayEndpoint) => void,
   onCopyIP: () => void,
   onDisconnect: () => void,
   onExternalLink: (type: string) => void,
@@ -301,7 +302,12 @@ export default class Connect extends Component {
     const preferredServer = this.props.preferredServer;
     const serverInfo = this.props.getServerInfo(preferredServer);
     if(serverInfo) {
-      this.props.onConnect(serverInfo.address);
+      // TODO: Don't use these hardcoded values
+      this.props.onConnect({
+        host: serverInfo.address,
+        port: 1300,
+        protocol: 'udp',
+      });
     }
   }
 
diff --git a/app/containers/ConnectPage.js b/app/containers/ConnectPage.js
index ceb16054ce..d629e83fc7 100644
--- a/app/containers/ConnectPage.js
+++ b/app/containers/ConnectPage.js
@@ -21,7 +21,7 @@ const mapDispatchToProps = (dispatch, props) => {
   return {
     onSettings: () => dispatch(push('/settings')),
     onSelectLocation: () => dispatch(push('/select-location')),
-    onConnect: (addr) => connect(backend, addr),
+    onConnect: (relayEndpoint) => connect(backend, relayEndpoint),
     onCopyIP: () => copyIPAddress(),
     onDisconnect: () => disconnect(backend),
     onExternalLink: (type) => shell.openExternal(links[type]),
diff --git a/app/containers/SelectLocationPage.js b/app/containers/SelectLocationPage.js
index 824274c15c..c11c4b59dd 100644
--- a/app/containers/SelectLocationPage.js
+++ b/app/containers/SelectLocationPage.js
@@ -18,7 +18,13 @@ const mapDispatchToProps = (dispatch, props) => {
       // add delay to let the map load
       setTimeout(() => {
         settings.updateSettings({ preferredServer });
-        backend.connect(server.address);
+
+        // TODO: Don't use these hardcoded values
+        backend.connect({
+          host: server.address,
+          port: 1300,
+          protocol: 'udp',
+        });
       }, 600);
     }
   };
diff --git a/app/lib/backend.js b/app/lib/backend.js
index 9d1fb21d35..b17b163a85 100644
--- a/app/lib/backend.js
+++ b/app/lib/backend.js
@@ -11,6 +11,7 @@ import { push } from 'react-router-redux';
 
 import type { BackendState } from './ipc-facade';
 import type { ConnectionState } from '../redux/connection/reducers';
+import type { RelayEndpoint } from './ipc-facade';
 
 export type EventType = 'connect' | 'connecting' | 'disconnect' | 'login' | 'logging' | 'logout' | 'updatedIp' | 'updatedLocation' | 'updatedReachability';
 export type ErrorType = 'NO_CREDIT' | 'NO_INTERNET' | 'INVALID_ACCOUNT';
@@ -227,17 +228,16 @@ export class Backend {
       });
   }
 
-  connect(addr: string): Promise<void> {
+  connect(relayEndpoint: RelayEndpoint): Promise<void> {
 
-    this._store.dispatch(connectionActions.connectingTo(addr));
+    this._store.dispatch(connectionActions.connectingTo(relayEndpoint));
 
-    // TODO: Don't hardcode these values
-    return this._ipc.setCustomRelay(addr, 1300, 'udp')
+    return this._ipc.setCustomRelay(relayEndpoint)
       .then( () => {
         return this._ipc.connect();
       })
       .catch(e => {
-        log.info('Failed connecting to', addr, e);
+        log.info('Failed connecting to', relayEndpoint.host, '-', e.message);
         this._store.dispatch(connectionActions.disconnected());
       });
   }
diff --git a/app/lib/ipc-facade.js b/app/lib/ipc-facade.js
index 0a9ceebf65..736d4fc31c 100644
--- a/app/lib/ipc-facade.js
+++ b/app/lib/ipc-facade.js
@@ -25,13 +25,19 @@ export type BackendState = {
   state: SecurityState,
   target_state: SecurityState,
 };
+export type RelayEndpoint = {
+  host: string,
+  port: number,
+  protocol: 'tcp' | 'udp',
+};
+
 
 export interface IpcFacade {
   setConnectionString(string): void,
   getAccountData(AccountToken): Promise<AccountData>,
   getAccount(): Promise<?AccountToken>,
   setAccount(accountToken: AccountToken): Promise<void>,
-  setCustomRelay(host: string, port: number, protocol: 'udp' | 'tcp'): Promise<void>,
+  setCustomRelay(RelayEndpoint): Promise<void>,
   connect(): Promise<void>,
   disconnect(): Promise<void>,
   getIp(): Promise<Ip>,
@@ -86,12 +92,8 @@ export class RealIpc implements IpcFacade {
     return;
   }
 
-  setCustomRelay(host: string, port: number, protocol: 'udp' | 'tcp'): Promise<void> {
-    return this._ipc.send('set_custom_relay', {
-      host,
-      port,
-      protocol,
-    })
+  setCustomRelay(relayEndpoint: RelayEndpoint): Promise<void> {
+    return this._ipc.send('set_custom_relay', [relayEndpoint])
       .then(this._ignoreResponse);
   }
 
diff --git a/app/redux/connection/actions.js b/app/redux/connection/actions.js
index eebc503a18..73a94fcc06 100644
--- a/app/redux/connection/actions.js
+++ b/app/redux/connection/actions.js
@@ -3,11 +3,12 @@
 import { clipboard } from 'electron';
 
 import type { Backend } from '../../lib/backend';
+import type { RelayEndpoint } from '../../lib/ipc-facade';
 import type { ReduxGetState, ReduxDispatch } from '../store';
 import type { Coordinate2d } from '../../types';
 
 
-const connect = (backend: Backend, addr: string) => () => backend.connect(addr);
+const connect = (backend: Backend, relay: RelayEndpoint) => () => backend.connect(relay);
 const disconnect = (backend: Backend) => () => backend.disconnect();
 const copyIPAddress = () => {
   return (_dispatch: ReduxDispatch, getState: ReduxGetState) => {
@@ -21,7 +22,7 @@ const copyIPAddress = () => {
 
 type ConnectingAction = {
   type: 'CONNECTING',
-  serverAddress?: string,
+  relayEndpoint?: RelayEndpoint,
 };
 type ConnectedAction = {
   type: 'CONNECTED',
@@ -62,10 +63,10 @@ export type ConnectionAction = NewPublicIpAction
                                 | OnlineAction
                                 | OfflineAction;
 
-function connectingTo(serverAddress: string): ConnectingAction {
+function connectingTo(relayEndpoint: RelayEndpoint): ConnectingAction {
   return {
     type: 'CONNECTING',
-    serverAddress: serverAddress,
+    relayEndpoint: relayEndpoint,
   };
 }
 
diff --git a/app/redux/connection/reducers.js b/app/redux/connection/reducers.js
index 8f389df159..8adfac594a 100644
--- a/app/redux/connection/reducers.js
+++ b/app/redux/connection/reducers.js
@@ -62,8 +62,8 @@ function onConnecting(state, action) {
     status: 'connecting',
   };
 
-  if (action.serverAddress) {
-    newState.serverAddress = action.serverAddress;
+  if (action.relayEndpoint) {
+    newState.serverAddress = action.relayEndpoint.host;
   }
   return { ...state, ...newState};
 }
diff --git a/test/components/Connect.spec.js b/test/components/Connect.spec.js
index 2a385fed5f..30228fc4c6 100644
--- a/test/components/Connect.spec.js
+++ b/test/components/Connect.spec.js
@@ -94,7 +94,7 @@ describe('components/Connect', () => {
 
   it('invokes the onConnect prop', (done) => {
     const component = renderNotConnected({
-      onConnect: done,
+      onConnect: () => done(),
     });
     const connectButton = component.find('.button .button--positive');
 
diff --git a/test/connect.spec.js b/test/connect.spec.js
index 98aba67356..bb6ac41526 100644
--- a/test/connect.spec.js
+++ b/test/connect.spec.js
@@ -13,7 +13,9 @@ describe('connect', () => {
     const chain = new IpcChain(mockIpc);
     chain.require('setCustomRelay')
       .withInputValidation(
-        (relayHostName) => expect(relayHostName).to.equal('example.com')
+        (relayEndpoint) => {
+          expect(relayEndpoint).to.equal(arbitraryRelay);
+        },
       )
       .done();
 
@@ -22,7 +24,7 @@ describe('connect', () => {
 
     chain.onSuccessOrFailure(done);
 
-    store.dispatch(connectionActions.connect(backend, 'example.com'));
+    store.dispatch(connectionActions.connect(backend, arbitraryRelay));
   });
 
   it('should set the connection state to \'disconnected\' on failed attempts', (done) => {
@@ -35,7 +37,7 @@ describe('connect', () => {
 
     expect(store.getState().connection.status).not.to.equal('disconnected');
 
-    store.dispatch(connectionActions.connect(backend, 'example.com'));
+    store.dispatch(connectionActions.connect(backend, arbitraryRelay));
 
 
     checkNextTick(() => {
@@ -45,13 +47,17 @@ describe('connect', () => {
 
   it('should update the state with the server address', () => {
     const { store, backend } = setupBackendAndStore();
-    const arbitraryString = 'www.example.com';
+    const relay = {
+      host: 'www.example.com',
+      port: 1,
+      protocol: 'udp',
+    };
 
-    return backend.connect(arbitraryString)
+    return backend.connect(relay)
       .then( () => {
         const state = store.getState().connection;
         expect(state.status).to.equal('connecting');
-        expect(state.serverAddress).to.equal(arbitraryString);
+        expect(state.serverAddress).to.equal('www.example.com');
       });
   });
 
@@ -81,3 +87,8 @@ describe('connect', () => {
   });
 });
 
+const arbitraryRelay = {
+  host: 'www.example.com',
+  port: 1,
+  protocol: 'udp',
+};