Merge branch 'settings-toast' into 'develop'

Settings: optionally show alert

Closes #1001

See merge request soapbox-pub/soapbox-fe!1560

app/soapbox/actions/settings.ts

@@ -17,6 +17,12 @@ const SETTINGS_UPDATE = 'SETTINGS_UPDATE';
 
 const FE_NAME = 'soapbox_fe';
 
+/** Options when changing/saving settings. */
+type SettingOpts = {
+  /** Whether to display an alert when settings are saved. */
+  showAlert?: boolean,
+}
+
 const messages = defineMessages({
   saveSuccess: { id: 'settings.save.success', defaultMessage: 'Your preferences have been saved!' },
 });
@@ -177,7 +183,7 @@ const getSettings = createSelector([
     .mergeDeep(settings);
 });
 
-const changeSettingImmediate = (path: string[], value: any) =>
+const changeSettingImmediate = (path: string[], value: any, opts?: SettingOpts) =>
   (dispatch: AppDispatch) => {
     dispatch({
       type: SETTING_CHANGE,
@@ -185,10 +191,10 @@ const changeSettingImmediate = (path: string[], value: any) =>
       value,
     });
 
-    dispatch(saveSettingsImmediate());
+    dispatch(saveSettingsImmediate(opts));
   };
 
-const changeSetting = (path: string[], value: any) =>
+const changeSetting = (path: string[], value: any, opts?: SettingOpts) =>
   (dispatch: AppDispatch) => {
     dispatch({
       type: SETTING_CHANGE,
@@ -196,10 +202,10 @@ const changeSetting = (path: string[], value: any) =>
       value,
     });
 
-    return dispatch(saveSettings());
+    return dispatch(saveSettings(opts));
   };
 
-const saveSettingsImmediate = () =>
+const saveSettingsImmediate = (opts?: SettingOpts) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     if (!isLoggedIn(getState)) return;
 
@@ -215,14 +221,16 @@ const saveSettingsImmediate = () =>
     })).then(() => {
       dispatch({ type: SETTING_SAVE });
 
+      if (opts?.showAlert) {
         dispatch(snackbar.success(messages.saveSuccess));
+      }
     }).catch(error => {
       dispatch(showAlertForError(error));
     });
   };
 
-const saveSettings = () =>
+const saveSettings = (opts?: SettingOpts) =>
-  (dispatch: AppDispatch) => dispatch(saveSettingsImmediate());
+  (dispatch: AppDispatch) => dispatch(saveSettingsImmediate(opts));
 
 export {
   SETTING_CHANGE,

app/soapbox/features/notifications/components/setting_toggle.tsx

@@ -13,7 +13,6 @@ interface ISettingToggle {
   settingPath: string[],
   /** Callback when the setting is toggled. */
   onChange: (settingPath: string[], checked: boolean) => void,
-
 }
 
 /** Stateful toggle to change user settings. */

app/soapbox/features/preferences/index.tsx

@@ -96,11 +96,11 @@ const Preferences = () => {
   const settings = useAppSelector((state) => getSettings(state));
 
   const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>, path: string[]) => {
-    dispatch(changeSetting(path, event.target.value));
+    dispatch(changeSetting(path, event.target.value, { showAlert: true }));
   };
 
   const onToggleChange = (key: string[], checked: boolean) => {
-    dispatch(changeSetting(key, checked));
+    dispatch(changeSetting(key, checked, { showAlert: true }));
   };
 
   const displayMediaOptions = React.useMemo(() => ({