Settings: allow immediately saving a changed setting, fixes #800

app/soapbox/actions/settings.js

@@ -168,6 +168,18 @@ export const getSettings = createSelector([
     .mergeDeep(settings);
 });
 
+export function changeSettingImmediate(path, value) {
+  return dispatch => {
+    dispatch({
+      type: SETTING_CHANGE,
+      path,
+      value,
+    });
+
+    dispatch(saveSettingsImmediate());
+  };
+}
+
 export function changeSetting(path, value) {
   return dispatch => {
     dispatch({
@@ -180,7 +192,8 @@ export function changeSetting(path, value) {
   };
 }
 
-const debouncedSave = debounce((dispatch, getState) => {
+export function saveSettingsImmediate() {
+  return (dispatch, getState) => {
     if (!isLoggedIn(getState)) return;
 
     const state = getState();
@@ -197,6 +210,11 @@ const debouncedSave = debounce((dispatch, getState) => {
     }).catch(error => {
       dispatch(showAlertForError(error));
     });
+  };
+}
+
+const debouncedSave = debounce((dispatch, getState) => {
+  dispatch(saveSettingsImmediate());
 }, 5000, { trailing: true });
 
 export function saveSettings() {

app/soapbox/features/developers/developers_challenge.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { changeSetting } from 'soapbox/actions/settings';
+import { changeSettingImmediate } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import { SimpleForm, TextInput } from 'soapbox/features/forms';
 
@@ -39,7 +39,7 @@ class DevelopersChallenge extends React.Component {
     const { answer } = this.state;
 
     if (answer === 'buzzfizz') {
-      dispatch(changeSetting(['isDeveloper'], true));
+      dispatch(changeSettingImmediate(['isDeveloper'], true));
       dispatch(snackbar.success(intl.formatMessage(messages.success)));
     } else {
       dispatch(snackbar.error(intl.formatMessage(messages.fail)));

app/soapbox/features/developers/developers_menu.js

@@ -4,7 +4,7 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { changeSetting } from 'soapbox/actions/settings';
+import { changeSettingImmediate } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import Icon from 'soapbox/components/icon';
 
@@ -31,7 +31,7 @@ class DevelopersMenu extends React.Component {
   leaveDevelopers = e => {
     const { intl, dispatch } = this.props;
 
-    dispatch(changeSetting(['isDeveloper'], false));
+    dispatch(changeSettingImmediate(['isDeveloper'], false));
     dispatch(snackbar.success(intl.formatMessage(messages.leave)));
 
     this.context.router.history.push('/');

app/soapbox/globals.js

@@ -2,7 +2,7 @@
  * globals: do things through the console.
  * This feature is for developers.
  */
-import { changeSetting } from 'soapbox/actions/settings';
+import { changeSettingImmediate } from 'soapbox/actions/settings';
 
 export const createGlobals = store => {
   const Soapbox = {
@@ -11,7 +11,7 @@ export const createGlobals = store => {
       if (![true, false].includes(bool)) {
         throw `Invalid option ${bool}. Must be true or false.`;
       }
-      store.dispatch(changeSetting(['isDeveloper'], bool));
+      store.dispatch(changeSettingImmediate(['isDeveloper'], bool));
       return bool;
     },
   };