Refactor some React Pages and Components

client/account/AccountProfileForm.js

@@ -13,7 +13,7 @@ import UserStatusMenu from '../components/basic/userStatus/UserStatusMenu';
 
 const STATUS_TEXT_MAX_LENGTH = 120;
 
-export default function AccountProfileForm({ values, handlers, user, settings, onSaveStateChange, ...props }) {
+function AccountProfileForm({ values, handlers, user, settings, onSaveStateChange, ...props }) {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -245,3 +245,5 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 		<CustomFieldsForm customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
 	</FieldGroup>;
 }
+
+export default AccountProfileForm;

client/account/AccountProfilePage.js

@@ -1,4 +1,4 @@
-import { ButtonGroup, Button, Box, Icon, PasswordInput, TextInput, Modal } from '@rocket.chat/fuselage';
+import { ButtonGroup, Button, Box, Icon } from '@rocket.chat/fuselage';
 import { SHA256 } from 'meteor/sha';
 import React, { useMemo, useState, useCallback } from 'react';
 
@@ -14,33 +14,7 @@ import { useMethod } from '../contexts/ServerContext';
 import { useSetModal } from '../contexts/ModalContext';
 import { useUpdateAvatar } from '../hooks/useUpdateAvatar';
 import { getUserEmailAddress } from '../helpers/getUserEmailAddress';
-
-const ActionConfirmModal = ({ onSave, onCancel, title, text, isPassword, ...props }) => {
-	const t = useTranslation();
-	const [inputText, setInputText] = useState('');
-
-	const handleChange = useCallback((e) => setInputText(e.currentTarget.value), [setInputText]);
-	const handleSave = useCallback(() => { onSave(inputText); onCancel(); }, [inputText, onSave, onCancel]);
-
-	return <Modal {...props}>
-		<Modal.Header>
-			<Icon color='danger' name='modal-warning' size={20}/>
-			<Modal.Title>{title}</Modal.Title>
-			<Modal.Close onClick={onCancel}/>
-		</Modal.Header>
-		<Modal.Content fontScale='p1'>
-			<Box mb='x8'>{text}</Box>
-			{isPassword && <PasswordInput w='full' value={inputText} onChange={handleChange}/>}
-			{!isPassword && <TextInput w='full' value={inputText} onChange={handleChange}/>}
-		</Modal.Content>
-		<Modal.Footer>
-			<ButtonGroup align='end'>
-				<Button ghost onClick={onCancel}>{t('Cancel')}</Button>
-				<Button primary danger onClick={handleSave}>{t('Continue')}</Button>
-			</ButtonGroup>
-		</Modal.Footer>
-	</Modal>;
-};
+import ActionConfirmModal from './ActionConfirmModal';
 
 const getInitialValues = (user) => ({
 	realname: user.name ?? '',

client/account/AccountSidebar.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { memo, useCallback, useEffect } from 'react';
 import { useSubscription } from 'use-subscription';
 
 import { menu, SideNav, Layout } from '../../app/ui-utils/client';
@@ -8,7 +8,7 @@ import Sidebar from '../components/basic/Sidebar';
 import SettingsProvider from '../providers/SettingsProvider';
 import { itemsSubscription } from './sidebarItems';
 
-export default React.memo(function AccountSidebar() {
+const AccountSidebar = () => {
 	const t = useTranslation();
 
 	const items = useSubscription(itemsSubscription);
@@ -40,4 +40,6 @@ export default React.memo(function AccountSidebar() {
 			</Sidebar.Content>
 		</Sidebar>
 	</SettingsProvider>;
-});
+};
+
+export default memo(AccountSidebar);

client/account/ActionConfirmModal.tsx

@@ -0,0 +1,48 @@
+import { ButtonGroup, Button, Box, Icon, PasswordInput, TextInput, Modal } from '@rocket.chat/fuselage';
+import React, { useState, useCallback, FC } from 'react';
+
+import { useTranslation } from '../contexts/TranslationContext';
+
+type ActionConfirmModalProps = {
+	title: string;
+	text: string;
+	isPassword: boolean;
+	onSave: (input: string) => void;
+	onCancel: () => void;
+};
+
+const ActionConfirmModal: FC<ActionConfirmModalProps> = ({
+	title,
+	text,
+	isPassword,
+	onSave,
+	onCancel,
+	...props
+}) => {
+	const t = useTranslation();
+	const [inputText, setInputText] = useState('');
+
+	const handleChange = useCallback((e) => setInputText(e.currentTarget.value), [setInputText]);
+	const handleSave = useCallback(() => { onSave(inputText); onCancel(); }, [inputText, onSave, onCancel]);
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon color='danger' name='modal-warning' size={20}/>
+			<Modal.Title>{title}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Box mb='x8'>{text}</Box>
+			{isPassword && <PasswordInput w='full' value={inputText} onChange={handleChange}/>}
+			{!isPassword && <TextInput w='full' value={inputText} onChange={handleChange}/>}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button ghost onClick={onCancel}>{t('Cancel')}</Button>
+				<Button primary danger onClick={handleSave}>{t('Continue')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default ActionConfirmModal;

client/account/preferences/MyDataModal.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { ButtonGroup, Button, Icon, Box, Modal } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+
+type MyDataModalProps = {
+	onCancel: () => void;
+	title: string;
+	text: string;
+};
+
+const MyDataModal: FC<MyDataModalProps> = ({ onCancel, title, text, ...props }) => {
+	const t = useTranslation();
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon color='success' name='circle-check' size={20}/>
+			<Modal.Title>{title}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Box mb='x8'>{text}</Box>
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button primary onClick={onCancel}>{t('Ok')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default MyDataModal;

client/account/preferences/PreferencesMyDataSection.js

@@ -1,30 +1,11 @@
 import React, { useCallback } from 'react';
-import { Accordion, Field, FieldGroup, ButtonGroup, Button, Icon, Box, Modal } from '@rocket.chat/fuselage';
+import { Accordion, Field, FieldGroup, ButtonGroup, Button, Icon, Box } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
 import { useMethod } from '../../contexts/ServerContext';
 import { useSetModal } from '../../contexts/ModalContext';
-
-const MyDataModal = ({ onCancel, title, text, ...props }) => {
-	const t = useTranslation();
-
-	return <Modal {...props}>
-		<Modal.Header>
-			<Icon color='success' name='circle-check' size={20}/>
-			<Modal.Title>{title}</Modal.Title>
-			<Modal.Close onClick={onCancel}/>
-		</Modal.Header>
-		<Modal.Content fontScale='p1'>
-			<Box mb='x8'>{text}</Box>
-		</Modal.Content>
-		<Modal.Footer>
-			<ButtonGroup align='end'>
-				<Button primary onClick={onCancel}>{t('Ok')}</Button>
-			</ButtonGroup>
-		</Modal.Footer>
-	</Modal>;
-};
+import MyDataModal from './MyDataModal';
 
 const PreferencesMyDataSection = ({ onChange, ...props }) => {
 	const t = useTranslation();

client/account/security/BackupCodesModal.tsx

@@ -0,0 +1,36 @@
+import React, { FC, useMemo } from 'react';
+import { Box, Button, Icon, ButtonGroup, Modal } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import TextCopy from '../../components/basic/TextCopy';
+
+type BackupCodesModalProps = {
+	codes: string[];
+	onClose: () => void;
+};
+
+const BackupCodesModal: FC<BackupCodesModalProps> = ({ codes, onClose, ...props }) => {
+	const t = useTranslation();
+
+	const codesText = useMemo(() => codes.join(' '), [codes]);
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon name='info' size={20}/>
+			<Modal.Title>{t('Backup_codes')}</Modal.Title>
+			<Modal.Close onClick={onClose}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Box mb='x8' withRichContent>{t('Make_sure_you_have_a_copy_of_your_codes_1')}</Box>
+			<TextCopy text={codesText} wordBreak='break-word' mb='x8' />
+			<Box mb='x8' withRichContent>{t('Make_sure_you_have_a_copy_of_your_codes_2')}</Box>
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button primary onClick={onClose}>{t('Ok')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default BackupCodesModal;

client/account/security/TwoFactorTOTP.js

@@ -1,5 +1,5 @@
-import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
-import { Box, Button, TextInput, Icon, ButtonGroup, Margins, Modal } from '@rocket.chat/fuselage';
+import React, { useState, useCallback, useEffect } from 'react';
+import { Box, Button, TextInput, Margins } from '@rocket.chat/fuselage';
 import { useSafely } from '@rocket.chat/fuselage-hooks';
 import qrcode from 'yaqrcode';
 
@@ -10,73 +10,8 @@ import { useTranslation } from '../../contexts/TranslationContext';
 import { useForm } from '../../hooks/useForm';
 import { useMethod } from '../../contexts/ServerContext';
 import TextCopy from '../../components/basic/TextCopy';
-
-const BackupCodesModal = ({ codes, onClose, ...props }) => {
-	const t = useTranslation();
-
-	const codesText = useMemo(() => codes.join(' '), [codes]);
-
-	return <Modal {...props}>
-		<Modal.Header>
-			<Icon name='info' size={20}/>
-			<Modal.Title>{t('Backup_codes')}</Modal.Title>
-			<Modal.Close onClick={onClose}/>
-		</Modal.Header>
-		<Modal.Content fontScale='p1'>
-			<Box mb='x8' withRichContent>{t('Make_sure_you_have_a_copy_of_your_codes_1')}</Box>
-			<TextCopy text={codesText} wordBreak='break-word' mb='x8' />
-			<Box mb='x8' withRichContent>{t('Make_sure_you_have_a_copy_of_your_codes_2')}</Box>
-		</Modal.Content>
-		<Modal.Footer>
-			<ButtonGroup align='end'>
-				<Button primary onClick={onClose}>{t('Ok')}</Button>
-			</ButtonGroup>
-		</Modal.Footer>
-	</Modal>;
-};
-
-const VerifyCodeModal = ({ onVerify, onCancel, ...props }) => {
-	const t = useTranslation();
-
-	const ref = useRef();
-
-	useEffect(() => {
-		if (typeof ref?.current?.focus === 'function') {
-			ref.current.focus();
-		}
-	}, [ref]);
-
-	const { values, handlers } = useForm({ code: '' });
-
-	const { code } = values;
-	const { handleCode } = handlers;
-
-	const handleVerify = useCallback((e) => {
-		if (e.type === 'click' || (e.type === 'keydown' && e.keyCode === 13)) {
-			onVerify(code);
-		}
-	}, [code, onVerify]);
-
-	return <Modal {...props}>
-		<Modal.Header>
-			<Icon name='info' size={20}/>
-			<Modal.Title>{t('Two-factor_authentication')}</Modal.Title>
-			<Modal.Close onClick={onCancel}/>
-		</Modal.Header>
-		<Modal.Content fontScale='p1'>
-			<Box mbe='x8'>{t('Open_your_authentication_app_and_enter_the_code')}</Box>
-			<Box display='flex' alignItems='stretch'>
-				<TextInput ref={ref} placeholder={t('Enter_authentication_code')} value={code} onChange={handleCode} onKeyDown={handleVerify}/>
-			</Box>
-		</Modal.Content>
-		<Modal.Footer>
-			<ButtonGroup align='end'>
-				<Button onClick={onCancel}>{t('Cancel')}</Button>
-				<Button primary onClick={handleVerify}>{t('Verify')}</Button>
-			</ButtonGroup>
-		</Modal.Footer>
-	</Modal>;
-};
+import BackupCodesModal from './BackupCodesModal';
+import VerifyCodeModal from './VerifyCodeModal';
 
 const TwoFactorTOTP = (props) => {
 	const t = useTranslation();

client/account/security/VerifyCodeModal.tsx

@@ -0,0 +1,55 @@
+import React, { FC, useCallback, useEffect, useRef } from 'react';
+import { Box, Button, TextInput, Icon, ButtonGroup, Modal } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useForm } from '../../hooks/useForm';
+
+type VerifyCodeModalProps = {
+	onVerify: (code: string) => void;
+	onCancel: () => void;
+};
+
+const VerifyCodeModal: FC<VerifyCodeModalProps> = ({ onVerify, onCancel, ...props }) => {
+	const t = useTranslation();
+
+	const ref = useRef<HTMLInputElement>();
+
+	useEffect(() => {
+		if (typeof ref?.current?.focus === 'function') {
+			ref.current.focus();
+		}
+	}, [ref]);
+
+	const { values, handlers } = useForm({ code: '' });
+
+	const { code } = values as { code: string };
+	const { handleCode } = handlers;
+
+	const handleVerify = useCallback((e) => {
+		if (e.type === 'click' || (e.type === 'keydown' && e.keyCode === 13)) {
+			onVerify(code);
+		}
+	}, [code, onVerify]);
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon name='info' size={20}/>
+			<Modal.Title>{t('Two-factor_authentication')}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Box mbe='x8'>{t('Open_your_authentication_app_and_enter_the_code')}</Box>
+			<Box display='flex' alignItems='stretch'>
+				<TextInput ref={ref} placeholder={t('Enter_authentication_code')} value={code} onChange={handleCode} onKeyDown={handleVerify}/>
+			</Box>
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button onClick={onCancel}>{t('Cancel')}</Button>
+				<Button primary onClick={handleVerify}>{t('Verify')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default VerifyCodeModal;