Chore: Migrate Markdown to Typescript

app/containers/Avatar/Avatar.tsx

@@ -44,7 +44,7 @@ const Avatar = React.memo(
 		if (emoji) {
 			image = (
 				<Emoji
-					theme={theme}
+					theme={theme!}
 					baseUrl={server}
 					getCustomEmoji={getCustomEmoji}
 					isMessageContainsOnlyEmoji

app/containers/Avatar/interfaces.ts

@@ -1,3 +1,5 @@
+import { TGetCustomEmoji } from '../../definitions/IEmoji';
+
 export interface IAvatar {
 	server?: string;
 	style?: any;
@@ -14,7 +16,7 @@ export interface IAvatar {
 	};
 	theme?: string;
 	onPress?: () => void;
-	getCustomEmoji?: () => any;
+	getCustomEmoji?: TGetCustomEmoji;
 	avatarETag?: string;
 	isStatic?: boolean | string;
 	rid?: string;

app/containers/EmojiPicker/CustomEmoji.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import FastImage from '@rocket.chat/react-native-fast-image';
 
-import { ICustomEmoji } from './interfaces';
+import { ICustomEmoji } from '../../definitions/IEmoji';
 
 const CustomEmoji = React.memo(
 	({ baseUrl, emoji, style }: ICustomEmoji) => (

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -5,7 +5,7 @@ import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import styles from './styles';
 import CustomEmoji from './CustomEmoji';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
-import { IEmoji, IEmojiCategory } from './interfaces';
+import { IEmoji, IEmojiCategory } from '../../definitions/IEmoji';
 
 const EMOJI_SIZE = 50;
 

app/containers/EmojiPicker/index.tsx

@@ -17,7 +17,7 @@ import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import log from '../../utils/log';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
-import { IEmoji } from './interfaces';
+import { IEmoji } from '../../definitions/IEmoji';
 
 const scrollProps = {
 	keyboardShouldPersistTaps: 'always',

app/containers/MessageActions/Header.tsx

@@ -10,8 +10,8 @@ import database from '../../lib/database';
 import { Button } from '../ActionSheet';
 import { useDimensions } from '../../dimensions';
 import sharedStyles from '../../views/Styles';
+import { IEmoji } from '../../definitions/IEmoji';
 import { TFrequentlyUsedEmojiModel } from '../../definitions/IFrequentlyUsedEmoji';
-import { IEmoji } from '../EmojiPicker/interfaces';
 
 interface IHeader {
 	handleReaction: Function;

app/containers/MessageBox/Mentions/MentionEmoji.tsx

@@ -6,7 +6,7 @@ import shortnameToUnicode from '../../../utils/shortnameToUnicode';
 import styles from '../styles';
 import MessageboxContext from '../Context';
 import CustomEmoji from '../../EmojiPicker/CustomEmoji';
-import { IEmoji } from '../../EmojiPicker/interfaces';
+import { IEmoji } from '../../../definitions/IEmoji';
 
 interface IMessageBoxMentionEmoji {
 	item: IEmoji;

app/containers/MessageBox/Mentions/MentionItem.tsx

@@ -8,7 +8,7 @@ import FixedMentionItem from './FixedMentionItem';
 import MentionEmoji from './MentionEmoji';
 import { MENTIONS_TRACKING_TYPE_EMOJIS, MENTIONS_TRACKING_TYPE_COMMANDS, MENTIONS_TRACKING_TYPE_CANNED } from '../constants';
 import { themes } from '../../../constants/colors';
-import { IEmoji } from '../../EmojiPicker/interfaces';
+import { IEmoji } from '../../../definitions/IEmoji';
 
 interface IMessageBoxMentionItem {
 	item: {

app/containers/MessageBox/ReplyPreview.tsx

@@ -3,10 +3,11 @@ import { StyleSheet, Text, View } from 'react-native';
 import moment from 'moment';
 import { connect } from 'react-redux';
 
-import Markdown from '../markdown';
+import { MarkdownPreview } from '../markdown';
 import { CustomIcon } from '../../lib/Icons';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
+import { IMessage } from '../../definitions/IMessage';
 
 const styles = StyleSheet.create({
 	container: {
@@ -42,11 +43,7 @@ const styles = StyleSheet.create({
 
 interface IMessageBoxReplyPreview {
 	replying: boolean;
-	message: {
-		ts: Date;
-		msg: string;
-		u: any;
-	};
+	message: IMessage;
 	Message_TimeFormat: string;
 	close(): void;
 	baseUrl: string;
@@ -57,17 +54,7 @@ interface IMessageBoxReplyPreview {
 }
 
 const ReplyPreview = React.memo(
-	({
-		message,
-		Message_TimeFormat,
-		baseUrl,
-		username,
-		replying,
-		getCustomEmoji,
-		close,
-		theme,
-		useRealName
-	}: IMessageBoxReplyPreview) => {
+	({ message, Message_TimeFormat, replying, close, theme, useRealName }: IMessageBoxReplyPreview) => {
 		if (!replying) {
 			return null;
 		}
@@ -82,16 +69,7 @@ const ReplyPreview = React.memo(
 						</Text>
 						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 					</View>
-					{/* @ts-ignore*/}
-					<Markdown
-						msg={message.msg}
-						baseUrl={baseUrl}
-						username={username}
-						getCustomEmoji={getCustomEmoji}
-						numberOfLines={1}
-						preview
-						theme={theme}
-					/>
+					<MarkdownPreview msg={message.msg} />
 				</View>
 				<CustomIcon name='close' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
 			</View>

app/containers/MessageBox/index.tsx

@@ -47,6 +47,7 @@ import Navigation from '../../lib/Navigation';
 import { withActionSheet } from '../ActionSheet';
 import { sanitizeLikeString } from '../../lib/database/utils';
 import { CustomIcon } from '../../lib/Icons';
+import { IMessage } from '../../definitions/IMessage';
 import { forceJpgExtension } from './forceJpgExtension';
 
 if (isAndroid) {
@@ -74,12 +75,7 @@ const videoPickerConfig = {
 interface IMessageBoxProps {
 	rid: string;
 	baseUrl: string;
-	message: {
-		u: {
-			username: string;
-		};
-		id: any;
-	};
+	message: IMessage;
 	replying: boolean;
 	editing: boolean;
 	threadsEnabled: boolean;
@@ -1072,7 +1068,6 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 
 		const replyPreview = !recording ? (
 			<ReplyPreview
-				// @ts-ignore
 				message={message}
 				close={replyCancel}
 				username={user.username}

app/containers/ReactionsModal.tsx

@@ -9,6 +9,7 @@ import { CustomIcon } from '../lib/Icons';
 import sharedStyles from '../views/Styles';
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
+import { TGetCustomEmoji } from '../definitions/IEmoji';
 import SafeAreaView from './SafeAreaView';
 
 const styles = StyleSheet.create({
@@ -66,7 +67,7 @@ interface IItem {
 	};
 	user?: { username: any };
 	baseUrl?: string;
-	getCustomEmoji?: Function;
+	getCustomEmoji?: TGetCustomEmoji;
 	theme?: string;
 }
 

app/containers/RoomHeader/RoomHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
-import Markdown from '../markdown';
+import { MarkdownPreview } from '../markdown';
 import RoomTypeIcon from '../RoomTypeIcon';
 import { withTheme } from '../../theme';
 
@@ -101,16 +101,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, theme, scale }
 
 	// subtitle
 	if (subtitle) {
-		return (
-			// @ts-ignore
-			<Markdown
-				preview
-				msg={subtitle}
-				style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]}
-				numberOfLines={1}
-				theme={theme}
-			/>
-		);
+		return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: themes[theme].auxiliaryText }]} />;
 	}
 
 	return null;
@@ -126,10 +117,7 @@ const HeaderTitle = React.memo(({ title, tmid, prid, scale, theme, testID }: TRo
 		);
 	}
 
-	return (
-		// @ts-ignore
-		<Markdown preview msg={title} style={[styles.title, titleStyle]} numberOfLines={1} theme={theme} testID={testID} />
-	);
+	return <MarkdownPreview msg={title} style={[styles.title, titleStyle]} testID={testID} />;
 });
 
 const Header = React.memo(

app/containers/UIKit/index.tsx

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { BLOCK_CONTEXT, UiKitParserMessage, UiKitParserModal, uiKitMessage, uiKitModal } from '@rocket.chat/ui-kit';
 
-import Markdown from '../markdown';
+import Markdown, { MarkdownPreview } from '../markdown';
 import Button from '../Button';
 import TextInput from '../TextInput';
 import { textParser, useBlockContext } from './utils';
@@ -49,10 +49,10 @@ class MessageParser extends UiKitParserMessage {
 		}
 
 		const isContext = context === BLOCK_CONTEXT.CONTEXT;
-		return (
-			// @ts-ignore
-			<Markdown msg={text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} preview={isContext} />
-		);
+		if (isContext) {
+			return <MarkdownPreview msg={text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />;
+		}
+		return <Markdown msg={text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
 	}
 
 	button(element: any, context: any) {

app/containers/markdown/AtMention.tsx

@@ -8,10 +8,10 @@ import { events, logEvent } from '../../utils/log';
 
 interface IAtMention {
 	mention: string;
-	username: string;
-	navToRoomInfo: Function;
+	username?: string;
+	navToRoomInfo?: Function;
 	style?: any;
-	useRealName: boolean;
+	useRealName?: boolean;
 	mentions: any;
 }
 
@@ -51,7 +51,9 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 			t: 'd',
 			rid: user && user._id
 		};
-		navToRoomInfo(navParam);
+		if (navToRoomInfo) {
+			navToRoomInfo(navParam);
+		}
 	};
 
 	if (user) {

app/containers/markdown/Emoji.tsx

@@ -12,8 +12,8 @@ interface IEmoji {
 	getCustomEmoji?: Function;
 	baseUrl: string;
 	customEmojis?: any;
-	style: object;
-	theme?: string;
+	style?: object;
+	theme: string;
 	onEmojiSelected?: Function;
 	tabEmojiStyle?: object;
 }
@@ -32,7 +32,7 @@ const Emoji = React.memo(
 			);
 		}
 		return (
-			<Text style={[{ color: themes[theme!].bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
+			<Text style={[{ color: themes[theme].bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
 				{emojiUnicode}
 			</Text>
 		);

app/containers/markdown/Hashtag.tsx

@@ -1,31 +1,30 @@
 import React from 'react';
-import { Text, TextStyle } from 'react-native';
+import { Text, TextStyle, StyleProp } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { useTheme } from '../../theme';
+import { IUserChannel } from './interfaces';
 import styles from './styles';
 
 interface IHashtag {
 	hashtag: string;
-	navToRoomInfo: Function;
-	style?: TextStyle[];
-	channels: {
-		[index: number]: string | number;
-		name: string;
-		_id: number;
-	}[];
+	navToRoomInfo?: Function;
+	style?: StyleProp<TextStyle>[];
+	channels?: IUserChannel[];
 }
 
 const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IHashtag) => {
 	const { theme } = useTheme();
 
 	const handlePress = () => {
 		const index = channels?.findIndex(channel => channel.name === hashtag);
-		const navParam = {
-			t: 'c',
-			rid: channels[index]._id
-		};
-		navToRoomInfo(navParam);
+		if (index && navToRoomInfo) {
+			const navParam = {
+				t: 'c',
+				rid: channels?.[index]._id
+			};
+			navToRoomInfo(navParam);
+		}
 	};
 
 	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {

app/containers/markdown/Link.tsx

@@ -7,12 +7,13 @@ import { LISTENER } from '../Toast';
 import EventEmitter from '../../utils/events';
 import I18n from '../../i18n';
 import openLink from '../../utils/openLink';
+import { TOnLinkPress } from './interfaces';
 
 interface ILink {
 	children: JSX.Element;
 	link: string;
 	theme: string;
-	onLinkPress: Function;
+	onLinkPress?: TOnLinkPress;
 }
 
 const Link = React.memo(({ children, link, theme, onLinkPress }: ILink) => {

app/containers/markdown/List.tsx

@@ -5,7 +5,7 @@ interface IList {
 	ordered: boolean;
 	start: number;
 	tight: boolean;
-	numberOfLines: number;
+	numberOfLines?: number;
 }
 
 const List = React.memo(({ children, ordered, tight, start = 1, numberOfLines = 0 }: IList) => {