Chore: Convert RoomForeword, TextCopy and RoomAvatarEditor to TS (#25424)

apps/meteor/client/components/RoomForeword.js → apps/meteor/client/components/RoomForeword.tsx

+import { IRoom, isVoipRoom, isDirectMessageRoom } from '@rocket.chat/core-typings';
 import { Avatar, Margins, Flex, Box, Tag } from '@rocket.chat/fuselage';
-import React, { useCallback } from 'react';
+import React, { ReactElement } from 'react';
 
-import { Rooms, Users } from '../../app/models/client';
+import { Users } from '../../app/models/client';
 import { getUserAvatarURL } from '../../app/utils/client';
 import { useTranslation } from '../contexts/TranslationContext';
-import { useUser } from '../contexts/UserContext';
-import { useReactiveValue } from '../hooks/useReactiveValue';
+import { useUser, useUserRoom } from '../contexts/UserContext';
 import { VoipRoomForeword } from './voip/room/VoipRoomForeword';
 
-const RoomForeword = ({ _id, rid = _id }) => {
+type RoomForewordProps = { _id: IRoom['_id']; rid?: IRoom['_id'] } | { rid: IRoom['_id']; _id?: IRoom['_id'] };
+
+const RoomForeword = ({ _id, rid }: RoomForewordProps): ReactElement | null => {
+	const roomId = _id || rid;
+	if (!roomId) {
+		throw new Error('Room id required - RoomForeword');
+	}
+
 	const t = useTranslation();
 
 	const user = useUser();
-	const room = useReactiveValue(useCallback(() => Rooms.findOne({ _id: rid }), [rid]));
+	const room = useUserRoom(roomId);
+
+	if (!room) {
+		return null;
+	}
 
-	if (room?.t === 'v') {
+	if (isVoipRoom(room)) {
 		return <VoipRoomForeword room={room} />;
 	}
 
-	if (room?.t !== 'd') {
+	if (!isDirectMessageRoom(room)) {
 		return (
 			<Box fontScale='c1' color='default' display='flex' justifyContent='center'>
 				{t('Start_of_conversation')}
@@ -26,8 +37,8 @@ const RoomForeword = ({ _id, rid = _id }) => {
 		);
 	}
 
-	const usernames = room.usernames.filter((username) => username !== user.username);
-	if (usernames.length < 1) {
+	const usernames = room.usernames?.filter((username) => username !== user?.username);
+	if (!usernames || usernames.length < 1) {
 		return null;
 	}
 

apps/meteor/client/components/TextCopy.js → apps/meteor/client/components/TextCopy.tsx

 import { Box, Icon, Button, Scrollable } from '@rocket.chat/fuselage';
-import React, { useCallback } from 'react';
+import React, { useCallback, ComponentProps, ReactElement } from 'react';
 
 import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
 import { useTranslation } from '../contexts/TranslationContext';
 
-const defaultWrapperRenderer = (text) => (
+type TextCopyProps = {
+	text: string;
+	wrapper?: (text: string) => ReactElement;
+} & ComponentProps<typeof Box>;
+
+const defaultWrapperRenderer = (text: string): ReactElement => (
 	<Box fontFamily='mono' alignSelf='center' fontScale='p2' style={{ wordBreak: 'break-all' }} mie='x4' flexGrow={1} maxHeight='x108'>
 		{text}
 	</Box>
 );
 
-const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }) => {
+const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopyProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 

apps/meteor/client/components/avatar/RoomAvatar.tsx

@@ -7,7 +7,7 @@ import BaseAvatar from './BaseAvatar';
 
 type RoomAvatarProps = {
 	/* @deprecated */
-	size?: 'x16' | 'x20' | 'x28' | 'x36' | 'x40' | 'x124';
+	size?: 'x16' | 'x20' | 'x28' | 'x36' | 'x40' | 'x124' | 'x332';
 	/* @deprecated */
 	url?: string;
 

apps/meteor/client/components/avatar/RoomAvatarEditor.js → apps/meteor/client/components/avatar/RoomAvatarEditor.tsx

+import { IRoom } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, ButtonGroup, Icon } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactElement } from 'react';
 
 import { getAvatarURL } from '../../../app/utils/lib/getAvatarURL';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useFileInput } from '../../hooks/useFileInput';
 import RoomAvatar from './RoomAvatar';
 
-const RoomAvatarEditor = ({ room, roomAvatar, onChangeAvatar = () => {}, ...props }) => {
+type RoomAvatarEditorProps = {
+	room: IRoom;
+	roomAvatar?: string;
+	onChangeAvatar: (url: string | null) => void;
+};
+
+const RoomAvatarEditor = ({ room, roomAvatar, onChangeAvatar }: RoomAvatarEditorProps): ReactElement => {
 	const t = useTranslation();
 
 	const handleChangeAvatar = useMutableCallback((file) => {
 		const reader = new FileReader();
 		reader.readAsDataURL(file);
-		reader.onloadend = () => {
-			onChangeAvatar(reader.result);
+		reader.onloadend = (): void => {
+			if (typeof reader.result === 'string') {
+				onChangeAvatar(reader.result);
+			}
 		};
 	});
 
@@ -32,7 +41,7 @@ const RoomAvatarEditor = ({ room, roomAvatar, onChangeAvatar = () => {}, ...prop
 	const defaultUrl = room.prid ? getAvatarURL({ roomId: room.prid }) : getAvatarURL({ username: `@${room.name}` }); // Discussions inherit avatars from the parent room
 
 	return (
-		<Box borderRadius='x2' maxWidth='x332' w='full' position='relative' {...props}>
+		<Box borderRadius='x2' maxWidth='x332' w='full' position='relative'>
 			<RoomAvatar {...(roomAvatar !== undefined && { url: roomAvatar === null ? defaultUrl : roomAvatar })} room={room} size='x332' />
 			<Box
 				className={[

apps/meteor/client/views/account/security/BackupCodesModal.tsx

@@ -25,7 +25,7 @@ const BackupCodesModal: FC<BackupCodesModalProps> = ({ codes, onClose, ...props
 				<Box mb='x8' withRichContent>
 					{t('Make_sure_you_have_a_copy_of_your_codes_1')}
 				</Box>
-				<TextCopy text={codesText} wordBreak='break-word' mb='x8' />
+				<TextCopy text={codesText} mb='x8' />
 				<Box mb='x8' withRichContent>
 					{t('Make_sure_you_have_a_copy_of_your_codes_2')}
 				</Box>