Chore: Convert AccountPreferencesPage to ts (#26096)

apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Button, Box, Accordion } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useSetting, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, ReactElement } from 'react';
 
 import Page from '../../../components/Page';
 import PreferencesGlobalSection from './PreferencesGlobalSection';
@@ -12,13 +12,50 @@ import PreferencesNotificationsSection from './PreferencesNotificationsSection';
 import PreferencesSoundSection from './PreferencesSoundSection';
 import PreferencesUserPresenceSection from './PreferencesUserPresenceSection';
 
-const AccountPreferencesPage = () => {
+type CurrentData = {
+	enableNewMessageTemplate: boolean;
+	language: string;
+	newRoomNotification: string;
+	newMessageNotification: string;
+	clockMode: number;
+	useEmojis: boolean;
+	convertAsciiEmoji: boolean;
+	saveMobileBandwidth: boolean;
+	collapseMediaByDefault: boolean;
+	autoImageLoad: boolean;
+	emailNotificationMode: string;
+	unreadAlert: boolean;
+	notificationsSoundVolume: number;
+	desktopNotifications: string;
+	pushNotifications: string;
+	enableAutoAway: boolean;
+	highlights: string;
+	messageViewMode: number;
+	hideUsernames: boolean;
+	hideRoles: boolean;
+	displayAvatars: boolean;
+	hideFlexTab: boolean;
+	sendOnEnter: string;
+	idleTimeLimit: number;
+	sidebarShowFavorites: boolean;
+	sidebarShowUnread: boolean;
+	sidebarSortby: string;
+	sidebarViewMode: string;
+	sidebarDisplayAvatar: boolean;
+	sidebarGroupByType: boolean;
+	muteFocusedConversations: boolean;
+	dontAskAgainList: [action: string, label: string][];
+};
+
+type FormatedData = Omit<Partial<CurrentData>, 'dontAskAgainList' | 'highlights'>;
+
+const AccountPreferencesPage = (): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const [hasAnyChange, setHasAnyChange] = useState(false);
 
-	const saveData = useRef({});
+	const saveData = useRef<Partial<CurrentData>>({});
 	const commitRef = useRef({});
 
 	const dataDownloadEnabled = useSetting('UserData_EnableDownload');
@@ -26,10 +63,12 @@ const AccountPreferencesPage = () => {
 	const onChange = useCallback(
 		({ initialValue, value, key }) => {
 			const { current } = saveData;
-			if (JSON.stringify(initialValue) !== JSON.stringify(value)) {
-				current[key] = value;
-			} else {
-				delete current[key];
+			if (current) {
+				if (JSON.stringify(initialValue) !== JSON.stringify(value)) {
+					current[key as keyof CurrentData] = value;
+				} else {
+					delete current[key as keyof CurrentData];
+				}
 			}
 
 			const anyChange = !!Object.values(current).length;
@@ -45,7 +84,7 @@ const AccountPreferencesPage = () => {
 	const handleSave = useCallback(async () => {
 		try {
 			const { current: data } = saveData;
-			if (data.highlights || data.highlights === '') {
+			if (data?.highlights || data?.highlights === '') {
 				Object.assign(data, {
 					highlights: data.highlights
 						.split(/,|\n/)
@@ -54,7 +93,7 @@ const AccountPreferencesPage = () => {
 				});
 			}
 
-			if (data.dontAskAgainList) {
+			if (data?.dontAskAgainList) {
 				const list =
 					Array.isArray(data.dontAskAgainList) && data.dontAskAgainList.length > 0
 						? data.dontAskAgainList.map(([action, label]) => ({ action, label }))
@@ -62,14 +101,14 @@ const AccountPreferencesPage = () => {
 				Object.assign(data, { dontAskAgainList: list });
 			}
 
-			await saveFn(data);
+			await saveFn(data as FormatedData);
 			saveData.current = {};
 			setHasAnyChange(false);
-			Object.values(commitRef.current).forEach((fn) => fn());
+			Object.values(commitRef.current).forEach((fn) => (fn as () => void)());
 
 			dispatchToastMessage({ type: 'success', message: t('Preferences_saved') });
 		} catch (e) {
-			dispatchToastMessage({ type: 'error', message: e });
+			dispatchToastMessage({ type: 'error', message: String(e) });
 		}
 	}, [dispatchToastMessage, saveFn, t]);