[FIX] Initial values update on Account Preferences (#19938)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

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 = () => {
 		<Page.ScrollableContentWithShadow>
 			<Box maxWidth='x600' w='full' alignSelf='center'>
 				<Accordion>
-					<PreferencesLocalizationSection onChange={onChange} defaultExpanded/>
-					<PreferencesGlobalSection onChange={onChange} />
-					<PreferencesUserPresenceSection onChange={onChange} />
-					<PreferencesNotificationsSection onChange={onChange} />
-					<PreferencesMessagesSection onChange={onChange} />
-					<PreferencesHighlightsSection onChange={onChange} />
-					<PreferencesSoundSection onChange={onChange} />
+					<PreferencesLocalizationSection commitRef={commitRef} onChange={onChange} defaultExpanded/>
+					<PreferencesGlobalSection commitRef={commitRef} onChange={onChange} />
+					<PreferencesUserPresenceSection commitRef={commitRef} onChange={onChange} />
+					<PreferencesNotificationsSection commitRef={commitRef} onChange={onChange} />
+					<PreferencesMessagesSection commitRef={commitRef} onChange={onChange} />
+					<PreferencesHighlightsSection commitRef={commitRef} onChange={onChange} />
+					<PreferencesSoundSection commitRef={commitRef} onChange={onChange} />
 					{dataDownloadEnabled && <PreferencesMyDataSection onChange={onChange} />}
 				</Accordion>
 			</Box>

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 <Accordion.Item title={t('Global')} {...props}>
 		<FieldGroup>
 			<Field>

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 <Accordion.Item title={t('Highlights')} {...props}>
 		<FieldGroup>
 			<Field>

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 <Accordion.Item title={t('Localization')} {...props}>
 		<FieldGroup>
 			<Field>

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 <Accordion.Item title={t('Messages')} {...props}>

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' } },

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 <Accordion.Item title={t('Sound')} {...props}>
 		<FieldGroup>

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 <Accordion.Item title={t('User_Presence')} {...props}>