Add settings modal with speed limit presets

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

@@ -0,0 +1,120 @@
+import classnames from 'classnames';
+import React from 'react';
+
+import EventTypes from '../../constants/EventTypes';
+import Modal from './Modal';
+import SettingsSpeedLimit from './SettingsSpeedLimit';
+import SettingsStore from '../../stores/SettingsStore';
+
+const METHODS_TO_BIND = [
+  'handleSettingsChange',
+  'handleSaveSettingsClick',
+  'handleSettingsFetchRequestSuccess'
+];
+
+export default class AddTorrents extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      settings: {
+        speedLimits: {
+          download: null,
+          upload: null
+        }
+      }
+    };
+
+    METHODS_TO_BIND.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
+  componentDidMount() {
+    SettingsStore.listen(EventTypes.SETTINGS_FETCH_REQUEST_SUCCESS, this.handleSettingsFetchRequestSuccess);
+    SettingsStore.fetchSettings(EventTypes.SETTINGS_FETCH_REQUEST_ERROR, this.handleSettingsFetchRequestError);
+  }
+
+  componentWillUnmount() {
+    SettingsStore.unlisten(EventTypes.SETTINGS_FETCH_REQUEST_SUCCESS, this.handleSettingsFetchRequestSuccess);
+  }
+
+  getActions() {
+    let icon = null;
+    let primaryButtonText = 'Add Torrent';
+
+    if (this.state.isAddingTorrents) {
+      icon = <LoadingIndicatorDots viewBox="0 0 32 32" />;
+      primaryButtonText = 'Adding...';
+    }
+
+    return [
+      {
+        clickHandler: null,
+        content: 'Cancel',
+        triggerDismiss: true,
+        type: 'secondary'
+      },
+      {
+        clickHandler: this.handleSaveSettingsClick,
+        content: 'Save Settings',
+        triggerDismiss: false,
+        type: 'primary'
+      }
+    ];
+  }
+
+  handleSaveSettingsClick() {
+    SettingsStore.saveSettings(this.state.settings);
+  }
+
+  handleSettingsFetchRequestError() {
+    console.log(error);
+  }
+
+  handleSettingsFetchRequestSuccess() {
+    this.setState({
+      settings: SettingsStore.getSettings()
+    });
+  }
+
+  handleSettingsChange(changedSettings) {
+    let settings = this.mergeObjects(this.state.settings, changedSettings);
+    this.setState({settings});
+  }
+
+  mergeObjects(objA, objB) {
+    Object.keys(objB).forEach((key) => {
+      if (!objB.hasOwnProperty(key) || objB[key] == null) {
+        return;
+      }
+
+      // If it's an object, then recursive merge.
+      if (!Array.isArray(objB[key]) && !Array.isArray(objB[key]) && typeof objA[key] === 'object' && typeof objB[key] === 'object') {
+        objA[key] = this.mergeObjects(objA[key], objB[key]);
+      } else {
+        objA[key] = objB[key];
+      }
+    });
+
+    return objA;
+  }
+
+  render() {
+    let tabs = {
+      'speed-limit': {
+        content: (
+          <SettingsSpeedLimit onSettingsChange={this.handleSettingsChange}
+            settings={this.state.settings} />
+        ),
+        label: 'Speed Limits'
+      }
+    };
+
+    return (
+      <Modal actions={this.getActions()} classNames="modal--large"
+        heading="Settings" orientation="vertical" dismiss={this.props.dismiss}
+        tabs={tabs} />
+    );
+  }
+}