Delay URL preview saving until the save button is pressed

Signed-off-by: Travis Ralston <travpc@gmail.com>

src/components/views/elements/SettingsFlag.js

@@ -27,22 +27,45 @@ module.exports = React.createClass({
         label: React.PropTypes.string, // untranslated
         onChange: React.PropTypes.func,
         isExplicit: React.PropTypes.bool,
+        manualSave: React.PropTypes.bool,
 
         // If group is supplied, then this will create a radio button instead.
         group: React.PropTypes.string,
         value: React.PropTypes.any, // the value for the radio button
     },
 
+    getInitialState: function() {
+        return {
+            value: SettingsStore.getValueAt(
+                this.props.level,
+                this.props.name,
+                this.props.roomId,
+                this.props.isExplicit,
+            ),
+        };
+    },
+
     onChange: function(e) {
         if (this.props.group && !e.target.checked) return;
 
         const newState = this.props.group ? this.props.value : e.target.checked;
-        SettingsStore.setValue(this.props.name, this.props.roomId, this.props.level, newState);
+        if (!this.props.manualSave) this.save(newState);
+        else this.setState({ value: newState });
         if (this.props.onChange) this.props.onChange(newState);
     },
 
+    save: function(val = null) {
+        SettingsStore.setValue(this.props.name, this.props.roomId, this.props.level, val ? val : this.state.value);
+    },
+
     render: function() {
-        const val = SettingsStore.getValueAt(this.props.level, this.props.name, this.props.roomId, this.props.isExplicit);
+        const value = this.props.manualSave ? this.state.value : SettingsStore.getValueAt(
+            this.props.level,
+            this.props.name,
+            this.props.roomId,
+            this.props.isExplicit,
+        );
+
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
 
         let label = this.props.label;
@@ -54,7 +77,7 @@ module.exports = React.createClass({
         let checkbox = (
             <input id={id}
                    type="checkbox"
-                   defaultChecked={val}
+                   defaultChecked={value}
                    onChange={this.onChange}
                    disabled={!canChange}
             />
@@ -65,7 +88,7 @@ module.exports = React.createClass({
                        type="radio"
                        name={this.props.group}
                        value={this.props.value}
-                       checked={val === this.props.value}
+                       checked={value === this.props.value}
                        onChange={this.onChange}
                        disabled={!canChange}
                 />

src/components/views/room_settings/UrlPreviewSettings.js

@@ -29,8 +29,7 @@ module.exports = React.createClass({
     },
 
     saveSettings: function() {
-        // TODO: {Travis} move toggle logic here instead of being 'live'
+        return [this.refs.urlPreviewsRoom.save(), this.refs.urlPreviewsSelf.save()];
-        return [];
     },
 
     render: function() {
@@ -48,15 +47,16 @@ module.exports = React.createClass({
             );
         }
 
-        // TODO: {Travis} This needs to be an explicit true/false for "room" only.
         let previewsForRoom = null;
         if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
             previewsForRoom = (
                 <label>
                     <SettingsFlag name="urlPreviewsEnabled"
-                                      level={SettingLevel.ROOM}
+                                  level={SettingLevel.ROOM}
-                                      roomId={this.props.room.roomId}
+                                  roomId={this.props.room.roomId}
-                                      isExplicit={true} />
+                                  isExplicit={true}
+                                  manualSave={true}
+                                  ref="urlPreviewsRoom" />
                 </label>
             );
         } else {
@@ -69,8 +69,10 @@ module.exports = React.createClass({
 
         let previewsForRoomAccount = (
             <SettingsFlag name="urlPreviewsEnabled"
-                              level={SettingLevel.ROOM_ACCOUNT}
+                          level={SettingLevel.ROOM_ACCOUNT}
-                              roomId={this.props.room.roomId}
+                          roomId={this.props.room.roomId}
+                          manualSave={true}
+                          ref="urlPreviewsSelf"
             />
         );
 

src/settings/SettingsStore.js

@@ -41,7 +41,6 @@ export const SettingLevel = {
     DEFAULT: "default",
 };
 
-
 // Convert the settings to easier to manage objects for the handlers
 const defaultSettings = {};
 const featureNames = [];