Redid the settings state and inlined a few components

1 files changed, 85 insertions, 72 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>;
-}