[FIX] Remove some unnecessary re-renders on Messagebox

app/containers/MessageBox/CommandsPreview/Item.js

@@ -0,0 +1,44 @@
+import React, { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, ActivityIndicator } from 'react-native';
+import FastImage from 'react-native-fast-image';
+
+import styles from '../styles';
+import { CustomIcon } from '../../../lib/Icons';
+import { COLOR_PRIMARY } from '../../../constants/colors';
+import MessageboxContext from '../Context';
+
+const Item = ({ item }) => {
+	const context = useContext(MessageboxContext);
+	const { onPressCommandPreview } = context;
+	const [loading, setLoading] = useState(true);
+
+	return (
+		<TouchableOpacity
+			style={styles.commandPreview}
+			onPress={() => onPressCommandPreview(item)}
+			testID={`command-preview-item${ item.id }`}
+		>
+			{item.type === 'image'
+				? (
+					<FastImage
+						style={styles.commandPreviewImage}
+						source={{ uri: item.value }}
+						resizeMode={FastImage.resizeMode.cover}
+						onLoadStart={() => setLoading(true)}
+						onLoad={() => setLoading(false)}
+					>
+						{ loading ? <ActivityIndicator /> : null }
+					</FastImage>
+				)
+				: <CustomIcon name='file-generic' size={36} color={COLOR_PRIMARY} />
+			}
+		</TouchableOpacity>
+	);
+};
+
+Item.propTypes = {
+	item: PropTypes.object
+};
+
+export default Item;

app/containers/MessageBox/CommandsPreview/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import PropTypes from 'prop-types';
+import equal from 'deep-equal';
+
+import Item from './Item';
+import styles from '../styles';
+
+const CommandsPreview = React.memo(({ commandPreview, showCommandPreview }) => {
+	if (!showCommandPreview) {
+		return null;
+	}
+	return (
+		<FlatList
+			testID='commandbox-container'
+			style={styles.mentionList}
+			data={commandPreview}
+			renderItem={({ item }) => <Item item={item} />}
+			keyExtractor={item => item.id}
+			keyboardShouldPersistTaps='always'
+			horizontal
+			showsHorizontalScrollIndicator={false}
+		/>
+	);
+}, (prevProps, nextProps) => {
+	if (prevProps.showCommandPreview !== nextProps.showCommandPreview) {
+		return false;
+	}
+	if (!equal(prevProps.commandPreview, nextProps.commandPreview)) {
+		return false;
+	}
+	return true;
+});
+
+CommandsPreview.propTypes = {
+	commandPreview: PropTypes.array,
+	showCommandPreview: PropTypes.bool
+};
+
+export default CommandsPreview;

app/containers/MessageBox/Context.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const MessageboxContext = React.createContext();
+export default MessageboxContext;

