Render Emoji when typed with emoji code

src/libs/EmojiTrie.js

@@ -0,0 +1,14 @@
+import emojis from '../../assets/emojis';
+import Trie from './Trie';
+
+// Create a Trie object
+const emojisTrie = new Trie();
+
+// Inserting all emojis into the Trie object
+for (let i = 0; i < emojis.length; i++) {
+    if (emojis[i].name) {
+        emojisTrie.add(emojis[i].name, emojis[i].code);
+    }
+}
+
+export default emojisTrie;

src/libs/EmojiUtils.js

@@ -4,6 +4,7 @@ import moment from 'moment';
 import Str from 'expensify-common/lib/str';
 import CONST from '../CONST';
 import * as User from './actions/User';
+import emojisTrie from './EmojiTrie';
 
 /**
  * Get the unicode code of an emoji in base 16.
@@ -199,10 +200,29 @@ function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) {
     User.updateFrequentlyUsedEmojis(frequentEmojiList);
 }
 
+/**
+ * Replace any emoji name in a text with the emoji icon
+ * @param {String} text
+ * @returns {String}
+ */
+function replaceEmojis(text) {
+    let newText = text;
+    const emojiNames = text.match(/:[\w+-]+:/g);
+    if (!emojiNames || emojiNames.length === 0) { return text; }
+    for (let i = 0; i < emojiNames.length; i++) {
+        const checkEmoji = emojisTrie.isEmoji(emojiNames[i].slice(1, -1));
+        if (checkEmoji.found) {
+            newText = newText.replace(emojiNames[i], checkEmoji.code);
+        }
+    }
+    return newText;
+}
+
 export {
     isSingleEmoji,
     getDynamicHeaderIndices,
     mergeEmojisWithFrequentlyUsedEmojis,
     addToFrequentlyUsedEmojis,
     containsOnlyEmojis,
+    replaceEmojis,
 };

src/libs/Trie.js

@@ -0,0 +1,49 @@
+import TrieNode from './TrieNode';
+
+/** Class representing a Trie. */
+class Trie {
+    constructor() {
+        this.root = new TrieNode();
+    }
+
+    /**
+    * Add an emoji into the Trie
+    * @param {String} input
+    * @param {String} code
+    * @param {TrieNode} node
+    * @return {Object}
+    */
+    add(input, code, node = this.root) {
+        if (input.length === 0) {
+            node.setEnd();
+            node.setCode(code);
+            return;
+        } if (!node.keys.has(input[0])) {
+            node.keys.set(input[0], new TrieNode());
+            return this.add(input.substring(1), code, node.keys.get(input[0]));
+        }
+        return this.add(input.substring(1), code, node.keys.get(input[0]));
+    }
+
+    /**
+    * Check if the emoji is exist in the Trie.
+    * @param {String} emoji
+    * @return {Object}
+    */
+    isEmoji(emoji) {
+        let node = this.root;
+        while (emoji.length > 1) {
+            if (!node.keys.has(emoji[0])) {
+                // return false;
+                return {found: false};
+            }
+            node = node.keys.get(emoji[0]);
+            // eslint-disable-next-line no-param-reassign
+            emoji = emoji.substring(1);
+        }
+        const found = !!((node.keys.has(emoji) && node.keys.get(emoji).isEnd()));
+        return {found, code: node.keys.get(emoji).getCode()};
+    }
+}
+
+export default Trie;

src/libs/TrieNode.js

@@ -0,0 +1,44 @@
+/** Class representing a Trie node. */
+class TrieNode {
+    /**
+     * Reset all attributes to default values.
+     */
+    constructor() {
+        this.keys = new Map();
+        this.end = false;
+        this.code = '';
+    }
+
+    /**
+     * Make the current node an end node.
+    */
+    setEnd() {
+        this.end = true;
+    }
+
+    /**
+    * Check if the current node is an end node.
+    * @returns {Boolean}
+    */
+    isEnd() {
+        return this.end;
+    }
+
+    /**
+    * Set the node code, code represent an emoji
+    * @param {String} code
+    */
+    setCode(code) {
+        this.code = code;
+    }
+
+    /**
+    * Get the node code, code represent an emoji
+    * @return {String}
+    */
+    getCode() {
+        return this.code;
+    }
+}
+
+export default TrieNode;

src/pages/home/report/ReportActionCompose.js

@@ -45,6 +45,7 @@ import toggleReportActionComposeView from '../../../libs/toggleReportActionCompo
 import OfflineIndicator from '../../../components/OfflineIndicator';
 import ExceededCommentLength from '../../../components/ExceededCommentLength';
 import withNavigationFocus from '../../../components/withNavigationFocus';
