From 2db5c67a497acde4234df796bc87a6617252185c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 3 Sep 2020 13:48:15 -0500
Subject: [PATCH] Chats: parse custom emoji, #386

---
 .../features/chats/components/chat_message_list.js  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index 8e52e3270..3888d9222 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -4,10 +4,14 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { List as ImmutableList } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import emojify from 'soapbox/features/emoji/emoji';
 import classNames from 'classnames';
 
+const makeEmojiMap = record => record.get('emojis', ImmutableList()).reduce((map, emoji) => {
+  return map.set(`:${emoji.get('shortcode')}:`, emoji);
+}, ImmutableMap());
+
 const mapStateToProps = (state, { chatMessageIds }) => ({
   me: state.get('me'),
   chatMessages: chatMessageIds.reduce((acc, curr) => {
@@ -72,6 +76,11 @@ class ChatMessageList extends ImmutablePureComponent {
       this.scrollToBottom();
   }
 
+  parseContent = chatMessage => {
+    const emojiMap = makeEmojiMap(chatMessage);
+    return emojify(chatMessage.get('content') || '', emojiMap.toJS());
+  }
+
   render() {
     const { chatMessages, me } = this.props;
 
@@ -88,7 +97,7 @@ class ChatMessageList extends ImmutablePureComponent {
             <span
               title={this.getFormattedTimestamp(chatMessage)}
               className='chat-message__bubble'
-              dangerouslySetInnerHTML={{ __html: emojify(chatMessage.get('content') || '') }}
+              dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
               ref={this.setRef}
             />
           </div>