From 9ae6ba1035b1f2cdfc17c0b632035baed1a9d149 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 1 Jul 2022 14:08:21 -0300 Subject: [PATCH 1/2] wip --- ...ncesPage.js => AccountPreferencesPage.tsx} | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) rename apps/meteor/client/views/account/preferences/{AccountPreferencesPage.js => AccountPreferencesPage.tsx} (80%) diff --git a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.js b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx similarity index 80% rename from apps/meteor/client/views/account/preferences/AccountPreferencesPage.js rename to apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx index 406c06695341..84eb1ed30492 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,27 +12,30 @@ import PreferencesNotificationsSection from './PreferencesNotificationsSection'; import PreferencesSoundSection from './PreferencesSoundSection'; import PreferencesUserPresenceSection from './PreferencesUserPresenceSection'; -const AccountPreferencesPage = () => { +const AccountPreferencesPage = (): ReactElement => { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); const [hasAnyChange, setHasAnyChange] = useState(false); - const saveData = useRef({}); + const saveData = useRef<{ highlights: string; dontAskAgainList: [action: string, label: string][] } | null>(null); const commitRef = useRef({}); + console.log(saveData); const dataDownloadEnabled = useSetting('UserData_EnableDownload'); 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] = value; + } else { + delete current[key]; + } } - const anyChange = !!Object.values(current).length; + const anyChange = !!Object.values(current || {}).length; if (anyChange !== hasAnyChange) { setHasAnyChange(anyChange); } @@ -45,16 +48,17 @@ 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/) .map((val) => val.trim()) .filter(Boolean), }); + console.log(data); } - 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 +66,18 @@ const AccountPreferencesPage = () => { Object.assign(data, { dontAskAgainList: list }); } - await saveFn(data); - saveData.current = {}; + await saveFn( + data as { + highlights: string[]; + }, + ); + saveData.current = null; setHasAnyChange(false); Object.values(commitRef.current).forEach((fn) => fn()); dispatchToastMessage({ type: 'success', message: t('Preferences_saved') }); } catch (e) { - dispatchToastMessage({ type: 'error', message: e }); + dispatchToastMessage({ type: 'error', message: String(e) }); } }, [dispatchToastMessage, saveFn, t]); From 4c459460ce7ff196fd87406c377fb6ce7a5abcd5 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 1 Jul 2022 15:59:11 -0300 Subject: [PATCH 2/2] convert AccountPreferencerPage to tsx --- .../preferences/AccountPreferencesPage.tsx | 57 ++++++++++++++----- 1 file changed, 44 insertions(+), 13 deletions(-) diff --git a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx index 84eb1ed30492..4160c0c47abd 100644 --- a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx +++ b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx @@ -12,16 +12,52 @@ import PreferencesNotificationsSection from './PreferencesNotificationsSection'; import PreferencesSoundSection from './PreferencesSoundSection'; import PreferencesUserPresenceSection from './PreferencesUserPresenceSection'; +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<{ highlights: string; dontAskAgainList: [action: string, label: string][] } | null>(null); + const saveData = useRef>({}); const commitRef = useRef({}); - console.log(saveData); const dataDownloadEnabled = useSetting('UserData_EnableDownload'); const onChange = useCallback( @@ -29,13 +65,13 @@ const AccountPreferencesPage = (): ReactElement => { const { current } = saveData; if (current) { if (JSON.stringify(initialValue) !== JSON.stringify(value)) { - current[key] = value; + current[key as keyof CurrentData] = value; } else { - delete current[key]; + delete current[key as keyof CurrentData]; } } - const anyChange = !!Object.values(current || {}).length; + const anyChange = !!Object.values(current).length; if (anyChange !== hasAnyChange) { setHasAnyChange(anyChange); } @@ -55,7 +91,6 @@ const AccountPreferencesPage = (): ReactElement => { .map((val) => val.trim()) .filter(Boolean), }); - console.log(data); } if (data?.dontAskAgainList) { @@ -66,14 +101,10 @@ const AccountPreferencesPage = (): ReactElement => { Object.assign(data, { dontAskAgainList: list }); } - await saveFn( - data as { - highlights: string[]; - }, - ); - saveData.current = null; + 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) {