From 186d74f76a8ed62ecc06eef345517f46ede571a4 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Tue, 12 Jan 2021 13:53:57 -0300 Subject: [PATCH] [FIX] Initial values update on Account Preferences (#19938) Co-authored-by: Tasso Evangelista --- .../preferences/AccountPreferencesPage.js | 16 +++++++++------- .../preferences/PreferencesGlobalSection.js | 6 ++++-- .../preferences/PreferencesHighlightsSection.js | 6 ++++-- .../PreferencesLocalizationSection.js | 6 ++++-- .../preferences/PreferencesMessagesSection.js | 6 ++++-- .../PreferencesNotificationsSection.js | 6 ++++-- .../preferences/PreferencesSoundSection.js | 5 +++-- .../PreferencesUserPresenceSection.js | 6 ++++-- 8 files changed, 36 insertions(+), 21 deletions(-) diff --git a/client/views/account/preferences/AccountPreferencesPage.js b/client/views/account/preferences/AccountPreferencesPage.js index ab39a97ec359..5c21a6d15de2 100644 --- a/client/views/account/preferences/AccountPreferencesPage.js +++ b/client/views/account/preferences/AccountPreferencesPage.js @@ -22,6 +22,7 @@ const AccountPreferencesPage = () => { const [hasAnyChange, setHasAnyChange] = useState(false); const saveData = useRef({}); + const commitRef = useRef({}); const dataDownloadEnabled = useSetting('UserData_EnableDownload'); @@ -56,6 +57,7 @@ const AccountPreferencesPage = () => { await saveFn(data); saveData.current = {}; setHasAnyChange(false); + Object.values(commitRef.current).forEach((fn) => fn()); dispatchToastMessage({ type: 'success', message: t('Preferences_saved') }); } catch (e) { @@ -74,13 +76,13 @@ const AccountPreferencesPage = () => { - - - - - - - + + + + + + + {dataDownloadEnabled && } diff --git a/client/views/account/preferences/PreferencesGlobalSection.js b/client/views/account/preferences/PreferencesGlobalSection.js index 71bbd021d5f2..20a6d474a9af 100644 --- a/client/views/account/preferences/PreferencesGlobalSection.js +++ b/client/views/account/preferences/PreferencesGlobalSection.js @@ -5,7 +5,7 @@ import { useTranslation } from '../../../contexts/TranslationContext'; import { useUserPreference } from '../../../contexts/UserContext'; import { useForm } from '../../../hooks/useForm'; -const PreferencesGlobalSection = ({ onChange, ...props }) => { +const PreferencesGlobalSection = ({ onChange, commitRef, ...props }) => { const t = useTranslation(); const userDontAskAgainList = useUserPreference('dontAskAgainList'); @@ -14,12 +14,14 @@ const PreferencesGlobalSection = ({ onChange, ...props }) => { const selectedOptions = options.map(([action]) => action); - const { values, handlers } = useForm({ dontAskAgainList: selectedOptions }, onChange); + const { values, handlers, commit } = useForm({ dontAskAgainList: selectedOptions }, onChange); const { dontAskAgainList } = values; const { handleDontAskAgainList } = handlers; + commitRef.current.global = commit; + return diff --git a/client/views/account/preferences/PreferencesHighlightsSection.js b/client/views/account/preferences/PreferencesHighlightsSection.js index b6903c4f6ac7..74c13a992d0e 100644 --- a/client/views/account/preferences/PreferencesHighlightsSection.js +++ b/client/views/account/preferences/PreferencesHighlightsSection.js @@ -5,17 +5,19 @@ import { useTranslation } from '../../../contexts/TranslationContext'; import { useUserPreference } from '../../../contexts/UserContext'; import { useForm } from '../../../hooks/useForm'; -const PreferencesHighlightsSection = ({ onChange, ...props }) => { +const PreferencesHighlightsSection = ({ onChange, commitRef, ...props }) => { const t = useTranslation(); const userHighlights = useUserPreference('highlights')?.join(',\n') ?? ''; - const { values, handlers } = useForm({ highlights: userHighlights }, onChange); + const { values, handlers, commit } = useForm({ highlights: userHighlights }, onChange); const { highlights } = values; const { handleHighlights } = handlers; + commitRef.current.highlights = commit; + return diff --git a/client/views/account/preferences/PreferencesLocalizationSection.js b/client/views/account/preferences/PreferencesLocalizationSection.js index 124c85b1504f..76c8a63c1c34 100644 --- a/client/views/account/preferences/PreferencesLocalizationSection.js +++ b/client/views/account/preferences/PreferencesLocalizationSection.js @@ -5,18 +5,20 @@ import { useLanguages, useTranslation } from '../../../contexts/TranslationConte import { useUserPreference } from '../../../contexts/UserContext'; import { useForm } from '../../../hooks/useForm'; -const PreferencesLocalizationSection = ({ onChange, ...props }) => { +const PreferencesLocalizationSection = ({ onChange, commitRef, ...props }) => { const t = useTranslation(); const userLanguage = useUserPreference('language') || ''; const languages = useLanguages(); const languageOptions = useMemo(() => languages.map(({ key, name }) => [key, name]).sort(([a], [b]) => a - b), [languages]); - const { values, handlers } = useForm({ language: userLanguage }, onChange); + const { values, handlers, commit } = useForm({ language: userLanguage }, onChange); const { language } = values; const { handleLanguage } = handlers; + commitRef.current.localization = commit; + return diff --git a/client/views/account/preferences/PreferencesMessagesSection.js b/client/views/account/preferences/PreferencesMessagesSection.js index 5fb833601232..4e4193f97bdf 100644 --- a/client/views/account/preferences/PreferencesMessagesSection.js +++ b/client/views/account/preferences/PreferencesMessagesSection.js @@ -6,7 +6,7 @@ import { useUserPreference } from '../../../contexts/UserContext'; import { useSetting } from '../../../contexts/SettingsContext'; import { useForm } from '../../../hooks/useForm'; -const PreferencesMessagesSection = ({ onChange, ...props }) => { +const PreferencesMessagesSection = ({ onChange, commitRef, ...props }) => { const t = useTranslation(); const showRoles = useSetting('UI_DisplayRoles'); @@ -28,7 +28,7 @@ const PreferencesMessagesSection = ({ onChange, ...props }) => { messageViewMode: useUserPreference('messageViewMode'), }; - const { values, handlers } = useForm(settings, onChange); + const { values, handlers, commit } = useForm(settings, onChange); const { unreadAlert, @@ -82,6 +82,8 @@ const PreferencesMessagesSection = ({ onChange, ...props }) => { [2, t('Compact')], ], [t]); + commitRef.current.messages = commit; + // TODO: Weird behaviour when saving clock mode, and then changing it. return diff --git a/client/views/account/preferences/PreferencesNotificationsSection.js b/client/views/account/preferences/PreferencesNotificationsSection.js index 7c08004bc0fa..7c78e82fdc2c 100644 --- a/client/views/account/preferences/PreferencesNotificationsSection.js +++ b/client/views/account/preferences/PreferencesNotificationsSection.js @@ -18,7 +18,7 @@ const emailNotificationOptionsLabelMap = { nothing: 'Email_Notification_Mode_Disabled', }; -const PreferencesNotificationsSection = ({ onChange, ...props }) => { +const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }) => { const t = useTranslation(); const [notificationsPermission, setNotificationsPermission] = useState(); @@ -34,7 +34,7 @@ const PreferencesNotificationsSection = ({ onChange, ...props }) => { const defaultMobileNotifications = useSetting('Accounts_Default_User_Preferences_mobileNotifications'); const canChangeEmailNotification = useSetting('Accounts_AllowEmailNotifications'); - const { values, handlers } = useForm({ + const { values, handlers, commit } = useForm({ desktopNotificationRequireInteraction: userDesktopNotificationRequireInteraction, desktopNotifications: userDesktopNotifications, mobileNotifications: userMobileNotifications, @@ -60,6 +60,8 @@ const PreferencesNotificationsSection = ({ onChange, ...props }) => { useEffect(() => setNotificationsPermission(window.Notification && Notification.permission), []); + commitRef.current.notifications = commit; + const onSendNotification = useCallback(() => { KonchatNotification.notify({ payload: { sender: { username: 'rocket.cat' } }, diff --git a/client/views/account/preferences/PreferencesSoundSection.js b/client/views/account/preferences/PreferencesSoundSection.js index 84dc4bf2af3e..bda586d99be8 100644 --- a/client/views/account/preferences/PreferencesSoundSection.js +++ b/client/views/account/preferences/PreferencesSoundSection.js @@ -8,7 +8,7 @@ import { CustomSounds } from '../../../../app/custom-sounds/client'; const useCustomSoundsOptions = () => useMemo(() => CustomSounds && CustomSounds.getList && CustomSounds.getList().map(({ _id, name }) => [_id, name]), []); -const PreferencesSoundSection = ({ onChange, ...props }) => { +const PreferencesSoundSection = ({ onChange, commitRef, ...props }) => { const t = useTranslation(); const soundsList = useCustomSoundsOptions(); @@ -20,7 +20,7 @@ const PreferencesSoundSection = ({ onChange, ...props }) => { notificationsSoundVolume: useUserPreference('notificationsSoundVolume'), }; - const { values, handlers } = useForm(settings, onChange); + const { values, handlers, commit } = useForm(settings, onChange); const { newRoomNotification, @@ -38,6 +38,7 @@ const PreferencesSoundSection = ({ onChange, ...props }) => { const onChangeNotificationsSoundVolume = useCallback((e) => handleNotificationsSoundVolume(Math.max(0, Math.min(Number(e.currentTarget.value), 100))), [handleNotificationsSoundVolume]); + commitRef.current.sound = commit; return diff --git a/client/views/account/preferences/PreferencesUserPresenceSection.js b/client/views/account/preferences/PreferencesUserPresenceSection.js index 20360ac6ee0c..150df5251cf0 100644 --- a/client/views/account/preferences/PreferencesUserPresenceSection.js +++ b/client/views/account/preferences/PreferencesUserPresenceSection.js @@ -5,12 +5,12 @@ import { useTranslation } from '../../../contexts/TranslationContext'; import { useUserPreference } from '../../../contexts/UserContext'; import { useForm } from '../../../hooks/useForm'; -const PreferencesUserPresenceSection = ({ onChange, ...props }) => { +const PreferencesUserPresenceSection = ({ onChange, commitRef, ...props }) => { const t = useTranslation(); const userEnableAutoAway = useUserPreference('enableAutoAway'); const userIdleTimeLimit = useUserPreference('idleTimeLimit'); - const { values, handlers } = useForm({ + const { values, handlers, commit } = useForm({ enableAutoAway: userEnableAutoAway, idleTimeLimit: userIdleTimeLimit, }, onChange); @@ -25,6 +25,8 @@ const PreferencesUserPresenceSection = ({ onChange, ...props }) => { handleIdleTimeLimit, } = handlers; + commitRef.current.userPreference = commit; + const onChangeIdleTimeLimit = useCallback((e) => handleIdleTimeLimit(Number(e.currentTarget.value)), [handleIdleTimeLimit]); return