[FIX] Avatar of message as an emoji (#2038)

* fixed-issue

* removed-hardcoded-emoji

* Merge develop

* replaced markdown with emoji componenent

* made-changes

* use avatar onPress

Co-authored-by: Djorkaeff Alexandre <djorkaeff.unb@gmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/containers/Avatar.js

@@ -6,9 +6,10 @@ import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
 import { avatarURL } from '../utils/avatar';
+import Emoji from './markdown/Emoji';
 
 const Avatar = React.memo(({
-	text, size, baseUrl, borderRadius, style, avatar, type, children, userId, token, onPress
+	text, size, baseUrl, borderRadius, style, avatar, type, children, userId, token, onPress, theme, emoji, getCustomEmoji
 }) => {
 	const avatarStyle = {
 		width: size,
@@ -24,7 +25,15 @@ const Avatar = React.memo(({
 		type, text, size, userId, token, avatar, baseUrl
 	});
 
-	let image = (
+	let image = emoji ? (
+		<Emoji
+			theme={theme}
+			baseUrl={baseUrl}
+			getCustomEmoji={getCustomEmoji}
+			isMessageContainsOnlyEmoji
+			literal={emoji}
+		/>
+	) : (
 		<FastImage
 			style={avatarStyle}
 			source={{
@@ -56,13 +65,16 @@ Avatar.propTypes = {
 	style: PropTypes.any,
 	text: PropTypes.string,
 	avatar: PropTypes.string,
+	emoji: PropTypes.string,
 	size: PropTypes.number,
 	borderRadius: PropTypes.number,
 	type: PropTypes.string,
 	children: PropTypes.object,
 	userId: PropTypes.string,
 	token: PropTypes.string,
-	onPress: PropTypes.func
+	theme: PropTypes.string,
+	onPress: PropTypes.func,
+	getCustomEmoji: PropTypes.func
 };
 
 Avatar.defaultProps = {

app/containers/markdown/Emoji.js

@@ -9,10 +9,10 @@ import { themes } from '../../constants/colors';
 import styles from './styles';
 
 const Emoji = React.memo(({
-	emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis, style = [], theme
+	literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis = true, style = [], theme
 }) => {
 	const emojiUnicode = shortnameToUnicode(literal);
-	const emoji = getCustomEmoji && getCustomEmoji(emojiName);
+	const emoji = getCustomEmoji && getCustomEmoji(literal.replace(/:/g, ''));
 	if (emoji && customEmojis) {
 		return (
 			<CustomEmoji
@@ -36,7 +36,6 @@ const Emoji = React.memo(({
 });
 
 Emoji.propTypes = {
-	emojiName: PropTypes.string,
 	literal: PropTypes.string,
 	isMessageContainsOnlyEmoji: PropTypes.bool,
 	getCustomEmoji: PropTypes.func,

app/containers/markdown/index.js

@@ -261,13 +261,12 @@ class Markdown extends PureComponent {
 		);
 	}
 
-	renderEmoji = ({ emojiName, literal }) => {
+	renderEmoji = ({ literal }) => {
 		const {
-			getCustomEmoji, baseUrl, customEmojis = true, style, theme
+			getCustomEmoji, baseUrl, customEmojis, style, theme
 		} = this.props;
 		return (
 			<MarkdownEmoji
-				emojiName={emojiName}
 				literal={literal}
 				isMessageContainsOnlyEmoji={this.isMessageContainsOnlyEmoji}
 				getCustomEmoji={getCustomEmoji}

app/containers/message/MessageAvatar.js

@@ -6,7 +6,7 @@ import styles from './styles';
 import MessageContext from './Context';
 
 const MessageAvatar = React.memo(({
-	isHeader, avatar, author, small, navToRoomInfo
+	isHeader, avatar, author, small, navToRoomInfo, emoji, getCustomEmoji, theme
 }) => {
 	const { baseUrl, user } = useContext(MessageContext);
 	if (isHeader && author) {
@@ -21,10 +21,13 @@ const MessageAvatar = React.memo(({
 				size={small ? 20 : 36}
 				borderRadius={small ? 2 : 4}
 				onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
+				getCustomEmoji={getCustomEmoji}
 				avatar={avatar}
+				emoji={emoji}
 				baseUrl={baseUrl}
 				userId={user.id}
 				token={user.token}
+				theme={theme}
 			/>
 		);
 	}
@@ -34,9 +37,12 @@ const MessageAvatar = React.memo(({
 MessageAvatar.propTypes = {
 	isHeader: PropTypes.bool,
 	avatar: PropTypes.string,
+	emoji: PropTypes.string,
 	author: PropTypes.obj,
 	small: PropTypes.bool,
-	navToRoomInfo: PropTypes.func
+	navToRoomInfo: PropTypes.func,
+	getCustomEmoji: PropTypes.func,
+	theme: PropTypes.string
 };
 MessageAvatar.displayName = 'MessageAvatar';
 

app/containers/message/index.js

@@ -230,7 +230,7 @@ class MessageContainer extends React.Component {
 			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, showAttachment, timeFormat, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, blockAction, rid, theme
 		} = this.props;
 		const {
-			id, msg, ts, attachments, urls, reactions, t, avatar, u, alias, editedBy, role, drid, dcount, dlm, tmid, tcount, tlm, tmsg, mentions, channels, unread, blocks, autoTranslate: autoTranslateMessage
+			id, msg, ts, attachments, urls, reactions, t, avatar, emoji, u, alias, editedBy, role, drid, dcount, dlm, tmid, tcount, tlm, tmsg, mentions, channels, unread, blocks, autoTranslate: autoTranslateMessage
 		} = item;
 
 		let message = msg;
@@ -268,6 +268,7 @@ class MessageContainer extends React.Component {
 					reactions={reactions}
 					alias={alias}
 					avatar={avatar}
+					emoji={emoji}
 					timeFormat={timeFormat}
 					customThreadTimeFormat={customThreadTimeFormat}
 					style={style}

app/lib/database/model/Message.js

@@ -30,6 +30,8 @@ export default class Message extends Model {
 
 	@field('avatar') avatar;
 
+	@field('emoji') emoji;
+
 	@json('attachments', sanitizer) attachments;
 
 	@json('urls', sanitizer) urls;

app/lib/database/model/Thread.js

@@ -30,6 +30,8 @@ export default class Thread extends Model {
 
 	@field('avatar') avatar;
 
+	@field('emoji') emoji;
+
 	@json('attachments', sanitizer) attachments;
 
 	@json('urls', sanitizer) urls;

app/lib/database/model/ThreadMessage.js

@@ -32,6 +32,8 @@ export default class ThreadMessage extends Model {
 
 	@field('avatar') avatar;
 
+	@field('emoji') emoji;
+
 	@json('attachments', sanitizer) attachments;
 
 	@json('urls', sanitizer) urls;

app/lib/database/model/migrations.js

@@ -78,6 +78,24 @@ export default schemaMigrations({
 		{
 			toVersion: 8,
 			steps: [
+				addColumns({
+					table: 'messages',
+					columns: [
+						{ name: 'emoji', type: 'string', isOptional: true }
+					]
+				}),
+				addColumns({
+					table: 'thread_messages',
+					columns: [
+						{ name: 'emoji', type: 'string', isOptional: true }
+					]
+				}),
+				addColumns({
+					table: 'threads',
+					columns: [
+						{ name: 'emoji', type: 'string', isOptional: true }
+					]
+				}),
 				addColumns({
 					table: 'subscriptions',
 					columns: [

app/lib/database/schema/app.js

@@ -67,6 +67,7 @@ export default appSchema({
 				{ name: 'parse_urls', type: 'string' },
 				{ name: 'groupable', type: 'boolean', isOptional: true },
 				{ name: 'avatar', type: 'string', isOptional: true },
+				{ name: 'emoji', type: 'string', isOptional: true },
 				{ name: 'attachments', type: 'string', isOptional: true },
 				{ name: 'urls', type: 'string', isOptional: true },
 				{ name: '_updated_at', type: 'number' },
@@ -105,6 +106,7 @@ export default appSchema({
 				{ name: 'parse_urls', type: 'string', isOptional: true },
 				{ name: 'groupable', type: 'boolean', isOptional: true },
 				{ name: 'avatar', type: 'string', isOptional: true },
+				{ name: 'emoji', type: 'string', isOptional: true },
 				{ name: 'attachments', type: 'string', isOptional: true },
 				{ name: 'urls', type: 'string', isOptional: true },
 				{ name: 'status', type: 'number', isOptional: true },
@@ -141,6 +143,7 @@ export default appSchema({
 				{ name: 'parse_urls', type: 'string', isOptional: true },
 				{ name: 'groupable', type: 'boolean', isOptional: true },
 				{ name: 'avatar', type: 'string', isOptional: true },
+				{ name: 'emoji', type: 'string', isOptional: true },
 				{ name: 'attachments', type: 'string', isOptional: true },
 				{ name: 'urls', type: 'string', isOptional: true },
 				{ name: 'status', type: 'number', isOptional: true },