app/containers/MessageBox/Mentions/FixedMentionItem.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+import PropTypes from 'prop-types';
+
+import styles from '../styles';
+import I18n from '../../../i18n';
+
+const FixedMentionItem = ({ item, onPress }) => (
+	<TouchableOpacity
+		style={styles.mentionItem}
+		onPress={() => onPress(item)}
+	>
+		<Text style={styles.fixedMentionAvatar}>{item.username}</Text>
+		<Text style={styles.mentionText}>{item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')}</Text>
+	</TouchableOpacity>
+);
+
+FixedMentionItem.propTypes = {
+	item: PropTypes.object,
+	onPress: PropTypes.func
+};
+
+export default FixedMentionItem;

app/containers/MessageBox/Mentions/MentionEmoji.js

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { Text } from 'react-native';
+import PropTypes from 'prop-types';
+import { shortnameToUnicode } from 'emoji-toolkit';
+
+import styles from '../styles';
+import MessageboxContext from '../Context';
+import CustomEmoji from '../../EmojiPicker/CustomEmoji';
+
+const MentionEmoji = ({ item }) => {
+	const context = useContext(MessageboxContext);
+	const { baseUrl } = context;
+
+	if (item.name) {
+		return (
+			<CustomEmoji
+				style={styles.mentionItemCustomEmoji}
+				emoji={item}
+				baseUrl={baseUrl}
+			/>
+		);
+	}
+	return (
+		<Text style={styles.mentionItemEmoji}>
+			{shortnameToUnicode(`:${ item }:`)}
+		</Text>
+	);
+};
+
+MentionEmoji.propTypes = {
+	item: PropTypes.object
+};
+
+export default MentionEmoji;

app/containers/MessageBox/Mentions/MentionItem.js

@@ -0,0 +1,87 @@
+import React, { useContext } from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+import PropTypes from 'prop-types';
+
+import styles from '../styles';
+import Avatar from '../../Avatar';
+import MessageboxContext from '../Context';
+import FixedMentionItem from './FixedMentionItem';
+import MentionEmoji from './MentionEmoji';
+import {
+	MENTIONS_TRACKING_TYPE_EMOJIS,
+	MENTIONS_TRACKING_TYPE_COMMANDS
+} from '../constants';
+
+const MentionItem = ({
+	item, trackingType
+}) => {
+	const context = useContext(MessageboxContext);
+	const { baseUrl, user, onPressMention } = context;
+
+	const defineTestID = (type) => {
+		switch (type) {
+			case MENTIONS_TRACKING_TYPE_EMOJIS:
+				return `mention-item-${ item.name || item }`;
+			case MENTIONS_TRACKING_TYPE_COMMANDS:
+				return `mention-item-${ item.command || item }`;
+			default:
+				return `mention-item-${ item.username || item.name || item }`;
+		}
+	};
+
+	const testID = defineTestID(trackingType);
+
+	if (item.username === 'all' || item.username === 'here') {
+		return <FixedMentionItem item={item} onPress={onPressMention} />;
+	}
+
+	let content = (
+		<>
+			<Avatar
+				style={styles.avatar}
+				text={item.username || item.name}
+				size={30}
+				type={item.t}
+				baseUrl={baseUrl}
+				userId={user.id}
+				token={user.token}
+			/>
+			<Text style={styles.mentionText}>{ item.username || item.name || item }</Text>
+		</>
+	);
+
+	if (trackingType === MENTIONS_TRACKING_TYPE_EMOJIS) {
+		content = (
+			<>
+				<MentionEmoji item={item} />
+				<Text style={styles.mentionText}>:{ item.name || item }:</Text>
+			</>
+		);
+	}
+
+	if (trackingType === MENTIONS_TRACKING_TYPE_COMMANDS) {
+		content = (
+			<>
+				<Text style={styles.slash}>/</Text>
+				<Text>{ item.command}</Text>
+			</>
+		);
+	}
+
+	return (
+		<TouchableOpacity
+			style={styles.mentionItem}
+			onPress={() => onPressMention(item)}
+			testID={testID}
+		>
+			{content}
+		</TouchableOpacity>
+	);
+};
+
+MentionItem.propTypes = {
+	item: PropTypes.object,
+	trackingType: PropTypes.string
+};
+
+export default MentionItem;

app/containers/MessageBox/Mentions/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import PropTypes from 'prop-types';
+import equal from 'deep-equal';
+
+import styles from '../styles';
+import MentionItem from './MentionItem';
+
+const Mentions = React.memo(({ mentions, trackingType }) => {
+	if (!trackingType) {
+		return null;
+	}
+	return (
+		<FlatList
+			testID='messagebox-container'
+			style={styles.mentionList}
+			data={mentions}
+			extraData={mentions}
+			renderItem={({ item }) => <MentionItem item={item} trackingType={trackingType} />}
+			keyExtractor={item => item.id || item.username || item.command || item}
+			keyboardShouldPersistTaps='always'
+		/>
+	);
+}, (prevProps, nextProps) => {
+	if (prevProps.trackingType !== nextProps.trackingType) {
+		return false;
+	}
+	if (!equal(prevProps.mentions, nextProps.mentions)) {
+		return false;
+	}
+	return true;
+});
+
+Mentions.propTypes = {
+	mentions: PropTypes.array,
+	trackingType: PropTypes.string
+};
+
+export default Mentions;