Redid the settings state and inlined a few components

12 files changed, 134 insertions, 112 deletions

diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index 1ba25a924f..37eac1cb5b 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -4,87 +4,112 @@ import React from 'react';
 import { Layout, Container, Header } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 
-type Props = {
-  onClose: () => void,
-  protocol: string,
-  port: string|number,
-  updateConstraints: (string, string|number) => void,
-};
-export function AdvancedSettings(props: Props) {
+export class AdvancedSettings extends React.Component {
 
-  let portSelector = null;
-  let protocol = props.protocol.toUpperCase();
+  props: {
+    onClose: () => void,
+    protocol: string,
+    port: string|number,
+    updateConstraints: (string, string|number) => void,
+  };
 
-  if (protocol === 'AUTOMATIC') {
-    protocol = 'Automatic';
-  } else {
-    portSelector = createPortSelector(props);
-  }
+  render() {
+    let portSelector = null;
+    let protocol = this.props.protocol.toUpperCase();
 
-  return <BaseLayout onClose={ props.onClose }>
+    if (protocol === 'AUTOMATIC') {
+      protocol = 'Automatic';
+    } else {
+      portSelector = this._createPortSelector();
+    }
 
-    <Selector
-      title={ 'Network protocols' }
-      values={ ['Automatic', 'UDP', 'TCP'] }
-      value={ protocol }
-      onSelect={ protocol => {
-        // $FlowFixMe
-        props.updateConstraints(protocol, 'Automatic');
-      }}/>
+    return <BaseLayout onClose={ this.props.onClose }>
 
-    <div className="settings__cell-spacer"></div>
+      <Selector
+        title={ 'Network protocols' }
+        values={ ['Automatic', 'UDP', 'TCP'] }
+        value={ protocol }
+        onSelect={ protocol => {
+          this.props.updateConstraints(protocol, 'Automatic');
+        }}/>
 
-    { portSelector }
+      <div className="settings__cell-spacer"></div>
 
-  </BaseLayout>;
+      { portSelector }
 
-}
+    </BaseLayout>;
+  }
 
-function createPortSelector(props) {
-  const protocol = props.protocol.toUpperCase();
-  const ports = protocol === 'TCP'
-    ? ['Automatic', 80, 443]
-    : ['Automatic', 1194, 1195, 1196, 1197, 1300, 1301, 1302];
+  _createPortSelector() {
+    const protocol = this.props.protocol.toUpperCase();
+    const ports = protocol === 'TCP'
+      ? ['Automatic', 80, 443]
+      : ['Automatic', 1194, 1195, 1196, 1197, 1300, 1301, 1302];
 
-  return <Selector
-    title={ protocol + ' port' }
-    values={ ports }
-    value={ props.port }
-    onSelect={ port => {
-      props.updateConstraints(protocol, port);
-    }} />;
+    return <Selector
+      title={ protocol + ' port' }
+      values={ ports }
+      value={ this.props.port }
+      onSelect={ port => {
+        this.props.updateConstraints(protocol, port);
+      }} />;
+  }
 }
 
-function Selector(props) {
-  return <div>
-    <Cell
-      label={ props.title }
-    />
 
-    { props.values.map(value => renderCell(value)) }
-  </div>;
+class Selector extends React.Component {
 
-  function renderCell(value) {
-    const selected = value === props.value;
+  props: {
+    title: string,
+    values: Array<*>,
+    value: *,
+    onSelect: (*) => void,
+  }
+
+  render() {
+    return <div>
+      <div className="settings__cell">
+        <div className="settings__cell-label">{ this.props.title }</div>
+      </div>
+
+      { this.props.values.map(value => this._renderCell(value)) }
+    </div>;
+  }
 
-    let className = 'settings__sub-cell';
-    let tick = null;
+  _renderCell(value) {
+    const selected = value === this.props.value;
     if (selected) {
-      className = 'settings__cell--selected';
-      tick = <img src='./assets/images/icon-tick.svg' />;
+      return this._renderSelectedCell(value);
+    } else {
+      return this._renderUnselectedCell(value);
     }
-    const label = <div className={ 'settings__sub-cell--label' }>
-      { tick }
-      { value }
+  }
+
+  _renderSelectedCell(value) {
+    const onCellClick = () => this.props.onSelect(value);
+
+    return <div
+      key={ value }
+      className={ 'settings__cell--selected settings__cell' }
+      onClick={ onCellClick } >
+      <div className="settings__cell-label">
+        <div className={ 'settings__sub-cell--label' }>
+          <img src='./assets/images/icon-tick.svg' />
+          { value }
+        </div>
+      </div>
     </div>;
+  }
 
-    const onCellClick = () => props.onSelect(value);
+  _renderUnselectedCell(value) {
+    const onCellClick = () => this.props.onSelect(value);
 
-    return <Cell
+    return <div
       key={ value }
-      label={ label }
-      className={ className }
-      onClick={ onCellClick } />;
+      className={ 'settings__cell settings__sub-cell' }
+      onClick={ onCellClick } >
+      <div className="settings__cell-label">{ value }</div>
+    </div>;
   }
 }
 
@@ -113,15 +138,3 @@ function BaseLayout(props) {
   </Layout>;
 }
 
-function Cell(props) {
-
-  const className = props.className || '';
-  return <div
-    className={ className + ' settings__cell' }
-    onClick={ props.onClick || null } >
-    <div className="settings__cell-label">{ props.label }</div>
-    <div className="settings__cell-value">
-      { props.value || null }
-    </div>
-  </div>;
-}
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 531174b464..3b4029fe76 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -104,8 +104,7 @@ export default class Connect extends Component {
       };
     }
 
-    return this.props.getServerInfo(relayConstraints.host.only);
-
+    return this.props.getServerInfo(relayConstraints.host);
   }
 
   renderMap(): React.Element<*> {
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index c5180a3ffa..c6325ae2a5 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -25,10 +25,7 @@ export default class SelectLocation extends Component {
 
   isSelected(server: string) {
     const { host } = this.props.settings.relayConstraints;
-    if (host === 'any') {
-      return false;
-    }
-    return server === host.only;
+    return server === host;
   }
 
   drawCell(key: string, name: string, icon: ?string, onClick: (e: Event) => void): React.Element<*> {
diff --git a/app/containers/AdvancedSettingsPage.js b/app/containers/AdvancedSettingsPage.js
index 22dbdf8ec1..ecb78eb218 100644
--- a/app/containers/AdvancedSettingsPage.js
+++ b/app/containers/AdvancedSettingsPage.js
@@ -5,17 +5,18 @@ import settingsActions from '../redux/settings/actions';
 import log from 'electron-log';
 
 const mapStateToProps = (state) => {
+  const contraints = state.settings.relayConstraints;
   return {
-    protocol: tryOrElse( () => state.settings.relayConstraints.tunnel.openvpn.protocol.only, 'Automatic'),
-    port: tryOrElse( () => state.settings.relayConstraints.tunnel.openvpn.port.only, 'Automatic'),
+    protocol: anyToAuto(contraints.protocol),
+    port: anyToAuto(contraints.port),
   };
 };
 
-function tryOrElse(toTry, orElse) {
-  try {
-    return toTry() || orElse;
-  } catch (e) {
-    return orElse;
+function anyToAuto(constraint) {
+  if (constraint === 'any') {
+    return 'Automatic';
+  } else {
+    return constraint;
   }
 }
 
@@ -42,7 +43,10 @@ const mapDispatchToProps = (dispatch, props) => {
       };
 
       backend.updateRelayConstraints(update)
-        .then( () => dispatch(settingsActions.updateRelay(update)))
+        .then( () => dispatch(settingsActions.updateRelay({
+          port: typeof(portConstraint) === 'object' ? portConstraint.only : portConstraint,
+          protocol: typeof(protConstraint) === 'object' ? protConstraint.only : protConstraint,
+        })))
         .catch( e => log.error('Failed updating relay constraints', e.message));
     },
   };
diff --git a/app/containers/SelectLocationPage.js b/app/containers/SelectLocationPage.js
index 9e5551130c..7ca2f1eb0a 100644
--- a/app/containers/SelectLocationPage.js
+++ b/app/containers/SelectLocationPage.js
@@ -22,7 +22,9 @@ const mapDispatchToProps = (dispatch, props) => {
         };
 
         backend.updateRelayConstraints(update)
-          .then( () => dispatch(settingsActions.updateRelay(update)))
+          .then( () => dispatch(settingsActions.updateRelay({
+            host: preferredServer,
+          })))
           .then( () => backend.connect())
           .catch( e => log.error('Failed updating relay constraints', e.message));
 
diff --git a/app/lib/backend.js b/app/lib/backend.js
index 89a895b4c4..7e5e21708f 100644
--- a/app/lib/backend.js
+++ b/app/lib/backend.js
@@ -317,11 +317,13 @@ export class Backend {
 
         const host = constraints.host === 'any'
           ? defaultServer
-          : constraints.host || defaultServer;
+          : constraints.host.only || defaultServer;
 
+        const openvpn = constraints.tunnel.openvpn;
         this._store.dispatch(settingsActions.updateRelay({
           host: host,
-          tunnel: constraints.tunnel,
+          port: this._apiToReduxConstraints(openvpn.port),
+          protocol: this._apiToReduxConstraints(openvpn.protocol),
         }));
       })
       .catch( e => {
@@ -329,6 +331,14 @@ export class Backend {
       });
   }
 
+  _apiToReduxConstraints(constraint: *): * {
+    if (typeof(constraint) === 'object') {
+      return constraint.only;
+    } else {
+      return constraint;
+    }
+  }
+
   /**
    * Start reachability monitoring for online/offline detection
    * This is currently done via HTML5 APIs but will be replaced later
diff --git a/app/lib/ipc-facade.js b/app/lib/ipc-facade.js
index 9f3f900331..7a71861ae5 100644
--- a/app/lib/ipc-facade.js
+++ b/app/lib/ipc-facade.js
@@ -25,7 +25,7 @@ export type BackendState = {
   state: SecurityState,
   target_state: SecurityState,
 };
-export type RelayConstraints = {
+type RelayConstraints = {
   host: 'any' | { only: string },
   tunnel: {
     openvpn: {
diff --git a/app/redux/settings/actions.js b/app/redux/settings/actions.js
index 041da76389..6bb6b0ed71 100644
--- a/app/redux/settings/actions.js
+++ b/app/redux/settings/actions.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { RelayConstraints } from '../../lib/ipc-facade';
+import type { RelayConstraints } from './reducers';
 
 export type UpdateRelayAction = {
   type: 'UPDATE_RELAY',
diff --git a/app/redux/settings/reducers.js b/app/redux/settings/reducers.js
index 665a4c465e..e16f25a068 100644
--- a/app/redux/settings/reducers.js
+++ b/app/redux/settings/reducers.js
@@ -3,19 +3,22 @@
 import { defaultServer } from '../../config';
 
 import type { ReduxAction } from '../store';
-import type { RelayConstraints } from '../../lib/ipc-facade';
+
+export type RelayConstraints = {
+    host: string,
+    port: 'any' | number,
+    protocol: 'any' | 'tcp' | 'udp',
+};
 
 export type SettingsReduxState = {
-  relayConstraints: RelayConstraints,
+  relayConstraints: RelayConstraints
 };
 
 const initialState: SettingsReduxState = {
   relayConstraints: {
-    host: { only: defaultServer },
-    tunnel: { openvpn: {
-      port: 'any',
-      protocol: 'any',
-    }},
+    host: defaultServer,
+    port: 'any',
+    protocol: 'any',
   },
 };
 
diff --git a/test/components/Connect.spec.js b/test/components/Connect.spec.js
index 5c342bff12..4b84b3b8da 100644
--- a/test/components/Connect.spec.js
+++ b/test/components/Connect.spec.js
@@ -108,7 +108,7 @@ describe('components/Connect', () => {
     component.setProps({
       settings: {
         relayConstraints: {
-          host: { only: 'se1.mullvad.net' },
+          host: 'se1.mullvad.net',
         },
       },
     });
@@ -187,11 +187,9 @@ const defaultProps = {
   accountExpiry: '',
   settings: {
     relayConstraints: {
-      host: { only: 'www.example.com' },
-      tunnel: { openvpn: {
-        port: 'any',
-        protocol: 'any',
-      }},
+      host: 'www.example.com',
+      port: 'any',
+      protocol: 'any',
     },
   },
   connection: defaultConnection,
diff --git a/test/components/SelectLocation.spec.js b/test/components/SelectLocation.spec.js
index a3565a6704..28c9299807 100644
--- a/test/components/SelectLocation.spec.js
+++ b/test/components/SelectLocation.spec.js
@@ -12,10 +12,8 @@ describe('components/SelectLocation', () => {
   const state: SettingsReduxState = {
     relayConstraints: {
       host: 'any',
-      tunnel: { openvpn: {
-        port: 'any',
-        protocol: 'any',
-      }},
+      port: 'any',
+      protocol: 'any',
     },
   };
 
diff --git a/test/components/Settings.spec.js b/test/components/Settings.spec.js
index 2f562051b5..85fd72ece5 100644
--- a/test/components/Settings.spec.js
+++ b/test/components/Settings.spec.js
@@ -34,10 +34,8 @@ describe('components/Settings', () => {
   const settingsState: SettingsReduxState = {
     relayConstraints: {
       host: 'any',
-      tunnel: { openvpn: {
-        port: 'any',
-        protocol: 'any',
-      }},
+      port: 'any',
+      protocol: 'any',
     },
   };