Refactor SelectorItem in advanced settings

2 files changed, 58 insertions, 46 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 5c9be492a0..5a4b7b0d5a 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -18,44 +18,24 @@ import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 const MIN_MSSFIX_VALUE = 1000;
 const MAX_MSSFIX_VALUE = 1450;
-const PROTOCOLS: RelayProtocol[] = ['udp', 'tcp'];
 const UDP_PORTS = [1194, 1195, 1196, 1197, 1300, 1301, 1302];
 const TCP_PORTS = [80, 443];
 
-const PORT_ITEMS: { [key in RelayProtocol]: Array<ISelectorItem<number>> } = {
-  udp: UDP_PORTS.map(mapPortToSelectorItem),
-  tcp: TCP_PORTS.map(mapPortToSelectorItem),
-};
+type OptionalPort = number | undefined;
 
-const PROTOCOL_ITEMS: Array<ISelectorItem<RelayProtocol>> = PROTOCOLS.map((value) => ({
-  label: value.toUpperCase(),
-  value,
-}));
+type OptionalRelayProtocol = RelayProtocol | undefined;
 
 function mapPortToSelectorItem(value: number): ISelectorItem<number> {
   return { label: value.toString(), value };
 }
 
-function makeBridgeItems(): Array<ISelectorItem<BridgeState>> {
-  return [
-    {
-      label: messages.pgettext('advanced-settings-view', 'On'),
-      value: 'on',
-    },
-    {
-      label: messages.pgettext('advanced-settings-view', 'Off'),
-      value: 'off',
-    },
-  ];
-}
-
 interface IProps {
   enableIpv6: boolean;
   blockWhenDisconnected: boolean;
   protocol?: RelayProtocol;
   mssfix?: number;
   port?: number;
-  bridgeState?: BridgeState;
+  bridgeState: BridgeState;
   setBridgeState: (value: BridgeState) => void;
   setEnableIpv6: (value: boolean) => void;
   setBlockWhenDisconnected: (value: boolean) => void;
@@ -71,11 +51,53 @@ interface IState {
 }
 
 export default class AdvancedSettings extends Component<IProps, IState> {
-  private bridgeSelectorItems = makeBridgeItems();
+  private portItems: { [key in RelayProtocol]: Array<ISelectorItem<OptionalPort>> };
+  private protocolItems: Array<ISelectorItem<OptionalRelayProtocol>>;
+  private bridgeStateItems: Array<ISelectorItem<BridgeState>>;
 
   constructor(props: IProps) {
     super(props);
 
+    const automaticPort: ISelectorItem<OptionalPort> = {
+      label: messages.pgettext('advanced-settings-view', 'Automatic'),
+      value: undefined,
+    };
+
+    this.portItems = {
+      udp: [automaticPort].concat(UDP_PORTS.map(mapPortToSelectorItem)),
+      tcp: [automaticPort].concat(TCP_PORTS.map(mapPortToSelectorItem)),
+    };
+
+    this.protocolItems = [
+      {
+        label: messages.pgettext('advanced-settings-view', 'Automatic'),
+        value: undefined,
+      },
+      {
+        label: messages.pgettext('advanced-settings-view', 'TCP'),
+        value: 'tcp',
+      },
+      {
+        label: messages.pgettext('advanced-settings-view', 'UDP'),
+        value: 'udp',
+      },
+    ];
+
+    this.bridgeStateItems = [
+      {
+        label: messages.pgettext('advanced-settings-view', 'Automatic'),
+        value: 'auto',
+      },
+      {
+        label: messages.pgettext('advanced-settings-view', 'On'),
+        value: 'on',
+      },
+      {
+        label: messages.pgettext('advanced-settings-view', 'Off'),
+        value: 'off',
+      },
+    ];
+
     this.state = {
       persistedMssfix: props.mssfix,
       editedMssfix: props.mssfix,
@@ -155,7 +177,7 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                   <View style={styles.advanced_settings__content}>
                     <Selector
                       title={messages.pgettext('advanced-settings-view', 'Network protocols')}
-                      values={PROTOCOL_ITEMS}
+                      values={this.protocolItems}
                       value={this.props.protocol}
                       onSelect={this.onSelectProtocol}
                     />
@@ -171,7 +193,7 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                             portType: this.props.protocol.toUpperCase(),
                           },
                         )}
-                        values={PORT_ITEMS[this.props.protocol]}
+                        values={this.portItems[this.props.protocol]}
                         value={this.props.port}
                         onSelect={this.onSelectPort}
                       />
@@ -185,7 +207,7 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                       // TRANSLATORS: The title for the shadowsocks bridge selector section.
                       messages.pgettext('advanced-settings-view', 'Shadowsocks bridge')
                     }
