Update Emoji Picker Search to use Trie Search

src/CONST.js

@@ -769,7 +769,7 @@ const CONST = {
         TAX_ID: /^\d{9}$/,
         NON_NUMERIC: /\D/g,
         EMOJI_NAME: /:[\w+-]+:/g,
-        EMOJI_SUGGESTIONS: /:[a-zA-Z]{1,20}(\s[a-zA-Z]{0,20})?$/,
+        EMOJI_SUGGESTIONS: /:[a-zA-Z0-9_+-]{1,40}$/,
         AFTER_FIRST_LINE_BREAK: /\n.*/g,
         CODE_2FA: /^\d{6}$/,
     },

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -394,15 +394,7 @@ class EmojiPickerMenu extends Component {
             this.setFirstNonHeaderIndex(this.emojis);
             return;
         }
-
-        // Skip "Frequently Used" emojis to avoid duplicate results.
-        // Frequently used emojis are on the 0th index category. Hence, slice the array from the 1st index category onwards.
-        const uniqueEmojis = _.isEmpty(this.props.frequentlyUsedEmojis) ? this.emojis : this.emojis.slice(this.unfilteredHeaderIndices[1] * this.numColumns);
-        const newFilteredEmojiList = _.filter(uniqueEmojis, emoji => (
-            !emoji.header
-            && !emoji.spacer
-            && _.find(emoji.keywords, keyword => keyword.includes(normalizedSearchTerm))
-        ));
+        const newFilteredEmojiList = EmojiUtils.suggestEmojis(`:${normalizedSearchTerm}`, this.emojis.length);
 
         // Remove sticky header indices. There are no headers while searching and we don't want to make emojis sticky
         this.setState({filteredEmojis: newFilteredEmojiList, headerIndices: [], highlightedIndex: 0});

src/libs/EmojiUtils.js

@@ -222,21 +222,21 @@ function suggestEmojis(text, limit = 5) {
     const emojiData = text.match(CONST.REGEX.EMOJI_SUGGESTIONS);
     if (emojiData) {
         const matching = [];
-        const nodes = emojisTrie.getAllMatchingWords(emojiData[0].toLowerCase().slice(1));
+        const nodes = emojisTrie.getAllMatchingWords(emojiData[0].toLowerCase().slice(1), limit);
         for (let j = 0; j < nodes.length; j++) {
             if (nodes[j].metaData.code && !_.find(matching, obj => obj.name === nodes[j].name)) {
                 if (matching.length === limit) {
                     return matching;
                 }
-                matching.unshift({code: nodes[j].metaData.code, name: nodes[j].name});
+                matching.push({code: nodes[j].metaData.code, name: nodes[j].name});
             }
             const suggestions = nodes[j].metaData.suggestions;
             for (let i = 0; i < suggestions.length; i++) {
                 if (matching.length === limit) {
                     return matching;
                 }
                 if (!_.find(matching, obj => obj.name === suggestions[i].name)) {
-                    matching.unshift(suggestions[i]);
+                    matching.push(suggestions[i]);
                 }
             }
         }

src/libs/Trie/index.js

@@ -102,7 +102,7 @@ class Trie {
             return matching;
         }
         if (node.isEndOfWord) {
-            matching.unshift({name: prefix, metaData: node.metaData});
+            matching.push({name: prefix, metaData: node.metaData});
         }
         const children = _.keys(node.children);
         for (let i = 0; i < children.length; i++) {

tests/unit/TrieTest.js

@@ -19,9 +19,9 @@ describe('Trie', () => {
         wordTrie.add('Robertson', {code: '👨🏽', suggestions: []});
         wordTrie.add('Rock', {code: '👨🏼', suggestions: []});
         const expected = [
-            {name: 'rock', metaData: {code: '👨🏼', suggestions: []}},
-            {name: 'robertson', metaData: {code: '👨🏽', suggestions: []}},
             {name: 'robert', metaData: {code: '👨🏾', suggestions: []}},
+            {name: 'robertson', metaData: {code: '👨🏽', suggestions: []}},
+            {name: 'rock', metaData: {code: '👨🏼', suggestions: []}},
         ];
         expect(wordTrie.getAllMatchingWords('Ro')).toEqual(expected);
         expect(wordTrie.getAllMatchingWords('ro')).toEqual(expected);