Change interfaces and add TaskListComponent and styles

app/containers/markdown/index.tsx

@@ -243,8 +243,8 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	};
 
 	renderHashtag = ({ hashtag }: { hashtag: string }) => {
-		const { channels, navToRoomInfo, style, theme } = this.props;
-		return <MarkdownHashtag hashtag={hashtag} channels={channels} navToRoomInfo={navToRoomInfo} theme={theme} style={style} />;
+		const { channels, navToRoomInfo, style } = this.props;
+		return <MarkdownHashtag hashtag={hashtag} channels={channels} navToRoomInfo={navToRoomInfo} style={style} />;
 	};
 
 	renderAtMention = ({ mentionName }: { mentionName: string }) => {

app/containers/markdown/new/CodeLine.tsx

@@ -6,6 +6,12 @@ interface ICodeLineProps {
 	value: CodeLineProps['value'];
 }
 
-const CodeLine: React.FC<ICodeLineProps> = ({ value }) => <Text>{value.type === 'PLAIN_TEXT' && value.value}</Text>;
+const CodeLine: React.FC<ICodeLineProps> = ({ value }) => {
+	if (value.type !== 'PLAIN_TEXT') {
+		return null;
+	}
+
+	return <Text>{value.value}</Text>;
+};
 
 export default CodeLine;

app/containers/markdown/new/Emoji.tsx

@@ -17,7 +17,7 @@ const Emoji: React.FC<IEmojiProps> = ({ value, style, isBigEmoji }) => {
 	const { theme } = useTheme();
 	const emojiUnicode = shortnameToUnicode(`:${value.value}:`);
 	return (
-		<Text style={[{ color: themes[theme!].bodyText }, isBigEmoji ? styles.textBig : styles.text, style]}>{emojiUnicode}</Text>
+		<Text style={[{ color: themes[theme].bodyText }, isBigEmoji ? styles.textBig : styles.text, style]}>{emojiUnicode}</Text>
 	);
 };
 

app/containers/markdown/new/Inline.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, Text, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
 import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
 
 import Hashtag from '../Hashtag';
@@ -11,28 +11,21 @@ import Italic from './Italic';
 import Emoji from './Emoji';
 import Mention from './Mention';
 import InlineCode from './InlineCode';
-
-interface IUser {
-	_id: string;
-	username: string;
-	name: string;
-}
-
-type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
+import { UserMention } from '../../message/interfaces';
 
 interface IParagraphProps {
 	value: ParagraphProps['value'];
-	mentions: UserMention[];
-	channels: {
+	mentions?: UserMention[];
+	channels?: {
 		name: string;
 		_id: number;
 	}[];
-	navToRoomInfo: Function;
-	style: StyleProp<ViewStyle>[];
+	navToRoomInfo?: Function;
+	style?: StyleProp<ViewStyle>[];
 }
 
 const Inline: React.FC<IParagraphProps> = ({ value, mentions, channels, navToRoomInfo, style }) => (
-	<Text>
+	<>
 		{value.map(block => {
 			switch (block.type) {
 				case 'PLAIN_TEXT':
@@ -57,7 +50,7 @@ const Inline: React.FC<IParagraphProps> = ({ value, mentions, channels, navToRoo
 					return null;
 			}
 		})}
-	</Text>
+	</>
 );
 
 export default Inline;

app/containers/markdown/new/Mention.tsx

@@ -6,14 +6,7 @@ import styles from '../styles';
 import { events, logEvent } from '../../../utils/log';
 import { useTheme } from '../../../theme';
 import { themes } from '../../../constants/colors';
-
-interface IUser {
-	_id: string;
-	username: string;
-	name: string;
-}
-
-type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
+import { UserMention } from '../../message/interfaces';
 
 interface IMentionProps {
 	value: UserMentionProps['value'];

app/containers/markdown/new/OrderedList.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable react/no-array-index-key */
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { OrderedList as OrderedListProps } from '@rocket.chat/message-parser';
 
 import Inline from './Inline';
@@ -9,10 +8,16 @@ interface IOrderedListProps {
 	value: OrderedListProps['value'];
 }
 
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row'
+	}
+});
+
 const OrderedList: React.FC<IOrderedListProps> = React.memo(({ value }) => (
 	<>
 		{value.map((item, index) => (
-			<View style={{ flexDirection: 'row' }}>
+			<View style={styles.container}>
 				<Text>{index + 1}. </Text>
 				<Inline value={item.value} />
 			</View>

app/containers/markdown/new/Paragraph.tsx

@@ -1,30 +1,31 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, Text, ViewStyle } from 'react-native';
 import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
 
+import { UserMention } from '../../message/interfaces';
 import Inline from './Inline';
-
-interface IUser {
-	_id: string;
-	username: string;
-	name: string;
-}
-
-type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
+import styles from '../styles';
+import { useTheme } from '../../../theme';
+import { themes } from '../../../constants/colors';
 
 interface IParagraphProps {
 	value: ParagraphProps['value'];
-	mentions: UserMention[];
-	channels: {
+	mentions?: UserMention[];
+	channels?: {
 		name: string;
 		_id: number;
 	}[];
-	navToRoomInfo: Function;
-	style: StyleProp<ViewStyle>;
+	navToRoomInfo?: Function;
+	style?: StyleProp<ViewStyle>[];
 }
 
-const Paragraph: React.FC<IParagraphProps> = ({ value, mentions, channels, navToRoomInfo, style }) => (
-	<Inline value={value} mentions={mentions} channels={channels} navToRoomInfo={navToRoomInfo} style={style} />
-);
+const Paragraph: React.FC<IParagraphProps> = ({ value, mentions, channels, navToRoomInfo, style }) => {
+	const { theme } = useTheme();
+	return (
+		<Text style={[styles.text, style, { color: themes[theme].bodyText }]}>
+			<Inline value={value} mentions={mentions} channels={channels} navToRoomInfo={navToRoomInfo} style={style} />
+		</Text>
+	);
+};
 
 export default Paragraph;

app/containers/markdown/new/Quote.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import { View } from 'react-native';
 import { Quote as QuoteProps } from '@rocket.chat/message-parser';

app/containers/markdown/new/Strike.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { Strike as StrikeProps } from '@rocket.chat/message-parser';

app/containers/markdown/new/TaskList.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { Tasks as TasksProps } from '@rocket.chat/message-parser';
+import { Checkbox } from 'react-native-ui-lib';
+
+import Inline from './Inline';
+
+interface ITasksProps {
+	value: TasksProps['value'];
+}
+
+const TaskList: React.FC<ITasksProps> = ({ value }) => (
+	<Text
+		style={{
+			marginLeft: 0,
+			paddingLeft: 0
+		}}>
+		{value.map(item => (
+			<>
+				<Checkbox checked={item.status} /> <Inline value={item.value} />
+			</>
+		))}
+	</Text>
+);
+
+export default TaskList;

app/containers/markdown/new/index.tsx

@@ -9,14 +9,9 @@ import Code from './Code';
 import BigEmoji from './BigEmoji';
 import OrderedList from './OrderedList';
 import UnorderedList from './UnorderedList';
+import { UserMention } from '../../message/interfaces';
+import TaskList from './TaskList';
 
-interface IUser {
-	_id: string;
-	username: string;
-	name: string;
-}
-
-type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
 interface IBodyProps {
 	tokens: MarkdownAST;
 	mentions: UserMention[];
@@ -44,7 +39,7 @@ const Body: React.FC<IBodyProps> = ({ tokens, mentions, channels, navToRoomInfo,
 					case 'ORDERED_LIST':
 						return <OrderedList value={block.value} />;
 					case 'TASKS':
-						return <OrderedList value={block.value} />;
+						return <TaskList value={block.value} />;
 					case 'QUOTE':
 						return <Quote value={block.value} />;
 					case 'PARAGRAPH':

app/containers/message/interfaces.ts

@@ -1,3 +1,5 @@
+import { MarkdownAST } from '@rocket.chat/message-parser';
+
 export interface IMessageAttachments {
 	attachments: any;
 	timeFormat: string;
@@ -48,12 +50,21 @@ export interface IMessageCallButton {
 	callJitsi: Function;
 }
 
+export interface IUser {
+	_id: string;
+	username: string;
+	name: string;
+}
+
+export type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
+
 export interface IMessageContent {
 	isTemp: boolean;
 	isInfo: boolean;
 	tmid: string;
 	isThreadRoom: boolean;
 	msg: string;
+	md: MarkdownAST;
 	theme: string;
 	isEdited: boolean;
 	isEncrypted: boolean;
@@ -62,7 +73,7 @@ export interface IMessageContent {
 		name: string;
 		_id: number;
 	}[];
-	mentions: object[];
+	mentions: UserMention[];
 	navToRoomInfo: Function;
 	useRealName: boolean;
 	isIgnored: boolean;