From c1a0b7a6a8ad6eba841c2854fb168ab4e3a5d9c3 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 22 Jun 2022 12:17:35 -0500 Subject: [PATCH 1/2] Settings: optionally show alert --- app/soapbox/actions/settings.ts | 18 ++++++++++-------- .../components/setting_toggle.tsx | 1 - app/soapbox/features/preferences/index.tsx | 4 ++-- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/app/soapbox/actions/settings.ts b/app/soapbox/actions/settings.ts index fd37735b1..009107b86 100644 --- a/app/soapbox/actions/settings.ts +++ b/app/soapbox/actions/settings.ts @@ -177,7 +177,7 @@ const getSettings = createSelector([ .mergeDeep(settings); }); -const changeSettingImmediate = (path: string[], value: any) => +const changeSettingImmediate = (path: string[], value: any, showAlert = false) => (dispatch: AppDispatch) => { dispatch({ type: SETTING_CHANGE, @@ -185,10 +185,10 @@ const changeSettingImmediate = (path: string[], value: any) => value, }); - dispatch(saveSettingsImmediate()); + dispatch(saveSettingsImmediate(showAlert)); }; -const changeSetting = (path: string[], value: any) => +const changeSetting = (path: string[], value: any, showAlert = false) => (dispatch: AppDispatch) => { dispatch({ type: SETTING_CHANGE, @@ -196,10 +196,10 @@ const changeSetting = (path: string[], value: any) => value, }); - return dispatch(saveSettings()); + return dispatch(saveSettings(showAlert)); }; -const saveSettingsImmediate = () => +const saveSettingsImmediate = (showAlert = false) => (dispatch: AppDispatch, getState: () => RootState) => { if (!isLoggedIn(getState)) return; @@ -215,14 +215,16 @@ const saveSettingsImmediate = () => })).then(() => { dispatch({ type: SETTING_SAVE }); - dispatch(snackbar.success(messages.saveSuccess)); + if (showAlert) { + dispatch(snackbar.success(messages.saveSuccess)); + } }).catch(error => { dispatch(showAlertForError(error)); }); }; -const saveSettings = () => - (dispatch: AppDispatch) => dispatch(saveSettingsImmediate()); +const saveSettings = (showAlert = false) => + (dispatch: AppDispatch) => dispatch(saveSettingsImmediate(showAlert)); export { SETTING_CHANGE, diff --git a/app/soapbox/features/notifications/components/setting_toggle.tsx b/app/soapbox/features/notifications/components/setting_toggle.tsx index 3cd9c65a2..5b7ca9100 100644 --- a/app/soapbox/features/notifications/components/setting_toggle.tsx +++ b/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. */ diff --git a/app/soapbox/features/preferences/index.tsx b/app/soapbox/features/preferences/index.tsx index c666a847e..83bd660ac 100644 --- a/app/soapbox/features/preferences/index.tsx +++ b/app/soapbox/features/preferences/index.tsx @@ -96,11 +96,11 @@ const Preferences = () => { const settings = useAppSelector((state) => getSettings(state)); const onSelectChange = (event: React.ChangeEvent, path: string[]) => { - dispatch(changeSetting(path, event.target.value)); + dispatch(changeSetting(path, event.target.value, true)); }; const onToggleChange = (key: string[], checked: boolean) => { - dispatch(changeSetting(key, checked)); + dispatch(changeSetting(key, checked, true)); }; const displayMediaOptions = React.useMemo(() => ({ From 18df7c0c4a27c4b71439b5f8da67759d17089770 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 22 Jun 2022 12:54:36 -0500 Subject: [PATCH 2/2] Settings: pass an opts object instead of showAlert --- app/soapbox/actions/settings.ts | 22 ++++++++++++++-------- app/soapbox/features/preferences/index.tsx | 4 ++-- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/app/soapbox/actions/settings.ts b/app/soapbox/actions/settings.ts index 009107b86..44a22f666 100644 --- a/app/soapbox/actions/settings.ts +++ b/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, showAlert = false) => +const changeSettingImmediate = (path: string[], value: any, opts?: SettingOpts) => (dispatch: AppDispatch) => { dispatch({ type: SETTING_CHANGE, @@ -185,10 +191,10 @@ const changeSettingImmediate = (path: string[], value: any, showAlert = false) = value, }); - dispatch(saveSettingsImmediate(showAlert)); + dispatch(saveSettingsImmediate(opts)); }; -const changeSetting = (path: string[], value: any, showAlert = false) => +const changeSetting = (path: string[], value: any, opts?: SettingOpts) => (dispatch: AppDispatch) => { dispatch({ type: SETTING_CHANGE, @@ -196,10 +202,10 @@ const changeSetting = (path: string[], value: any, showAlert = false) => value, }); - return dispatch(saveSettings(showAlert)); + return dispatch(saveSettings(opts)); }; -const saveSettingsImmediate = (showAlert = false) => +const saveSettingsImmediate = (opts?: SettingOpts) => (dispatch: AppDispatch, getState: () => RootState) => { if (!isLoggedIn(getState)) return; @@ -215,7 +221,7 @@ const saveSettingsImmediate = (showAlert = false) => })).then(() => { dispatch({ type: SETTING_SAVE }); - if (showAlert) { + if (opts?.showAlert) { dispatch(snackbar.success(messages.saveSuccess)); } }).catch(error => { @@ -223,8 +229,8 @@ const saveSettingsImmediate = (showAlert = false) => }); }; -const saveSettings = (showAlert = false) => - (dispatch: AppDispatch) => dispatch(saveSettingsImmediate(showAlert)); +const saveSettings = (opts?: SettingOpts) => + (dispatch: AppDispatch) => dispatch(saveSettingsImmediate(opts)); export { SETTING_CHANGE, diff --git a/app/soapbox/features/preferences/index.tsx b/app/soapbox/features/preferences/index.tsx index 83bd660ac..fe6e5fcce 100644 --- a/app/soapbox/features/preferences/index.tsx +++ b/app/soapbox/features/preferences/index.tsx @@ -96,11 +96,11 @@ const Preferences = () => { const settings = useAppSelector((state) => getSettings(state)); const onSelectChange = (event: React.ChangeEvent, path: string[]) => { - dispatch(changeSetting(path, event.target.value, true)); + dispatch(changeSetting(path, event.target.value, { showAlert: true })); }; const onToggleChange = (key: string[], checked: boolean) => { - dispatch(changeSetting(key, checked, true)); + dispatch(changeSetting(key, checked, { showAlert: true })); }; const displayMediaOptions = React.useMemo(() => ({