Add toggle for DHT

client/source/scripts/components/modals/SettingsModal.js

@@ -10,10 +10,11 @@ import SettingsStore from '../../stores/SettingsStore';
 import StorageTab from '../settings/StorageTab';
 
 const METHODS_TO_BIND = [
+  'handleClientSettingsChange',
+  'handleCustomsSettingChange',
+  'handleFloodSettingsChange',
   'handleSaveSettingsClick',
   'handleSaveSettingsError',
-  'handleClientSettingsChange',
-  'handleFloodSettingsChange',
   'handleSettingsStoreChange'
 ];
 
@@ -80,9 +81,14 @@ export default class SettingsModal extends React.Component {
     ];
   }
 
-  handleSaveSettingsClick() {
-    this.setState({isSavingSettings: true});
+  handleCustomsSettingChange(data) {
+    this.setState({
+      changedClientSettings: this.mergeObjects(this.state.changedClientSettings,
+        {[data.id]: {...data, overrideLocalSetting: true}})
+    });
+  }
 
+  handleSaveSettingsClick() {
     let floodSettings = Object.keys(this.state.changedFloodSettings).map((settingsKey) =>  {
       return {
         id: settingsKey,
@@ -91,12 +97,17 @@ export default class SettingsModal extends React.Component {
     });
 
     let clientSettings = Object.keys(this.state.changedClientSettings).map((settingsKey) =>  {
-      return {
-        id: settingsKey,
-        data: this.state.changedClientSettings[settingsKey]
-      };
+      let data = this.state.changedClientSettings[settingsKey];
+
+      if (data.overrideLocalSetting) {
+        return data;
+      }
+
+      return {id: settingsKey, data};
     });
 
+    this.setState({isSavingSettings: true});
+
     SettingsStore.saveFloodSettings(floodSettings, {dismissModal: true, notify: true});
     SettingsStore.saveClientSettings(clientSettings, {dismissModal: true, notify: true});
   }
@@ -161,6 +172,7 @@ export default class SettingsModal extends React.Component {
       connectivity: {
         content: ConnectivityTab,
         props: {
+          onCustomSettingsChange: this.handleCustomsSettingChange,
           onClientSettingsChange: this.handleClientSettingsChange,
           settings: this.state.clientSettings
         },

client/source/scripts/components/settings/ConnectivityTab.js

@@ -4,11 +4,38 @@ import React from 'react';
 import Checkbox from '../forms/Checkbox';
 import SettingsTab from './SettingsTab';
 
+const METHODS_TO_BIND = ['handleDHTToggle'];
+
 export default class ConnectivityTab extends SettingsTab {
   constructor() {
     super(...arguments);
 
     this.state = {};
+
+    METHODS_TO_BIND.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
+  getDHTEnabledValue() {
+    if (this.state.dhtEnabled != null) {
+      return this.state.dhtEnabled;
+    }
+
+    return this.props.settings.dhtStats.dht === 'auto';
+  }
+
+  handleDHTToggle() {
+    let dhtEnabled = !this.getDHTEnabledValue();
+    let dhtEnabledString = dhtEnabled ? 'auto' : 'disable';
+
+    this.setState({dhtEnabled});
+    this.props.onCustomSettingsChange({
+      id: 'dht',
+      data: [dhtEnabledString],
+      overrideID: 'dhtStats',
+      overrideData: {dht: dhtEnabledString}
+    });
   }
 
   render() {
@@ -56,6 +83,13 @@ export default class ConnectivityTab extends SettingsTab {
                 onChange={this.handleClientSettingFieldChange.bind(this, 'dhtPort')}
                 value={this.getFieldValue('dhtPort')} />
             </div>
+            <div className="form__column form__column--auto  form__column--unlabled">
+              <Checkbox
+                checked={this.getDHTEnabledValue()}
+                onChange={this.handleDHTToggle}>
+                Enabled
+              </Checkbox>
+            </div>
           </div>
         </div>
         <div className="form__section">