connect with frequent emojis list onyx and update the list when emoji…

… is added by emoji code and colon

src/libs/EmojiUtils.js

@@ -2,11 +2,19 @@ import _ from 'underscore';
 import lodashOrderBy from 'lodash/orderBy';
 import moment from 'moment';
 import Str from 'expensify-common/lib/str';
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
 import * as User from './actions/User';
 import emojisTrie from './EmojiTrie';
 import FrequentlyUsed from '../../assets/images/history.svg';
 
+let frequentlyUsedEmojis = [];
+Onyx.connect({
+    key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
+    callback: val => frequentlyUsedEmojis = val,
+});
+
 /**
  * Get the unicode code of an emoji in base 16.
  * @param {String} input
@@ -139,10 +147,9 @@ function addSpacesToEmojiCategories(emojis) {
 /**
  * Get a merged array with frequently used emojis
  * @param {Object[]} emojis
- * @param {Object[]} frequentlyUsedEmojis
  * @returns {Object[]}
  */
-function mergeEmojisWithFrequentlyUsedEmojis(emojis, frequentlyUsedEmojis = []) {
+function mergeEmojisWithFrequentlyUsedEmojis(emojis) {
     if (frequentlyUsedEmojis.length === 0) {
         return addSpacesToEmojiCategories(emojis);
     }
@@ -159,29 +166,28 @@ function mergeEmojisWithFrequentlyUsedEmojis(emojis, frequentlyUsedEmojis = [])
 
 /**
  * Update the frequently used emojis list by usage and sync with API
- * @param {Object[]} frequentlyUsedEmojis
- * @param {Object} newEmoji
+ * @param {Object|Object[]} newEmoji
  */
-function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) {
-    let frequentEmojiList = frequentlyUsedEmojis;
-    let currentEmojiCount = 1;
+function addToFrequentlyUsedEmojis(newEmoji) {
+    let frequentEmojiList = [...frequentlyUsedEmojis];
+
     const currentTimestamp = moment().unix();
-    const emojiIndex = _.findIndex(frequentEmojiList, e => e.code === newEmoji.code);
-    if (emojiIndex >= 0) {
-        currentEmojiCount = frequentEmojiList[emojiIndex].count + 1;
-        frequentEmojiList.splice(emojiIndex, 1);
-    }
-    const updatedEmoji = {...newEmoji, ...{count: currentEmojiCount, lastUpdatedAt: currentTimestamp}};
-    const maxFrequentEmojiCount = (CONST.EMOJI_FREQUENT_ROW_COUNT * CONST.EMOJI_NUM_PER_ROW) - 1;
+    _.each(newEmoji, (emoji) => {
+        let currentEmojiCount = 1;
+        const emojiIndex = _.findIndex(frequentEmojiList, e => e.code === emoji.code);
+        if (emojiIndex >= 0) {
+            currentEmojiCount = frequentEmojiList[emojiIndex].count + 1;
+            frequentEmojiList.splice(emojiIndex, 1);
+        }
+        const updatedEmoji = {...emoji, ...{count: currentEmojiCount, lastUpdatedAt: currentTimestamp}};
+        frequentEmojiList.push(updatedEmoji);
+    });
 
-    // We want to make sure the current emoji is added to the list
-    // Hence, we take one less than the current high frequent used emojis and if same then sorted by lastUpdatedAt
-    frequentEmojiList = lodashOrderBy(frequentEmojiList, ['count', 'lastUpdatedAt'], ['desc', 'desc']);
-    frequentEmojiList = frequentEmojiList.slice(0, maxFrequentEmojiCount);
-    frequentEmojiList.push(updatedEmoji);
+    const maxFrequentEmojiCount = (CONST.EMOJI_FREQUENT_ROW_COUNT * CONST.EMOJI_NUM_PER_ROW);
 
-    // Second sorting is required so that new emoji is properly placed at sort-ordered location
+    // Sort the list and take the first maxFrequentEmojiCount items
     frequentEmojiList = lodashOrderBy(frequentEmojiList, ['count', 'lastUpdatedAt'], ['desc', 'desc']);
+    frequentEmojiList = frequentEmojiList.slice(0, maxFrequentEmojiCount);
     User.updateFrequentlyUsedEmojis(frequentEmojiList);
 }
 
@@ -215,10 +221,12 @@ function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = CON
     if (!emojiData || emojiData.length === 0) {
         return text;
     }
+    const emojis = [];
     for (let i = 0; i < emojiData.length; i++) {
         const checkEmoji = emojisTrie.search(emojiData[i].slice(1, -1));
         if (checkEmoji && checkEmoji.metaData.code) {
             let emojiReplacement = getEmojiCodeWithSkinColor(checkEmoji.metaData, preferredSkinTone);
+            emojis.push({code: emojiReplacement});
 
             // If this is the last emoji in the message and it's the end of the message so far,
             // add a space after it so the user can keep typing easily.
@@ -228,6 +236,9 @@ function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = CON
             newText = newText.replace(emojiData[i], emojiReplacement);
         }
     }
+
+    // Add all replaced emojis to the frequently used emojis list
+    addToFrequentlyUsedEmojis(emojis);
     return newText;
 }