moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'settings-toast' into 'develop' 

Settings: optionally show alert

Closes #1001

See merge request soapbox-pub/soapbox-fe!1560
This commit is contained in:
Alex Gleason 2022-06-22 18:02:45 +00:00
parent 017ee90dfd 18df7c0c4a
commit ca3bf680e9
3 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/soapbox/actions/settings.ts
View File

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

1
app/soapbox/features/notifications/components/setting_toggle.tsx
View File

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

4
app/soapbox/features/preferences/index.tsx
View File

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