[IMPROVE] - migrating the message container (in progress)

app/containers/message/Discussion.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { View, Text } from 'react-native';
-import PropTypes from 'prop-types';
 
 import Touchable from './Touchable';
 import { formatMessageCount, BUTTON_HIT_SLOP } from './utils';
@@ -12,9 +11,14 @@ import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 import { formatDateThreads } from '../../utils/room';
 
-const Discussion = React.memo(({
+interface IMessageDiscussion {
-	msg, dcount, dlm, theme
+	msg: string;
-}) => {
+	dcount: number;
+	dlm: string;
+	theme: string;
+}
+
+const Discussion = React.memo(({ msg, dcount, dlm, theme }: IMessageDiscussion) => {
 	let time;
 	if (dlm) {
 		time = formatDateThreads(dlm);
@@ -57,12 +61,6 @@ const Discussion = React.memo(({
 	return true;
 });
 
-Discussion.propTypes = {
-	msg: PropTypes.string,
-	dcount: PropTypes.number,
-	dlm: PropTypes.string,
-	theme: PropTypes.string
-};
 Discussion.displayName = 'MessageDiscussion';
 
 export default Discussion;

app/containers/message/Emoji.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import { Text } from 'react-native';
-import PropTypes from 'prop-types';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 
-const Emoji = React.memo(({
+interface IMessageEmoji {
-	content, baseUrl, standardEmojiStyle, customEmojiStyle, getCustomEmoji
+	content: any;
-}) => {
+	baseUrl: string;
+	standardEmojiStyle: object;
+	customEmojiStyle: object;
+	getCustomEmoji: Function;
+}
+
+const Emoji = React.memo(({ content, baseUrl, standardEmojiStyle, customEmojiStyle, getCustomEmoji }: IMessageEmoji) => {
 	const parsedContent = content.replace(/^:|:$/g, '');
 	const emoji = getCustomEmoji(parsedContent);
 	if (emoji) {
@@ -16,13 +21,6 @@ const Emoji = React.memo(({
 	return <Text style={standardEmojiStyle}>{ shortnameToUnicode(content) }</Text>;
 }, () => true);
 
-Emoji.propTypes = {
-	content: PropTypes.string,
-	baseUrl: PropTypes.string,
-	standardEmojiStyle: PropTypes.object,
-	customEmojiStyle: PropTypes.object,
-	getCustomEmoji: PropTypes.func
-};
 Emoji.displayName = 'MessageEmoji';
 
 export default Emoji;

app/containers/message/Encrypted.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 
 import Touchable from './Touchable';
 import { E2E_MESSAGE_TYPE } from '../../lib/encryption/constants';
@@ -9,7 +8,12 @@ import { BUTTON_HIT_SLOP } from './utils';
 import MessageContext from './Context';
 import styles from './styles';
 
-const Encrypted = React.memo(({ type, theme }) => {
+interface IMessageEncrypted {
+	type: string;
+	theme: string;
+}
+
+const Encrypted = React.memo(({ type, theme }: IMessageEncrypted) => {
 	if (type !== E2E_MESSAGE_TYPE) {
 		return null;
 	}
@@ -21,9 +25,5 @@ const Encrypted = React.memo(({ type, theme }) => {
 		</Touchable>
 	);
 });
-Encrypted.propTypes = {
-	type: PropTypes.string,
-	theme: PropTypes.string
-};
 
 export default Encrypted;

app/containers/message/Image.tsx

@@ -13,11 +13,28 @@ import { formatAttachmentUrl } from '../../lib/utils';
 import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 
+type TMessageButton = {
+	children: JSX.Element;
+	onPress: Function;
+	theme: string;
+}
+
+type TMessageImage = {
+	img: string;
+	theme: string;
+}
+
+interface IMessageImage {
+	file: { image_url: string; description: string; };
+	imageUrl: string;
+	showAttachment: Function;
+	theme: string;
+	getCustomEmoji: Function;
+}
+
 const ImageProgress = createImageProgress(FastImage);
 
-const Button = React.memo(({
+const Button = React.memo(({children, onPress, theme}: TMessageButton) => (
-	children, onPress, theme
-}) => (
 	<Touchable
 		onPress={onPress}
 		style={styles.imageContainer}
@@ -27,7 +44,7 @@ const Button = React.memo(({
 	</Touchable>
 ));
 
-export const MessageImage = React.memo(({ img, theme }) => (
+export const MessageImage = React.memo(({ img, theme }: TMessageImage) => (
 	<ImageProgress
 		style={[styles.image, { borderColor: themes[theme].borderColor }]}
 		source={{ uri: encodeURI(img) }}
@@ -39,9 +56,7 @@ export const MessageImage = React.memo(({ img, theme }) => (
 	/>
 ));
 
-const ImageContainer = React.memo(({
+const ImageContainer = React.memo(({file, imageUrl, showAttachment, getCustomEmoji, theme}: IMessageImage) => {
-	file, imageUrl, showAttachment, getCustomEmoji, theme
-}) => {
 	const { baseUrl, user } = useContext(MessageContext);
 	const img = imageUrl || formatAttachmentUrl(file.image_url, user.id, user.token, baseUrl);
 	if (!img) {
@@ -55,6 +70,8 @@ const ImageContainer = React.memo(({
 			<Button theme={theme} onPress={onPress}>
 				<View>
 					<MessageImage img={img} theme={theme} />
+					//TODO - fix the required fields for the Markdown
+					{/*@ts-ignore*/}
 					<Markdown msg={file.description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />
 				</View>
 			</Button>
@@ -68,26 +85,8 @@ const ImageContainer = React.memo(({
 	);
 }, (prevProps, nextProps) => dequal(prevProps.file, nextProps.file) && prevProps.theme === nextProps.theme);
 
-ImageContainer.propTypes = {
-	file: PropTypes.object,
-	imageUrl: PropTypes.string,
-	showAttachment: PropTypes.func,
-	theme: PropTypes.string,
-	getCustomEmoji: PropTypes.func
-};
 ImageContainer.displayName = 'MessageImageContainer';
-
-MessageImage.propTypes = {
-	img: PropTypes.string,
-	theme: PropTypes.string
-};
 ImageContainer.displayName = 'MessageImage';
-
-Button.propTypes = {
-	children: PropTypes.node,
-	onPress: PropTypes.func,
-	theme: PropTypes.string
-};
 ImageContainer.displayName = 'MessageButton';
 
 export default ImageContainer;

app/containers/message/Reactions.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { View, Text } from 'react-native';
-import PropTypes from 'prop-types';
 
 import Touchable from './Touchable';
 import { CustomIcon } from '../../lib/Icons';
@@ -11,7 +10,26 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import MessageContext from './Context';
 
-const AddReaction = React.memo(({ theme }) => {
+type TMessageAddReaction = {
+	theme: string
+};
+
+type TMessageReaction = {
+	reaction: {
+		usernames: [];
+		emoji: object;
+	};
+	getCustomEmoji: Function;
+	theme: string;
+};
+
+interface IMessageReactions {
+	reactions: object[];
+	getCustomEmoji: Function;
+	theme: string;
+}
+
+const AddReaction = React.memo(({ theme }: TMessageAddReaction) => {
 	const { reactionInit } = useContext(MessageContext);
 	return (
 		<Touchable
@@ -29,13 +47,9 @@ const AddReaction = React.memo(({ theme }) => {
 	);
 });
 
-const Reaction = React.memo(({
+const Reaction = React.memo(({reaction, getCustomEmoji, theme}: TMessageReaction) => {
-	reaction, getCustomEmoji, theme
+	const { onReactionPress, onReactionLongPress, baseUrl, user } = useContext(MessageContext);
-}) => {
+	const reacted = reaction.usernames.findIndex((item: TMessageReaction) => item === user.username) !== -1;
-	const {
-		onReactionPress, onReactionLongPress, baseUrl, user
-	} = useContext(MessageContext);
-	const reacted = reaction.usernames.findIndex(item => item === user.username) !== -1;
 	return (
 		<Touchable
 			onPress={() => onReactionPress(reaction.emoji)}
@@ -60,15 +74,13 @@ const Reaction = React.memo(({
 	);
 });
 
-const Reactions = React.memo(({
+const Reactions = React.memo(({ reactions, getCustomEmoji, theme }: IMessageReactions) => {
-	reactions, getCustomEmoji, theme
-}) => {
 	if (!Array.isArray(reactions) || reactions.length === 0) {
 		return null;
 	}
 	return (
 		<View style={styles.reactionsContainer}>
-			{reactions.map(reaction => (
+			{reactions.map((reaction: any) => (
 				<Reaction
 					key={reaction.emoji}
 					reaction={reaction}
@@ -81,23 +93,8 @@ const Reactions = React.memo(({
 	);
 });
 
-Reaction.propTypes = {
-	reaction: PropTypes.object,
-	getCustomEmoji: PropTypes.func,
-	theme: PropTypes.string
-};
 Reaction.displayName = 'MessageReaction';
-
-Reactions.propTypes = {
-	reactions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-	getCustomEmoji: PropTypes.func,
-	theme: PropTypes.string
-};
 Reactions.displayName = 'MessageReactions';
-
-AddReaction.propTypes = {
-	theme: PropTypes.string
-};
 AddReaction.displayName = 'MessageAddReaction';
 
 export default withTheme(Reactions);

app/containers/message/Touchable.tsx

@@ -1,10 +1,9 @@
 import React, { useContext } from 'react';
 import Touchable from 'react-native-platform-touchable';
-import PropTypes from 'prop-types';
 
 import MessageContext from './Context';
 
-const RCTouchable = React.memo(({ children, ...props }) => {
+const RCTouchable: any = React.memo(({ children, ...props }: any) => {
 	const { onLongPress } = useContext(MessageContext);
 
 	return (
@@ -16,10 +15,9 @@ const RCTouchable = React.memo(({ children, ...props }) => {
 		</Touchable>
 	);
 });
-RCTouchable.propTypes = {
+
-	children: PropTypes.node
+// @ts-ignore
-};
+RCTouchable.Ripple = (...args: any[]) => Touchable.Ripple(...args);
-RCTouchable.Ripple = (...args) => Touchable.Ripple(...args);
 RCTouchable.SelectableBackgroundBorderless = () => Touchable.SelectableBackgroundBorderless();
 
 export default RCTouchable;

app/containers/message/styles.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import sharedStyles from '../../views/Styles';
 import { isTablet } from '../../utils/deviceInfo';
 
-export default StyleSheet.create({
+export default StyleSheet.create<any>({
 	root: {
 		flexDirection: 'row'
 	},

app/containers/message/utils.ts

@@ -1,7 +1,7 @@
 import I18n from '../../i18n';
 import { DISCUSSION } from './constants';
 
-export const formatMessageCount = (count, type) => {
+export const formatMessageCount = (count: number, type: string) => {
 	const discussion = type === DISCUSSION;
 	let text = discussion ? I18n.t('No_messages_yet') : null;
 	if (count === 1) {
@@ -60,9 +60,13 @@ export const SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME = [
 	SYSTEM_MESSAGE_TYPES.USER_LEFT_CHANNEL
 ];
 
-export const getInfoMessage = ({
+type TInfoMessage = {
-	type, role, msg, author
+	type: string;
-}) => {
+	role: string;
+	msg: string;
+	author: { username: string };
+}
+export const getInfoMessage = ({type, role, msg, author}: TInfoMessage) => {
 	const { username } = author;
 	if (type === 'rm') {
 		return I18n.t('Message_removed');
@@ -110,13 +114,13 @@ export const getInfoMessage = ({
 	return '';
 };
 
-export const getMessageTranslation = (message, autoTranslateLanguage) => {
+export const getMessageTranslation = (message: {translations: any}, autoTranslateLanguage: string) => {
 	if (!autoTranslateLanguage) {
 		return null;
 	}
 	const { translations } = message;
 	if (translations) {
-		const translation = translations.find(trans => trans.language === autoTranslateLanguage);
+		const translation = translations.find((trans: any) => trans.language === autoTranslateLanguage);
 		return translation && translation.value;
 	}
 	return null;

app/externalModules.d.ts

@@ -2,3 +2,4 @@ declare module 'rn-extensions-share';
 declare module 'commonmark';
 declare module 'commonmark-react-renderer';
 declare module 'remove-markdown';
+declare module 'react-native-image-progress'