diff --git a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.js b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx similarity index 65% rename from apps/meteor/client/views/account/preferences/AccountPreferencesPage.js rename to apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx index 406c06695341..4160c0c47abd 100644 --- a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.js +++ b/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, 'dontAskAgainList' | 'highlights'>; + +const AccountPreferencesPage = (): ReactElement => { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); const [hasAnyChange, setHasAnyChange] = useState(false); - const saveData = useRef({}); + const saveData = useRef>({}); 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]);