Merge pull request #17996 from Expensify/tgolen-migrate-reactions

Support new emojiReaction data format

src/CONST.js

@@ -174,6 +174,7 @@ const CONST = {
     },
     DATE: {
         MOMENT_FORMAT_STRING: 'YYYY-MM-DD',
+        SQL_DATE_TIME: 'YYYY-MM-DD HH:mm:ss',
         UNIX_EPOCH: '1970-01-01 00:00:00.000',
         MAX_DATE: '9999-12-31',
         MIN_DATE: '0001-01-01',

src/components/AttachmentCarousel/index.js

@@ -270,7 +270,11 @@ class AttachmentCarousel extends React.Component {
 
     /**
      * Defines how a single attachment should be rendered
-     * @param {{ isAuthTokenRequired: Boolean, source: String, file: { name: String } }} item
+     * @param {Object} item
+     * @param {Boolean} item.isAuthTokenRequired
+     * @param {String} item.source
+     * @param {Object} item.file
+     * @param {String} item.file.name
      * @returns {JSX.Element}
      */
     renderItem({item}) {

src/components/AttachmentPicker/index.native.js

@@ -315,7 +315,8 @@ class AttachmentPicker extends Component {
     /**
      * Setup native attachment selection to start after this popover closes
      *
-     * @param {{pickAttachment: function}} item - an item from this.menuItemData
+     * @param {Object} item - an item from this.menuItemData
+     * @param {Function} item.pickAttachment
      */
     selectItem(item) {
         /* setTimeout delays execution to the frame after the modal closes

src/components/Reactions/EmojiReactionsPropTypes.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+
+/** All the emoji reactions for the report action. An object that looks like this:
+    "emojiReactions": {
+        "+1": { // The emoji added to the action
+            "createdAt": "2021-01-01 00:00:00",
+            "users": {
+                2352342: { // The accountID of the user who added this emoji
+                    "skinTones": {
+                        "1": "2021-01-01 00:00:00",
+                        "2": "2021-01-01 00:00:00",
+                    },
+                },
+            },
+        },
+    },
+*/
+export default PropTypes.objectOf(
+    PropTypes.shape({
+        /** The time the emoji was added */
+        createdAt: PropTypes.string,
+
+        /** All the users who have added this emoji */
+        users: PropTypes.objectOf(
+            PropTypes.shape({
+                /** The skin tone which was used and also the timestamp of when it was added */
+                skinTones: PropTypes.objectOf(PropTypes.string),
+            }),
+        ),
+    }),
+);

src/components/Reactions/MiniQuickEmojiReactions.js

@@ -12,7 +12,7 @@ import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import getButtonState from '../../libs/getButtonState';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
-import {baseQuickEmojiReactionsPropTypes} from './QuickEmojiReactions/BaseQuickEmojiReactions';
+import {baseQuickEmojiReactionsPropTypes, baseQuickEmojiReactionsDefaultProps} from './QuickEmojiReactions/BaseQuickEmojiReactions';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -40,6 +40,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    ...baseQuickEmojiReactionsDefaultProps,
     onEmojiPickerClosed: () => {},
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
     reportAction: {},
@@ -61,7 +62,7 @@ function MiniQuickEmojiReactions(props) {
         EmojiPickerAction.showEmojiPicker(
             props.onEmojiPickerClosed,
             (emojiCode, emojiObject) => {
-                props.onEmojiSelected(emojiObject);
+                props.onEmojiSelected(emojiObject, props.emojiReactions);
             },
             ref.current,
             undefined,
@@ -77,7 +78,7 @@ function MiniQuickEmojiReactions(props) {
                     key={emoji.name}
                     isDelayButtonStateComplete={false}
                     tooltipText={`:${EmojiUtils.getLocalizedEmojiName(emoji.name, props.preferredLocale)}:`}
-                    onPress={Session.checkIfActionIsAllowed(() => props.onEmojiSelected(emoji))}
+                    onPress={Session.checkIfActionIsAllowed(() => props.onEmojiSelected(emoji, props.emojiReactions))}
                 >
                     <Text style={[styles.miniQuickEmojiReactionText, styles.userSelectNone]}>{EmojiUtils.getPreferredEmojiCode(emoji, props.preferredSkinTone)}</Text>
                 </BaseMiniContextMenuItem>
@@ -105,9 +106,15 @@ MiniQuickEmojiReactions.propTypes = propTypes;
 MiniQuickEmojiReactions.defaultProps = defaultProps;
 export default compose(
     withLocalize,
+    // ESLint throws an error because it can't see that emojiReactions is defined in props. It is defined in props, but
+    // because of a couple spread operators, I think that's why ESLint struggles to see it
+    // eslint-disable-next-line rulesdir/onyx-props-must-have-default
     withOnyx({
         preferredSkinTone: {
             key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
         },
+        emojiReactions: {
+            key: ({reportActionID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`,
+        },
     }),
 )(MiniQuickEmojiReactions);

src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js

@@ -10,9 +10,12 @@ import styles from '../../../styles/styles';
 import ONYXKEYS from '../../../ONYXKEYS';
 import Tooltip from '../../Tooltip';
 import * as EmojiUtils from '../../../libs/EmojiUtils';
+import EmojiReactionsPropTypes from '../EmojiReactionsPropTypes';
 import * as Session from '../../../libs/actions/Session';
 
 const baseQuickEmojiReactionsPropTypes = {
+    emojiReactions: EmojiReactionsPropTypes,
+
     /**
      * Callback to fire when an emoji is selected.
      */
@@ -39,6 +42,7 @@ const baseQuickEmojiReactionsPropTypes = {
 };
 
 const baseQuickEmojiReactionsDefaultProps = {
+    emojiReactions: {},
     onWillShowPicker: () => {},
     onPressOpenPicker: () => {},
     reportAction: {},
@@ -67,7 +71,7 @@ function BaseQuickEmojiReactions(props) {
                         <EmojiReactionBubble
                             emojiCodes={[EmojiUtils.getPreferredEmojiCode(emoji, props.preferredSkinTone)]}
                             isContextMenu
-                            onPress={Session.checkIfActionIsAllowed(() => props.onEmojiSelected(emoji))}
+                            onPress={Session.checkIfActionIsAllowed(() => props.onEmojiSelected(emoji, props.emojiReactions))}
                         />
                     </View>
                 </Tooltip>
@@ -90,9 +94,12 @@ export default withOnyx({
     preferredSkinTone: {
         key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
     },
+    emojiReactions: {
+        key: ({reportActionID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`,
+    },
     preferredLocale: {
         key: ONYXKEYS.NVP_PREFERRED_LOCALE,
     },
 })(BaseQuickEmojiReactions);
 
-export {baseQuickEmojiReactionsPropTypes};
+export {baseQuickEmojiReactionsPropTypes, baseQuickEmojiReactionsDefaultProps};

src/components/Reactions/ReportActionItemReactions.js → src/components/Reactions/ReportActionItemEmojiReactions.js

@@ -9,26 +9,14 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withLocalize from '../withLocalize';
 import compose from '../../libs/compose';
 import * as Report from '../../libs/actions/Report';
+import EmojiReactionsPropTypes from './EmojiReactionsPropTypes';
 import Tooltip from '../Tooltip';
 import ReactionTooltipContent from './ReactionTooltipContent';
 import * as EmojiUtils from '../../libs/EmojiUtils';
 import ReportScreenContext from '../../pages/home/ReportScreenContext';
 
 const propTypes = {
-    /**
-     * An array of objects containing the reaction data.
-     * The shape of a reaction looks like this:
-     *
-     * "reactionName": {
-     *     emoji: string,
-     *     users: {
-     *         accountID: string,
-     *         skinTone: number,
-     *     }[]
-     * }
-     */
-    // eslint-disable-next-line react/forbid-prop-types
-    reactions: PropTypes.arrayOf(PropTypes.object).isRequired,
+    emojiReactions: EmojiReactionsPropTypes,
 
     /** The ID of the reportAction. It is the string representation of the a 64-bit integer. */
     reportActionID: PropTypes.string.isRequired,
@@ -45,27 +33,66 @@ const propTypes = {
 
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
+    emojiReactions: {},
 };
 
-function ReportActionItemReactions(props) {
+function ReportActionItemEmojiReactions(props) {
     const {reactionListRef} = useContext(ReportScreenContext);
     const popoverReactionListAnchor = useRef(null);
-    const reactionsWithCount = _.filter(props.reactions, (reaction) => reaction.users.length > 0);
+    let totalReactionCount = 0;
+
+    // Each emoji is sorted by the oldest timestamp of user reactions so that they will always appear in the same order for everyone
+    const sortedReactions = _.sortBy(props.emojiReactions, (emojiReaction, emojiName) => {
+        // Since the emojiName is only stored as the object key, when _.sortBy() runs, the object is converted to an array and the
+        // keys are lost. To keep from losing the emojiName, it's copied to the emojiReaction object.
+        // eslint-disable-next-line no-param-reassign
+        emojiReaction.emojiName = emojiName;
+        const oldestUserReactionTimestamp = _.chain(emojiReaction.users)
+            .reduce((allTimestampsArray, userData) => {
+                if (!userData) {
+                    return allTimestampsArray;
+                }
+                _.each(userData.skinTones, (createdAt) => {
+                    allTimestampsArray.push(createdAt);
+                });
+                return allTimestampsArray;
+            }, [])
+            .sort()
+            .first()
+            .value();
+
+        // Just in case two emojis have the same timestamp, also combine the timestamp with the
+        // emojiName so that the order will always be the same. Without this, the order can be pretty random
+        // and shift around a little bit.
+        return (oldestUserReactionTimestamp || emojiReaction.createdAt) + emojiName;
+    });
 
     return (
         <View
             ref={popoverReactionListAnchor}
             style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}
         >
-            {_.map(reactionsWithCount, (reaction) => {
-                const reactionCount = reaction.users.length;
-                const reactionUsers = _.map(reaction.users, (sender) => sender.accountID);
-                const emoji = EmojiUtils.findEmojiByName(reaction.emoji);
-                const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emoji, reaction.users);
-                const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, reactionUsers);
+            {_.map(sortedReactions, (reaction) => {
+                const reactionEmojiName = reaction.emojiName;
+                const usersWithReactions = _.pick(reaction.users, _.identity);
+                let reactionCount = 0;
+
+                // Loop through the users who have reacted and see how many skintones they reacted with so that we get the total count
+                _.forEach(usersWithReactions, (user) => {
+                    reactionCount += _.size(user.skinTones);
+                });
+                if (!reactionCount) {
+                    return null;
+                }
+                totalReactionCount += reactionCount;
+                const emojiAsset = EmojiUtils.findEmojiByName(reactionEmojiName);
+                const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emojiAsset, reaction.users);
+                const hasUserReacted = Report.hasAccountIDEmojiReacted(props.currentUserPersonalDetails.accountID, reaction.users);
+                const reactionUsers = _.keys(usersWithReactions);
+                const reactionUserAccountIDs = _.map(reactionUsers, Number);
 
                 const onPress = () => {
-                    props.toggleReaction(emoji);
+                    props.toggleReaction(emojiAsset);
                 };
 
                 const onReactionListOpen = (event) => {
@@ -76,14 +103,14 @@ function ReportActionItemReactions(props) {
                     <Tooltip
                         renderTooltipContent={() => (
                             <ReactionTooltipContent
-                                emojiName={EmojiUtils.getLocalizedEmojiName(reaction.emoji, props.preferredLocale)}
+                                emojiName={EmojiUtils.getLocalizedEmojiName(reactionEmojiName, props.preferredLocale)}
                                 emojiCodes={emojiCodes}
-                                accountIDs={reactionUsers}
+                                accountIDs={reactionUserAccountIDs}
                                 currentUserPersonalDetails={props.currentUserPersonalDetails}
                             />
                         )}
                         renderTooltipContentKey={[..._.map(reactionUsers, (user) => user.toString()), ...emojiCodes]}
-                        key={reaction.emoji}
+                        key={reactionEmojiName}
                     >
                         <View>
                             <EmojiReactionBubble
@@ -99,7 +126,7 @@ function ReportActionItemReactions(props) {
                     </Tooltip>
                 );
             })}
-            {reactionsWithCount.length > 0 && (
+            {totalReactionCount > 0 && (
                 <AddReactionBubble
                     onSelectEmoji={props.toggleReaction}
                     reportAction={{reportActionID: props.reportActionID}}
@@ -109,7 +136,7 @@ function ReportActionItemReactions(props) {
     );
 }
 
-ReportActionItemReactions.displayName = 'ReportActionItemReactions';
-ReportActionItemReactions.propTypes = propTypes;
-ReportActionItemReactions.defaultProps = defaultProps;
-export default compose(withLocalize, withCurrentUserPersonalDetails)(ReportActionItemReactions);
+ReportActionItemEmojiReactions.displayName = 'ReportActionItemReactions';
+ReportActionItemEmojiReactions.propTypes = propTypes;
+ReportActionItemEmojiReactions.defaultProps = defaultProps;
+export default compose(withLocalize, withCurrentUserPersonalDetails)(ReportActionItemEmojiReactions);

src/components/ThumbnailImage.js

@@ -78,7 +78,9 @@ class ThumbnailImage extends PureComponent {
     /**
      * Update the state with the computed thumbnail sizes.
      *
-     * @param {{ width: number, height: number }} Params - width and height of the original image.
+     * @param {Object} Params - width and height of the original image.
+     * @param {Number} Params.width
+     * @param {Number} Params.height
      */
     updateImageSize({width, height}) {
         const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(width, height);

src/libs/EmojiUtils.js

@@ -2,6 +2,7 @@ import _ from 'underscore';
 import moment from 'moment';
 import Str from 'expensify-common/lib/str';
 import Onyx from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
 import emojisTrie from './EmojiTrie';
@@ -384,20 +385,24 @@ const getPreferredEmojiCode = (emoji, preferredSkinTone) => {
  * Given an emoji object and a list of senders it will return an
  * array of emoji codes, that represents all used variations of the
  * emoji.
- * @param {{ name: string, code: string, types: string[] }} emoji
+ * @param {Object} emojiAsset
+ * @param {String} emojiAsset.name
+ * @param {String} emojiAsset.code
+ * @param {String[]} [emojiAsset.types]
  * @param {Array} users
  * @return {string[]}
  * */
-const getUniqueEmojiCodes = (emoji, users) => {
-    const emojiCodes = [];
-    _.forEach(users, (user) => {
-        const emojiCode = getPreferredEmojiCode(emoji, user.skinTone);
-
-        if (emojiCode && !emojiCodes.includes(emojiCode)) {
-            emojiCodes.push(emojiCode);
-        }
+const getUniqueEmojiCodes = (emojiAsset, users) => {
+    const uniqueEmojiCodes = [];
+    _.each(users, (userSkinTones) => {
+        _.each(lodashGet(userSkinTones, 'skinTones'), (createdAt, skinTone) => {
+            const emojiCode = getPreferredEmojiCode(emojiAsset, skinTone);
+            if (emojiCode && !uniqueEmojiCodes.includes(emojiCode)) {
+                uniqueEmojiCodes.push(emojiCode);
+            }
+        });
     });
-    return emojiCodes;
+    return uniqueEmojiCodes;
 };
 
 export {