-                    values={this.bridgeSelectorItems}
+                    values={this.bridgeStateItems}
                     value={this.props.bridgeState}
                     onSelect={this.onSelectBridgeState}
                   />
@@ -240,12 +262,8 @@ export default class AdvancedSettings extends Component<IProps, IState> {
     this.props.setRelayProtocolAndPort(this.props.protocol, port);
   };
 
-  private onSelectBridgeState = (bridgeState?: BridgeState) => {
-    if (bridgeState) {
-      this.props.setBridgeState(bridgeState);
-    } else {
-      this.props.setBridgeState('auto');
-    }
+  private onSelectBridgeState = (bridgeState: BridgeState) => {
+    this.props.setBridgeState(bridgeState);
   };
 
   private onMssfixChange = (mssfixString: string) => {
@@ -286,8 +304,8 @@ interface ISelectorItem<T> {
 interface ISelectorProps<T> {
   title: string;
   values: Array<ISelectorItem<T>>;
-  value?: T;
-  onSelect: (value?: T) => void;
+  value: T;
+  onSelect: (value: T) => void;
 }
 
 class Selector<T> extends Component<ISelectorProps<T>> {
@@ -295,12 +313,6 @@ class Selector<T> extends Component<ISelectorProps<T>> {
     return (
       <Cell.Section style={styles.advanced_settings__selector_section}>
         <Cell.SectionTitle>{this.props.title}</Cell.SectionTitle>
-        <SelectorCell
-          key={'auto'}
-          selected={this.props.value === undefined}
-          onSelect={this.props.onSelect}>
-          {messages.pgettext('advanced-settings-view', 'Automatic')}
-        </SelectorCell>
         {this.props.values.map((item, i) => (
           <SelectorCell
             key={i}
@@ -316,9 +328,9 @@ class Selector<T> extends Component<ISelectorProps<T>> {
 }
 
 interface ISelectorCell<T> {
-  value?: T;
+  value: T;
   selected: boolean;
-  onSelect: (value?: T) => void;
+  onSelect: (value: T) => void;
   children?: React.ReactText;
 }
 
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index e2565ec0e7..7933fd3384 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -48,7 +48,7 @@ export interface ISettingsReduxState {
   relayLocations: IRelayLocationRedux[];
   allowLan: boolean;
   enableIpv6: boolean;
-  bridgeState?: BridgeState;
+  bridgeState: BridgeState;
   blockWhenDisconnected: boolean;
   openVpn: {
     mssfix?: number;
@@ -72,7 +72,7 @@ const initialState: ISettingsReduxState = {
   relayLocations: [],
   allowLan: false,
   enableIpv6: true,
-  bridgeState: undefined,
+  bridgeState: 'auto',
   blockWhenDisconnected: false,
   openVpn: {},
 };
@@ -136,7 +136,7 @@ export default function(
     case 'UPDATE_BRIDGE_STATE':
       return {
         ...state,
-        bridgeState: action.bridgeState === 'auto' ? undefined : action.bridgeState,
+        bridgeState: action.bridgeState,
       };
 
     default: