[IMPROVE] migrate Avatar component

app/containers/Avatar/Avatar.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import FastImage from '@rocket.chat/react-native-fast-image';
 import Touchable from 'react-native-platform-touchable';
@@ -8,6 +7,30 @@ import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 import { avatarURL } from '../../utils/avatar';
 import Emoji from '../markdown/Emoji';
 
+export interface IAvatar {
+	server?: string;
+	style?: any,
+	text?: string;
+	avatar?: string;
+	emoji?: string;
+	size?: number;
+	borderRadius?: number;
+	type?: string;
+	children?: JSX.Element;
+	user?: {
+		id: string;
+		token: string;
+	};
+	theme: string;
+	onPress?(): void;
+	getCustomEmoji(): any;
+	avatarETag?: string;
+	isStatic?: boolean;
+	rid?: string;
+	blockUnauthenticatedAccess?: boolean;
+	serverVersion?: string;
+}
+
 const Avatar = React.memo(({
 	text,
 	size,
@@ -27,7 +50,7 @@ const Avatar = React.memo(({
 	rid,
 	blockUnauthenticatedAccess,
 	serverVersion
-}) => {
+}: Partial<IAvatar>) => {
 	if ((!text && !avatar && !emoji && !rid) || !server) {
 		return null;
 	}
@@ -96,35 +119,11 @@ const Avatar = React.memo(({
 	);
 });
 
-Avatar.propTypes = {
-	server: PropTypes.string,
-	style: PropTypes.any,
-	text: PropTypes.string,
-	avatar: PropTypes.string,
-	emoji: PropTypes.string,
-	size: PropTypes.number,
-	borderRadius: PropTypes.number,
-	type: PropTypes.string,
-	children: PropTypes.object,
-	user: PropTypes.shape({
-		id: PropTypes.string,
-		token: PropTypes.string
-	}),
-	theme: PropTypes.string,
-	onPress: PropTypes.func,
-	getCustomEmoji: PropTypes.func,
-	avatarETag: PropTypes.string,
-	isStatic: PropTypes.bool,
-	rid: PropTypes.string,
-	blockUnauthenticatedAccess: PropTypes.bool,
-	serverVersion: PropTypes.string
-};
-
-Avatar.defaultProps = {
-	text: '',
-	size: 25,
-	type: 'd',
-	borderRadius: 4
-};
+// Avatar.defaultProps = {
+// 	text: '',
+// 	size: 25,
+// 	type: 'd',
+// 	borderRadius: 4
+// };
 
 export default Avatar;

app/containers/Avatar/index.tsx

@@ -1,27 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Q } from '@nozbe/watermelondb';
 
 import database from '../../lib/database';
 import { getUserSelector } from '../../selectors/login';
-import Avatar from './Avatar';
+import Avatar, {IAvatar} from './Avatar';
 
-class AvatarContainer extends React.Component {
-	static propTypes = {
-		rid: PropTypes.string,
-		text: PropTypes.string,
-		type: PropTypes.string,
-		blockUnauthenticatedAccess: PropTypes.bool,
-		serverVersion: PropTypes.string
-	};
+class AvatarContainer extends React.Component<Partial<IAvatar>, any> {
+	private mounted: boolean;
+	private subscription!: any;
 
-	static defaultProps = {
-		text: '',
-		type: 'd'
-	};
-
-	constructor(props) {
+	constructor(props: Partial<IAvatar>) {
 		super(props);
 		this.mounted = false;
 		this.state = { avatarETag: '' };
@@ -32,7 +21,7 @@ class AvatarContainer extends React.Component {
 		this.mounted = true;
 	}
 
-	componentDidUpdate(prevProps) {
+	componentDidUpdate(prevProps: any) {
 		const { text, type } = this.props;
 		if (prevProps.text !== text || prevProps.type !== type) {
 			this.init();
@@ -59,7 +48,7 @@ class AvatarContainer extends React.Component {
 		try {
 			if (this.isDirect) {
 				const { text } = this.props;
-				const [user] = await usersCollection.query(Q.where('username', text)).fetch();
+				const [user] = await usersCollection.query(Q.where('username', text!)).fetch();
 				record = user;
 			} else {
 				const { rid } = this.props;
@@ -71,7 +60,7 @@ class AvatarContainer extends React.Component {
 
 		if (record) {
 			const observable = record.observe();
-			this.subscription = observable.subscribe((r) => {
+			this.subscription = observable.subscribe((r: any) => {
 				const { avatarETag } = r;
 				if (this.mounted) {
 					this.setState({ avatarETag });
@@ -95,7 +84,7 @@ class AvatarContainer extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	user: getUserSelector(state),
 	server: state.share.server.server || state.server.server,
 	serverVersion: state.share.server.version || state.server.version,

app/containers/EmojiPicker/CustomEmoji.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
 import FastImage from '@rocket.chat/react-native-fast-image';
-import PropTypes from 'prop-types';
 
-const CustomEmoji = React.memo(({ baseUrl, emoji, style }) => (
+interface ICustomEmoji {
+	baseUrl: string,
+	emoji: {
+		content: any;
+		name: string;
+		extension: any;
+	},
+	style: any
+}
+
+const CustomEmoji = React.memo(({ baseUrl, emoji, style }: ICustomEmoji) => (
 	<FastImage
 		style={style}
 		source={{
@@ -17,10 +26,4 @@ const CustomEmoji = React.memo(({ baseUrl, emoji, style }) => (
 	return prevEmoji === nextEmoji;
 });
 
-CustomEmoji.propTypes = {
-	baseUrl: PropTypes.string.isRequired,
-	emoji: PropTypes.object.isRequired,
-	style: PropTypes.any
-};
-
 export default CustomEmoji;

app/containers/markdown/Emoji.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Text } from 'react-native';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
@@ -8,11 +7,21 @@ import { themes } from '../../constants/colors';
 
 import styles from './styles';
 
+interface IEmoji {
+	literal: string;
+	isMessageContainsOnlyEmoji: boolean;
+	getCustomEmoji?({}: any): string;
+	baseUrl: string;
+	customEmojis?: boolean;
+	style: object;
+	theme?: string;
+}
+
 const Emoji = React.memo(({
 	literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis = true, style = {}, theme
-}) => {
+}: IEmoji) => {
 	const emojiUnicode = shortnameToUnicode(literal);
-	const emoji = getCustomEmoji && getCustomEmoji(literal.replace(/:/g, ''));
+	const emoji: any = getCustomEmoji && getCustomEmoji(literal.replace(/:/g, ''));
 	if (emoji && customEmojis) {
 		return (
 			<CustomEmoji
@@ -28,7 +37,7 @@ const Emoji = React.memo(({
 	return (
 		<Text
 			style={[
-				{ color: themes[theme].bodyText },
+				{ color: themes[theme!].bodyText },
 				isMessageContainsOnlyEmoji ? styles.textBig : styles.text,
 				style
 			]}
@@ -38,14 +47,4 @@ const Emoji = React.memo(({
 	);
 });
 
-Emoji.propTypes = {
-	literal: PropTypes.string,
-	isMessageContainsOnlyEmoji: PropTypes.bool,
-	getCustomEmoji: PropTypes.func,
-	baseUrl: PropTypes.string,
-	customEmojis: PropTypes.bool,
-	style: PropTypes.object,
-	theme: PropTypes.string
-};
-
 export default Emoji;