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,23 +192,29 @@ export function changeSetting(path, value) {
   };
 }
 
+export function saveSettingsImmediate() {
+  return (dispatch, getState) => {
+    if (!isLoggedIn(getState)) return;
+
+    const state = getState();
+    if (getSettings(state).getIn(['saved'])) return;
+
+    const data = state.get('settings').delete('saved').toJS();
+
+    dispatch(patchMe({
+      pleroma_settings_store: {
+        [FE_NAME]: data,
+      },
+    })).then(response => {
+      dispatch({ type: SETTING_SAVE });
+    }).catch(error => {
+      dispatch(showAlertForError(error));
+    });
+  };
+}
+
 const debouncedSave = debounce((dispatch, getState) => {
-  if (!isLoggedIn(getState)) return;
-
-  const state = getState();
-  if (getSettings(state).getIn(['saved'])) return;
-
-  const data = state.get('settings').delete('saved').toJS();
-
-  dispatch(patchMe({
-    pleroma_settings_store: {
-      [FE_NAME]: data,
-    },
-  })).then(response => {
-    dispatch({ type: SETTING_SAVE });
-  }).catch(error => {
-    dispatch(showAlertForError(error));
-  });
+  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;
     },
   };