Chore: Evaluate Markdown - TypeScript (#3948)

RocketChat · Mar 25, 2022 · 6418803 · 6418803
1 parent d5ac663
commit 6418803
Show file tree

Hide file tree

Showing 30 changed files with 60 additions and 59 deletions.
diff --git a/app/containers/markdown/AtMention.tsx b/app/containers/markdown/AtMention.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { StyleProp, Text, TextStyle } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { themes } from '../../constants/colors';
 import styles from './styles';
 import { events, logEvent } from '../../utils/log';
+import { IUserMention } from './interfaces';
 
 interface IAtMention {
 	mention: string;
 	username?: string;
 	navToRoomInfo?: Function;
-	style?: any;
+	style?: StyleProp<TextStyle>[];
 	useRealName?: boolean;
-	mentions: any;
+	mentions?: IUserMention[];
 }
 
 const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => {
@@ -23,7 +24,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 				style={[
 					styles.mention,
 					{
-						color: themes[theme!].mentionGroupColor
+						color: themes[theme].mentionGroupColor
 					},
 					...style
 				]}>
@@ -35,11 +36,11 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 	let mentionStyle = {};
 	if (mention === username) {
 		mentionStyle = {
-			color: themes[theme!].mentionMeColor
+			color: themes[theme].mentionMeColor
 		};
 	} else {
 		mentionStyle = {
-			color: themes[theme!].mentionOtherColor
+			color: themes[theme].mentionOtherColor
 		};
 	}
 
@@ -64,7 +65,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 		);
 	}
 