+import * as EmojiUtils from '../../../libs/EmojiUtils';
 
 const propTypes = {
     /** Beta features list */
@@ -372,7 +373,8 @@ class ReportActionCompose extends React.Component {
      * @param {String} newComment
      */
     updateComment(newComment) {
-        this.textInput.setNativeProps({text: newComment});
+        const textWithEmojis = EmojiUtils.replaceEmojis(newComment);
+        this.textInput.setNativeProps({text: textWithEmojis});
         this.setState({
             isCommentEmpty: !!newComment.match(/^(\s|`)*$/),
         });
@@ -387,9 +389,9 @@ class ReportActionCompose extends React.Component {
             Report.setReportWithDraft(this.props.reportID.toString(), false);
         }
 
-        this.comment = newComment;
-        this.debouncedSaveReportComment(newComment);
-        if (newComment) {
+        this.comment = textWithEmojis;
+        this.debouncedSaveReportComment(textWithEmojis);
+        if (textWithEmojis) {
             this.debouncedBroadcastUserIsTyping();
         }
     }
@@ -496,7 +498,11 @@ class ReportActionCompose extends React.Component {
         const hasExceededMaxCommentLength = this.comment.length > CONST.MAX_COMMENT_LENGTH;
 
         return (
-            <View style={[shouldShowReportRecipientLocalTime && styles.chatItemComposeWithFirstRow, this.props.isComposerFullSize && styles.chatItemFullComposeRow]}>
+            <View style={[
+                shouldShowReportRecipientLocalTime && !this.props.network.isOffline && styles.chatItemComposeWithFirstRow,
+                this.props.isComposerFullSize && styles.chatItemFullComposeRow,
+            ]}
+            >
                 {shouldShowReportRecipientLocalTime
                     && <ParticipantLocalTime participant={reportRecipient} />}
                 <View style={[
@@ -673,8 +679,8 @@ class ReportActionCompose extends React.Component {
                         </Tooltip>
                     </View>
                 </View>
-                <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                    <OfflineIndicator />
+                <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                    {!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                     <ReportTypingIndicator reportID={this.props.reportID} />
                     <ExceededCommentLength commentLength={this.comment.length} />
                 </View>

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -18,6 +18,7 @@ import compose from '../../../libs/compose';
 import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import VirtualKeyboard from '../../../libs/VirtualKeyboard';
+import * as EmojiUtils from '../../../libs/EmojiUtils';
 
 const propTypes = {
     /** All the data of the action */
@@ -94,16 +95,17 @@ class ReportActionItemMessageEdit extends React.Component {
     /**
      * Update the value of the draft in Onyx
      *
-     * @param {String} newDraft
+     * @param {String} draft
      */
-    updateDraft(newDraft) {
-        this.textInput.setNativeProps({text: newDraft});
-        this.setState({draft: newDraft});
+    updateDraft(draft) {
+        const textWithEmojis = EmojiUtils.replaceEmojis(draft);
+        this.textInput.setNativeProps({text: textWithEmojis});
+        this.setState({draft: textWithEmojis});
 
         // This component is rendered only when draft is set to a non-empty string. In order to prevent component
         // unmount when user deletes content of textarea, we set previous message instead of empty string.
-        if (newDraft.trim().length > 0) {
-            this.debouncedSaveDraft(newDraft);
+        if (textWithEmojis.trim().length > 0) {
+            this.debouncedSaveDraft(textWithEmojis);
         } else {
             this.debouncedSaveDraft(this.props.action.message[0].html);
         }

tests/unit/EmojiCodeTest.js

@@ -0,0 +1,8 @@
+import * as EmojiUtils from '../../src/libs/EmojiUtils';
+
+describe('EmojiCode', () => {
+    it('Test replacing emoji codes with emojis inside a text', () => {
+        const text = 'Hi :smile:';
+        expect(EmojiUtils.replaceEmojis(text)).toBe('Hi 😄');
+    });
+});

tests/unit/EmojiTrieTest.js

@@ -0,0 +1,13 @@
+import Trie from '../../src/libs/Trie';
+
+describe('Trie', () => {
+    it('Test if a Trie node is exist in the Trie', () => {
+        const emojisTrie = new Trie();
+        emojisTrie.add('grinning', '😀');
+        emojisTrie.add('grin', '😁');
+        emojisTrie.add('joy', '😂');
+        emojisTrie.add('rofl', '🤣');
+        expect(emojisTrie.isEmoji('grinning')).toEqual({found: true, code: '😀'});
+        expect(emojisTrie.isEmoji('eyes')).toEqual({found: false});
+    });
+});