Fix frequently used emojis list doesn't get updated when adding emojis by typing emoji code with colon

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -32,12 +32,6 @@ const propTypes = {
     /** Stores user's preferred skin tone */
     preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-    /** User's frequently used emojis */
-    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.shape({
-        code: PropTypes.string.isRequired,
-        keywords: PropTypes.arrayOf(PropTypes.string),
-    })),
-
     /** Props related to the dimensions of the window */
     ...windowDimensionsPropTypes,
 
@@ -47,7 +41,6 @@ const propTypes = {
 const defaultProps = {
     forwardedRef: () => {},
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
-    frequentlyUsedEmojis: [],
 };
 
 class EmojiPickerMenu extends Component {
@@ -64,8 +57,8 @@ class EmojiPickerMenu extends Component {
         // since Windows doesn't support them
         const flagHeaderIndex = _.findIndex(emojis, emoji => emoji.header && emoji.code === 'flags');
         this.emojis = getOperatingSystem() === CONST.OS.WINDOWS
-            ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis.slice(0, flagHeaderIndex), this.props.frequentlyUsedEmojis)
-            : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis);
+            ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis.slice(0, flagHeaderIndex))
+            : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis);
 
         // Get the header emojis along with the code, index and icon.
         // index is the actual header index starting at the first emoji and counting each one
@@ -234,7 +227,7 @@ class EmojiPickerMenu extends Component {
      * @param {Object} emojiObject
      */
     addToFrequentAndSelectEmoji(emoji, emojiObject) {
-        EmojiUtils.addToFrequentlyUsedEmojis(this.props.frequentlyUsedEmojis, emojiObject);
+        EmojiUtils.addToFrequentlyUsedEmojis(emojiObject);
         this.props.onEmojiSelected(emoji, emojiObject);
     }
 
@@ -569,9 +562,6 @@ export default compose(
         preferredSkinTone: {
             key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
         },
-        frequentlyUsedEmojis: {
-            key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
-        },
     }),
 )(React.forwardRef((props, ref) => (
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/EmojiPicker/EmojiPickerMenu/index.native.js

@@ -25,12 +25,6 @@ const propTypes = {
     /** Stores user's preferred skin tone */
     preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-    /** User's frequently used emojis */
-    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.shape({
-        code: PropTypes.string.isRequired,
-        keywords: PropTypes.arrayOf(PropTypes.string),
-    })),
-
     /** Props related to the dimensions of the window */
     ...windowDimensionsPropTypes,
 
@@ -40,7 +34,6 @@ const propTypes = {
 
 const defaultProps = {
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
-    frequentlyUsedEmojis: [],
 };
 
 class EmojiPickerMenu extends Component {
@@ -50,7 +43,7 @@ class EmojiPickerMenu extends Component {
         // Ref for emoji FlatList
         this.emojiList = undefined;
 
-        this.emojis = EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis);
+        this.emojis = EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis);
 
         // Get the header emojis along with the code, index and icon.
         // index is the actual header index starting at the first emoji and counting each one
@@ -77,7 +70,7 @@ class EmojiPickerMenu extends Component {
      * @param {Object} emojiObject
      */
     addToFrequentAndSelectEmoji(emoji, emojiObject) {
-        EmojiUtils.addToFrequentlyUsedEmojis(this.props.frequentlyUsedEmojis, emojiObject);
+        EmojiUtils.addToFrequentlyUsedEmojis(emojiObject);
         this.props.onEmojiSelected(emoji, emojiObject);
     }
 
@@ -190,9 +183,6 @@ export default compose(
         preferredSkinTone: {
             key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
         },
-        frequentlyUsedEmojis: {
-            key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
-        },
     }),
 )(React.forwardRef((props, ref) => (
     // eslint-disable-next-line react/jsx-props-no-spreading

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,31 @@ 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;
-    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}};
+function addToFrequentlyUsedEmojis(newEmoji) {
+    let frequentEmojiList = [...frequentlyUsedEmojis];
+
     const maxFrequentEmojiCount = (CONST.EMOJI_FREQUENT_ROW_COUNT * CONST.EMOJI_NUM_PER_ROW) - 1;
+    const currentTimestamp = moment().unix();
+    _.each([].concat(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}};
 
-    // 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);
+        // We want to make sure the current emoji is added to the list
+        // Hence, we take one less than the current frequent used emojis
+        frequentEmojiList = frequentEmojiList.slice(0, maxFrequentEmojiCount);
+        frequentEmojiList.push(updatedEmoji);
+
+        // Sort the list after adding a new emoji to the frequent used emojis list
+        frequentEmojiList = lodashOrderBy(frequentEmojiList, ['count', 'lastUpdatedAt'], ['desc', 'desc']);
+    });
 
-    // Second sorting is required so that new emoji is properly placed at sort-ordered location
-    frequentEmojiList = lodashOrderBy(frequentEmojiList, ['count', 'lastUpdatedAt'], ['desc', 'desc']);
     User.updateFrequentlyUsedEmojis(frequentEmojiList);
 }
 
@@ -204,6 +213,9 @@ const getEmojiCodeWithSkinColor = (item, preferredSkinToneIndex) => {
 /**
  * Replace any emoji name in a text with the emoji icon.
  * If we're on mobile, we also add a space after the emoji granted there's no text after it.
+ *
+ * All replaced emojis will be added to the frequently used emojis list.
+ *
  * @param {String} text
  * @param {Boolean} isSmallScreenWidth
  * @param {Number} preferredSkinTone
@@ -215,10 +227,17 @@ 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));
+        const name = emojiData[i].slice(1, -1);
+        const checkEmoji = emojisTrie.search(name);
         if (checkEmoji && checkEmoji.metaData.code) {
             let emojiReplacement = getEmojiCodeWithSkinColor(checkEmoji.metaData, preferredSkinTone);
+            emojis.push({
+                name,
+                code: checkEmoji.metaData.code,
+                types: checkEmoji.metaData.types,
+            });
 
             // 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 +247,11 @@ function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = CON
             newText = newText.replace(emojiData[i], emojiReplacement);
         }
     }
+
+    // Add all replaced emojis to the frequently used emojis list
+    if (!_.isEmpty(emojis)) {
+        addToFrequentlyUsedEmojis(emojis);
+    }
     return newText;
 }
 

src/pages/home/report/ReportActionCompose.js

@@ -112,12 +112,6 @@ const propTypes = {
     /** Stores user's preferred skin tone */
     preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-    /** User's frequently used emojis */
-    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.shape({
-        code: PropTypes.string.isRequired,
-        keywords: PropTypes.arrayOf(PropTypes.string),
-    })),
-
     /** The type of action that's pending  */
     pendingAction: PropTypes.oneOf(['add', 'update', 'delete']),
 
@@ -137,7 +131,6 @@ const defaultProps = {
     blockedFromConcierge: {},
     personalDetails: {},
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
-    frequentlyUsedEmojis: [],
     isComposerFullSize: false,
     pendingAction: null,
     ...withCurrentUserPersonalDetailsDefaultProps,
@@ -519,7 +512,7 @@ class ReportActionCompose extends React.Component {
             },
             suggestedEmojis: [],
         }));
-        EmojiUtils.addToFrequentlyUsedEmojis(this.props.frequentlyUsedEmojis, emojiObject);
+        EmojiUtils.addToFrequentlyUsedEmojis(emojiObject);
     }
 
     isEmptyChat() {
@@ -1044,9 +1037,6 @@ export default compose(
         blockedFromConcierge: {
             key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE,
         },
-        frequentlyUsedEmojis: {
-            key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
-        },
         preferredSkinTone: {
             key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
         },