-	return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`@${mention}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`@${mention}`}</Text>;
 });
 
 export default AtMention;
diff --git a/app/containers/markdown/BlockQuote.tsx b/app/containers/markdown/BlockQuote.tsx
@@ -5,7 +5,7 @@ import { themes } from '../../constants/colors';
 import styles from './styles';
 
 interface IBlockQuote {
-	children: JSX.Element;
+	children: React.ReactElement | null;
 	theme: string;
 }
 

diff --git a/app/containers/markdown/Hashtag.tsx b/app/containers/markdown/Hashtag.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextStyle, StyleProp } from 'react-native';
+import { StyleProp, Text, TextStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { useTheme } from '../../theme';
@@ -33,7 +33,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 				style={[
 					styles.mention,
 					{
-						color: themes[theme!].mentionOtherColor
+						color: themes[theme].mentionOtherColor
 					},
 					...style
 				]}
@@ -42,7 +42,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 			</Text>
 		);
 	}
-	return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
 });
 
 export default Hashtag;
diff --git a/app/containers/markdown/Link.tsx b/app/containers/markdown/Link.tsx
@@ -10,7 +10,7 @@ import openLink from '../../utils/openLink';
 import { TOnLinkPress } from './interfaces';
 
 interface ILink {
-	children: JSX.Element;
+	children: React.ReactElement | null;
 	link: string;
 	theme: string;
 	onLinkPress?: TOnLinkPress;

diff --git a/app/containers/markdown/List.tsx b/app/containers/markdown/List.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface IList {
-	children: JSX.Element;
+	children: React.ReactElement[] | null;
 	ordered: boolean;
 	start: number;
 	tight: boolean;
@@ -11,9 +11,8 @@ interface IList {
 const List = React.memo(({ children, ordered, tight, start = 1, numberOfLines = 0 }: IList) => {
 	let bulletWidth = 15;
 
-	if (ordered) {
-		// @ts-ignore
-		const lastNumber = start + children.length - 1;
+	if (ordered && children) {
+		const lastNumber = start + children?.length - 1;
 		bulletWidth = 9 * lastNumber.toString().length + 7;
 	}
 

diff --git a/app/containers/markdown/ListItem.tsx b/app/containers/markdown/ListItem.tsx
@@ -18,7 +18,7 @@ const style = StyleSheet.create({
 });
 
 interface IListItem {
-	children: JSX.Element;
+	children: React.ReactElement | null;
 	bulletWidth: number;
 	level: number;
 	ordered: boolean;

diff --git a/app/containers/markdown/Preview.tsx b/app/containers/markdown/Preview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, Text, TextStyle } from 'react-native';
+import { Text, TextStyle } from 'react-native';
 import removeMarkdown from 'remove-markdown';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
@@ -13,10 +13,10 @@ interface IMarkdownPreview {
 	msg?: string;
 	numberOfLines?: number;
 	testID?: string;
-	style?: StyleProp<TextStyle>[];
+	style?: TextStyle[];
 }
 
-const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdownPreview): React.ReactElement | null => {
+const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdownPreview) => {
 	if (!msg) {
 		return null;
 	}

diff --git a/app/containers/markdown/Table.tsx b/app/containers/markdown/Table.tsx
@@ -8,7 +8,7 @@ import I18n from '../../i18n';
 import { themes } from '../../constants/colors';
 
 interface ITable {
-	children: JSX.Element;
+	children: React.ReactElement | null;
 	numColumns: number;
 	theme: string;
 }

diff --git a/app/containers/markdown/TableCell.tsx b/app/containers/markdown/TableCell.tsx
@@ -6,7 +6,7 @@ import styles from './styles';
 
 interface ITableCell {
 	align: '' | 'left' | 'center' | 'right';
-	children: JSX.Element;
+	children: React.ReactElement | null;
 	isLastCell: boolean;
 	theme: string;
 }

diff --git a/app/containers/markdown/TableRow.tsx b/app/containers/markdown/TableRow.tsx
@@ -5,7 +5,7 @@ import { themes } from '../../constants/colors';
 import styles from './styles';
 
 interface ITableRow {
-	children: JSX.Element;
+	children: React.ReactElement | null;
 	isLastRow: boolean;
 	theme: string;
 }
@@ -16,7 +16,7 @@ const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRo
 		rowStyle.push(styles.rowBottomBorder);
 	}
 
-	const children: any = React.Children.toArray(_children);
+	const children = React.Children.toArray(_children) as React.ReactElement[];
 	children[children.length - 1] = React.cloneElement(children[children.length - 1], {
 		isLastCell: true
 	});

diff --git a/app/containers/markdown/interfaces.ts b/app/containers/markdown/interfaces.ts
@@ -2,6 +2,7 @@ export interface IUserMention {
 	_id: string;
 	username: string;
 	name?: string;
+	type?: string;
 }
 
 export interface IUserChannel {

diff --git a/app/containers/markdown/new/BigEmoji.tsx b/app/containers/markdown/new/BigEmoji.tsx
@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const BigEmoji = ({ value }: IBigEmojiProps): JSX.Element => (
+const BigEmoji = ({ value }: IBigEmojiProps) => (
 	<View style={styles.container}>
 		{value.map(block => (
 			<Emoji value={block.value} isBigEmoji />

diff --git a/app/containers/markdown/new/Bold.tsx b/app/containers/markdown/new/Bold.tsx
@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Bold = ({ value }: IBoldProps): JSX.Element => (
+const Bold = ({ value }: IBoldProps) => (
 	<Text style={styles.text}>
 		{value.map(block => {
 			switch (block.type) {

diff --git a/app/containers/markdown/new/Code.tsx b/app/containers/markdown/new/Code.tsx
@@ -11,17 +11,17 @@ interface ICodeProps {
 	value: CodeProps['value'];
 }
 
-const Code = ({ value }: ICodeProps): JSX.Element => {
+const Code = ({ value }: ICodeProps) => {
 	const { theme } = useTheme();
 
 	return (
 		<Text
 			style={[
 				styles.codeBlock,
 				{
-					color: themes[theme!].bodyText,
-					backgroundColor: themes[theme!].bannerBackground,
-					borderColor: themes[theme!].borderColor
+					color: themes[theme].bodyText,
+					backgroundColor: themes[theme].bannerBackground,
+					borderColor: themes[theme].borderColor
 				}
 			]}>
 			{value.map(block => {

diff --git a/app/containers/markdown/new/CodeLine.tsx b/app/containers/markdown/new/CodeLine.tsx
@@ -6,7 +6,7 @@ interface ICodeLineProps {
 	value: CodeLineProps['value'];
 }
 
-const CodeLine = ({ value }: ICodeLineProps): JSX.Element | null => {
+const CodeLine = ({ value }: ICodeLineProps) => {
 	if (value.type !== 'PLAIN_TEXT') {
 		return null;
 	}

diff --git a/app/containers/markdown/new/Emoji.tsx b/app/containers/markdown/new/Emoji.tsx
@@ -14,7 +14,7 @@ interface IEmojiProps {
 	isBigEmoji?: boolean;
 }
 
-const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => {
+const Emoji = ({ value, isBigEmoji }: IEmojiProps) => {
 	const { theme } = useTheme();
 	const { baseUrl, getCustomEmoji } = useContext(MarkdownContext);
 	const emojiUnicode = shortnameToUnicode(`:${value.value}:`);
@@ -23,7 +23,7 @@ const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => {
 	if (emoji) {
 		return <CustomEmoji baseUrl={baseUrl} style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
 	}
-	return <Text style={[{ color: themes[theme!].bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>;
+	return <Text style={[{ color: themes[theme].bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>;
 };
 
 export default Emoji;
diff --git a/app/containers/markdown/new/Heading.tsx b/app/containers/markdown/new/Heading.tsx
@@ -11,12 +11,12 @@ interface IHeadingProps {
 	level: HeadingProps['level'];
 }
 
-const Heading = ({ value, level }: IHeadingProps): JSX.Element => {
+const Heading = ({ value, level }: IHeadingProps) => {
 	const { theme } = useTheme();
 	const textStyle = styles[`heading${level}`];
 
 	return (
-		<Text style={[textStyle, { color: themes[theme!].bodyText }]}>
+		<Text style={[textStyle, { color: themes[theme].bodyText }]}>
 			{value.map(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':

diff --git a/app/containers/markdown/new/Image.tsx b/app/containers/markdown/new/Image.tsx
@@ -31,11 +31,11 @@ const MessageImage = ({ img, theme }: TMessageImage) => (
 	/>
 );
 
-const Image = ({ value }: IImageProps): JSX.Element => {
+const Image = ({ value }: IImageProps) => {
 	const { theme } = useTheme();
 	const { src } = value;
 
-	return <MessageImage img={src.value} theme={theme!} />;
+	return <MessageImage img={src.value} theme={theme} />;
 };
 
 export default Image;
diff --git a/app/containers/markdown/new/Inline.tsx b/app/containers/markdown/new/Inline.tsx
@@ -19,7 +19,7 @@ interface IParagraphProps {
 	value: ParagraphProps['value'];
 }
 
-const Inline = ({ value }: IParagraphProps): JSX.Element => {
+const Inline = ({ value }: IParagraphProps) => {
 	const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext);
 	return (
 		<Text style={styles.inline}>

diff --git a/app/containers/markdown/new/InlineCode.tsx b/app/containers/markdown/new/InlineCode.tsx
@@ -10,17 +10,17 @@ interface IInlineCodeProps {
 	value: InlineCodeProps['value'];
 }
 
-const InlineCode = ({ value }: IInlineCodeProps): JSX.Element => {
+const InlineCode = ({ value }: IInlineCodeProps) => {
 	const { theme } = useTheme();
 
 	return (
 		<Text
 			style={[
 				styles.codeInline,
 				{
-					color: themes[theme!].bodyText,
-					backgroundColor: themes[theme!].bannerBackground,
-					borderColor: themes[theme!].borderColor
+					color: themes[theme].bodyText,
+					backgroundColor: themes[theme].bannerBackground,
+					borderColor: themes[theme].borderColor
 				}
 			]}>
 			{(block => {

diff --git a/app/containers/markdown/new/Italic.tsx b/app/containers/markdown/new/Italic.tsx
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Italic = ({ value }: IItalicProps): JSX.Element => (
+const Italic = ({ value }: IItalicProps) => (
 	<Text style={styles.text}>
 		{value.map(block => {
 			switch (block.type) {

diff --git a/app/containers/markdown/new/Link.tsx b/app/containers/markdown/new/Link.tsx
@@ -18,7 +18,7 @@ interface ILinkProps {
 	value: LinkProps['value'];
 }
 
-const Link = ({ value }: ILinkProps): JSX.Element => {
+const Link = ({ value }: ILinkProps) => {
 	const { theme } = useTheme();
 	const { onLinkPress } = useContext(MarkdownContext);
 	const { src, label } = value;
@@ -38,7 +38,7 @@ const Link = ({ value }: ILinkProps): JSX.Element => {
 	};
 
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme!].actionTintColor }]}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].actionTintColor }]}>
 			{(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':

diff --git a/app/containers/markdown/new/OrderedList.tsx b/app/containers/markdown/new/OrderedList.tsx
@@ -11,13 +11,13 @@ interface IOrderedListProps {
 	value: OrderedListProps['value'];
 }
 
-const OrderedList = ({ value }: IOrderedListProps): JSX.Element => {
+const OrderedList = ({ value }: IOrderedListProps) => {
 	const { theme } = useTheme();
 	return (
 		<View>
 			{value.map((item, index) => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: themes[theme!].bodyText }]}>{index + 1}. </Text>
+					<Text style={[styles.text, { color: themes[theme].bodyText }]}>{index + 1}. </Text>
 					<Inline value={item.value} />
 				</View>
 			))}

diff --git a/app/containers/markdown/new/Paragraph.tsx b/app/containers/markdown/new/Paragraph.tsx
@@ -11,10 +11,10 @@ interface IParagraphProps {
 	value: ParagraphProps['value'];
 }
 
-const Paragraph = ({ value }: IParagraphProps): JSX.Element => {
+const Paragraph = ({ value }: IParagraphProps) => {
 	const { theme } = useTheme();
 	return (
-		<Text style={[styles.text, { color: themes[theme!].bodyText }]}>
+		<Text style={[styles.text, { color: themes[theme].bodyText }]}>
 			<Inline value={value} />
 		</Text>
 	);

diff --git a/app/containers/markdown/new/Plain.tsx b/app/containers/markdown/new/Plain.tsx
@@ -10,10 +10,10 @@ interface IPlainProps {
 	value: PlainProps['value'];
 }
 
-const Plain = ({ value }: IPlainProps): JSX.Element => {
+const Plain = ({ value }: IPlainProps) => {
 	const { theme } = useTheme();
 	return (
-		<Text accessibilityLabel={value} style={[styles.plainText, { color: themes[theme!].bodyText }]}>
+		<Text accessibilityLabel={value} style={[styles.plainText, { color: themes[theme].bodyText }]}>
 			{value}
 		</Text>
 	);