Merge pull request #6498 from mananjadhav/feat/frequent-used-emojis

Added frequently used emojis support

Author: Jag96

src/CONST.js

@@ -289,6 +289,7 @@ const CONST = {
         PREFERRED_LOCALE: 'preferredLocale',
         KYC_MIGRATION: 'expensify_migration_2020_04_28_RunKycVerifications',
         PREFERRED_EMOJI_SKIN_TONE: 'expensify_preferredEmojiSkinTone',
+        FREQUENTLY_USED_EMOJIS: 'expensify_frequentlyUsedEmojis',
     },
     DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
     DEFAULT_ACCOUNT_DATA: {error: '', success: '', loading: false},
@@ -310,6 +311,10 @@ const CONST = {
 
     EMOJI_SPACER: 'SPACER',
 
+    EMOJI_NUM_PER_ROW: 8,
+
+    EMOJI_FREQUENT_ROW_COUNT: 3,
+
     LOGIN_TYPE: {
         PHONE: 'phone',
         EMAIL: 'email',

src/ONYXKEYS.js

@@ -133,6 +133,9 @@ export default {
     // Store preferred skintone for emoji
     PREFERRED_EMOJI_SKIN_TONE: 'preferredEmojiSkinTone',
 
+    // Store frequently used emojis for this user
+    FREQUENTLY_USED_EMOJIS: 'frequentlyUsedEmojis',
+
     // Stores Workspace ID that will be tied to reimbursement account during setup
     REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID',
 

src/libs/EmojiUtils.js

@@ -1,5 +1,8 @@
 import _ from 'underscore';
+import lodashOrderBy from 'lodash/orderBy';
+import moment from 'moment';
 import CONST from '../CONST';
+import * as User from './actions/User';
 
 /**
  * Get the unicode code of an emoji in base 16.
@@ -67,9 +70,97 @@ function isSingleEmoji(message) {
     return matchedUnicode === currentMessageUnicode;
 }
 
+/**
+ * Get the header indices based on the max emojis per row
+ * @param {Object[]} emojis
+ * @returns {Number[]}
+ */
+function getDynamicHeaderIndices(emojis) {
+    const headerIndices = [];
+    _.each(emojis, (emoji, index) => {
+        if (!emoji.header) {
+            return;
+        }
+        headerIndices.push(Math.floor(index / CONST.EMOJI_NUM_PER_ROW));
+    });
+    return headerIndices;
+}
+
+/**
+ * Get number of empty spaces to be filled to get equal emojis for every row
+ * @param {Number} emojiCount
+ * @returns {Object[]}
+ */
+function getDynamicSpacing(emojiCount) {
+    const spacerEmojis = [];
+    let modLength = CONST.EMOJI_NUM_PER_ROW - (emojiCount % CONST.EMOJI_NUM_PER_ROW);
+    while (modLength > 0) {
+        spacerEmojis.push({
+            code: CONST.EMOJI_SPACER,
+        });
+        modLength -= 1;
+    }
+    return spacerEmojis;
+}
+
+/**
+ * Get a merged array with frequently used emojis
+ * @param {Object[]} emojis
+ * @param {Object[]} frequentlyUsedEmojis
+ * @returns {Object[]}
+ */
+function mergeEmojisWithFrequentlyUsedEmojis(emojis, frequentlyUsedEmojis = []) {
+    if (frequentlyUsedEmojis.length === 0) {
+        return emojis;
+    }
+
+    let allEmojis = [{
+        header: true,
+        code: 'Frequently Used',
+    }];
+
+    allEmojis = allEmojis.concat(getDynamicSpacing(allEmojis.length));
+    allEmojis = allEmojis.concat(frequentlyUsedEmojis, getDynamicSpacing(frequentlyUsedEmojis.length));
+    allEmojis = allEmojis.concat(emojis);
+    return allEmojis;
+}
+
+/**
+ * Update the frequently used emojis list by usage and sync with API
+ * @param {Object[]} frequentlyUsedEmojis
+ * @param {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}};
+    const maxFrequentEmojiCount = (CONST.EMOJI_FREQUENT_ROW_COUNT * CONST.EMOJI_NUM_PER_ROW) - 1;
+
+    // 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);
+
+    // Second sorting is required so that new emoji is properly placed at sort-ordered location
+    frequentEmojiList = lodashOrderBy(frequentEmojiList, ['count', 'lastUpdatedAt'], ['desc', 'desc']);
+
+    User.setFrequentlyUsedEmojis(frequentEmojiList);
+}
+
 
 export {
     getEmojiUnicode,
     trimEmojiUnicode,
     isSingleEmoji,
+    getDynamicHeaderIndices,
+    getDynamicSpacing,
+    mergeEmojisWithFrequentlyUsedEmojis,
+    addToFrequentlyUsedEmojis,
 };

src/libs/actions/User.js

@@ -77,6 +77,7 @@ function getUserDetails() {
         nvpNames: [
             CONST.NVP.PAYPAL_ME_ADDRESS,
             CONST.NVP.PREFERRED_EMOJI_SKIN_TONE,
+            CONST.NVP.FREQUENTLY_USED_EMOJIS,
         ].join(','),
     })
         .then((response) => {
@@ -97,6 +98,9 @@ function getUserDetails() {
             const preferredSkinTone = lodashGet(response, `nameValuePairs.${CONST.NVP.PREFERRED_EMOJI_SKIN_TONE}`, {});
             Onyx.merge(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
                 getSkinToneEmojiFromIndex(preferredSkinTone).skinTone);
+
+            const frequentlyUsedEmojis = lodashGet(response, `nameValuePairs.${CONST.NVP.FREQUENTLY_USED_EMOJIS}`, []);
+            Onyx.set(ONYXKEYS.FREQUENTLY_USED_EMOJIS, frequentlyUsedEmojis);
         });
 }
 
@@ -317,6 +321,15 @@ function setPreferredSkinTone(skinTone) {
     return NameValuePair.set(CONST.NVP.PREFERRED_EMOJI_SKIN_TONE, skinTone, ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE);
 }
 
+/**
+ * Sync frequentlyUsedEmojis with Onyx and Server
+ * @param {Object[]} frequentlyUsedEmojis
+ */
+
+function setFrequentlyUsedEmojis(frequentlyUsedEmojis) {
+    return NameValuePair.set(CONST.NVP.FREQUENTLY_USED_EMOJIS, frequentlyUsedEmojis, ONYXKEYS.FREQUENTLY_USED_EMOJIS);
+}
+
 /**
  * @param {Boolean} shouldUseSecureStaging
  */
@@ -343,4 +356,5 @@ export {
     setShouldUseSecureStaging,
     clearUserErrorMessage,
     subscribeToExpensifyCardUpdates,
+    setFrequentlyUsedEmojis,
 };

src/pages/home/report/EmojiPickerMenu/index.js

@@ -15,6 +15,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../../components/withLo
 import compose from '../../../../libs/compose';
 import getOperatingSystem from '../../../../libs/getOperatingSystem';
 import EmojiSkinToneList from '../EmojiSkinToneList';
+import * as EmojiUtils from '../../../../libs/EmojiUtils';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */
@@ -29,6 +30,12 @@ const propTypes = {
     /** Function to sync the selected skin tone with parent, onyx and nvp */
     updatePreferredSkinTone: PropTypes.func,
 
+    /** User's frequently used emojis */
+    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.shape({
+        code: PropTypes.string.isRequired,
+        keywords: PropTypes.arrayOf(PropTypes.string),
+    })).isRequired,
+
     /** Props related to the dimensions of the window */
     ...windowDimensionsPropTypes,
 
@@ -55,19 +62,20 @@ class EmojiPickerMenu extends Component {
         // For this reason to make headers work, we need to have the header be the only rendered element in its row
         // If this number is changed, emojis.js will need to be updated to have the proper number of spacer elements
         // around each header.
-        this.numColumns = 8;
+        this.numColumns = CONST.EMOJI_NUM_PER_ROW;
+
+        const allEmojis = EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis);
 
         // This is the indices of each category of emojis
         // The positions are static, and are calculated as index/numColumns (8 in our case)
         // This is because each row of 8 emojis counts as one index
-        // If more emojis are ever added to emojis.js this will need to be updated or things will break
-        this.unfilteredHeaderIndices = [0, 33, 59, 87, 98, 120, 147];
+        this.unfilteredHeaderIndices = EmojiUtils.getDynamicHeaderIndices(allEmojis);
 
         // If we're on Windows, don't display the flag emojis (the last category),
         // since Windows doesn't support them (and only displays country codes instead)
         this.emojis = getOperatingSystem() === CONST.OS.WINDOWS
-            ? emojis.slice(0, this.unfilteredHeaderIndices.pop() * this.numColumns)
-            : emojis;
+            ? allEmojis.slice(0, this.unfilteredHeaderIndices.pop() * this.numColumns)
+            : allEmojis;
 
         this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300);
         this.highlightAdjacentEmoji = this.highlightAdjacentEmoji.bind(this);
@@ -119,7 +127,7 @@ class EmojiPickerMenu extends Component {
 
             // Select the currently highlighted emoji if enter is pressed
             if (keyBoardEvent.key === 'Enter' && this.state.highlightedIndex !== -1) {
-                this.props.onEmojiSelected(this.state.filteredEmojis[this.state.highlightedIndex].code);
+                this.props.onEmojiSelected(this.state.filteredEmojis[this.state.highlightedIndex].code, this.state.filteredEmojis[this.state.highlightedIndex]);
                 return;
             }
 
@@ -346,7 +354,7 @@ class EmojiPickerMenu extends Component {
 
         return (
             <EmojiPickerMenuItem
-                onPress={this.props.onEmojiSelected}
+                onPress={emoji => this.props.onEmojiSelected(emoji, item)}
                 onHover={() => this.setState({highlightedIndex: index})}
                 emoji={emojiCode}
                 isHighlighted={index === this.state.highlightedIndex}

src/pages/home/report/EmojiPickerMenu/index.native.js

@@ -10,6 +10,7 @@ import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
 import ExpensifyText from '../../../../components/ExpensifyText';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import EmojiSkinToneList from '../EmojiSkinToneList';
+import * as EmojiUtils from '../../../../libs/EmojiUtils';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */
@@ -21,6 +22,13 @@ const propTypes = {
     /** Function to sync the selected skin tone with parent, onyx and nvp */
     updatePreferredSkinTone: PropTypes.func,
 
+    /** User's frequently used emojis */
+    frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.shape({
+        code: PropTypes.string.isRequired,
+        keywords: PropTypes.arrayOf(PropTypes.string),
+    })).isRequired,
+
+
     /** Props related to the dimensions of the window */
     ...windowDimensionsPropTypes,
 
@@ -37,13 +45,14 @@ class EmojiPickerMenu extends Component {
         // For this reason to make headers work, we need to have the header be the only rendered element in its row
         // If this number is changed, emojis.js will need to be updated to have the proper number of spacer elements
         // around each header.
-        this.numColumns = 8;
+        this.numColumns = CONST.EMOJI_NUM_PER_ROW;
+
+        this.emojis = EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis);
 
         // This is the indices of each category of emojis
         // The positions are static, and are calculated as index/numColumns (8 in our case)
         // This is because each row of 8 emojis counts as one index
-        // If this emojis are ever added to emojis.js this will need to be updated or things will break
-        this.unfilteredHeaderIndices = [0, 33, 59, 87, 98, 120, 147];
+        this.unfilteredHeaderIndices = EmojiUtils.getDynamicHeaderIndices(this.emojis);
 
         this.renderItem = this.renderItem.bind(this);
         this.isMobileLandscape = this.isMobileLandscape.bind(this);
@@ -89,7 +98,7 @@ class EmojiPickerMenu extends Component {
 
         return (
             <EmojiPickerMenuItem
-                onPress={this.props.onEmojiSelected}
+                onPress={emoji => this.props.onEmojiSelected(emoji, item)}
                 emoji={emojiCode}
             />
         );
@@ -100,7 +109,7 @@ class EmojiPickerMenu extends Component {
         return (
             <View style={styles.emojiPickerContainer}>
                 <FlatList
-                    data={emojis}
+                    data={this.emojis}
                     renderItem={this.renderItem}
                     keyExtractor={item => (`emoji_picker_${item.code}`)}
                     numColumns={this.numColumns}

src/pages/home/report/ReportActionCompose.js

@@ -48,6 +48,7 @@ import ParticipantLocalTime from './ParticipantLocalTime';
 import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
 import DateUtils from '../../../libs/DateUtils';
 import Tooltip from '../../../components/Tooltip';
+import * as EmojiUtils from '../../../libs/EmojiUtils';
 
 const propTypes = {
     /** Beta features list */
@@ -412,8 +413,10 @@ class ReportActionCompose extends React.Component {
      * Callback for the emoji picker to add whatever emoji is chosen into the main input
      *
      * @param {String} emoji
+     * @param {Object} emojiObject
      */
-    addEmojiToTextBox(emoji) {
+    addEmojiToTextBox(emoji, emojiObject) {
+        EmojiUtils.addToFrequentlyUsedEmojis(this.props.frequentlyUsedEmojis, emojiObject);
         this.hideEmojiPicker();
         const newComment = this.comment.slice(0, this.state.selection.start)
             + emoji + this.comment.slice(this.state.selection.end, this.comment.length);
@@ -669,6 +672,7 @@ class ReportActionCompose extends React.Component {
                             ref={el => this.emojiSearchInput = el}
                             preferredSkinTone={this.props.preferredSkinTone}
                             updatePreferredSkinTone={this.setPreferredSkinTone}
+                            frequentlyUsedEmojis={this.props.frequentlyUsedEmojis}
                         />
                     </Popover>
                     <Pressable
@@ -757,5 +761,8 @@ export default compose(
         preferredSkinTone: {
             key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
         },
+        frequentlyUsedEmojis: {
+            key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
+        },
     }),
 )(ReportActionCompose);