Merge pull request #23671 from Expensify/stites-fixReactionMargin

Only render ReportActionItemReactions if there are reactions
Expensify · Jul 28, 2023 · ba08d3d · ba08d3d
2 parents 92117c5 + d614c0d
commit ba08d3d
Showing 1 changed file with 74 additions and 58 deletions.
diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -67,72 +67,88 @@ function ReportActionItemEmojiReactions(props) {
         return (oldestUserReactionTimestamp || emojiReaction.createdAt) + emojiName;
     });
 
-    return (
-        <View
-            ref={popoverReactionListAnchor}
-            style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}
-        >
-            {_.map(sortedReactions, (reaction) => {
-                const reactionEmojiName = reaction.emojiName;
-                const usersWithReactions = _.pick(reaction.users, _.identity);
-                let reactionCount = 0;
+    const formattedReactions = _.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);
+        // 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(emojiAsset);
-                };
+        const onPress = () => {
+            props.toggleReaction(emojiAsset);
+        };
 
-                const onReactionListOpen = (event) => {
-                    reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction);
-                };
+        const onReactionListOpen = (event) => {
+            reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction);
+        };
 
-                return (
-                    <Tooltip
-                        renderTooltipContent={() => (
-                            <ReactionTooltipContent
-                                emojiName={EmojiUtils.getLocalizedEmojiName(reactionEmojiName, props.preferredLocale)}
-                                emojiCodes={emojiCodes}
-                                accountIDs={reactionUserAccountIDs}
-                                currentUserPersonalDetails={props.currentUserPersonalDetails}
-                            />
-                        )}
-                        renderTooltipContentKey={[..._.map(reactionUsers, (user) => user.toString()), ...emojiCodes]}
-                        key={reactionEmojiName}
-                    >
-                        <View>
-                            <EmojiReactionBubble
-                                ref={props.forwardedRef}
-                                count={reactionCount}
-                                emojiCodes={emojiCodes}
-                                onPress={onPress}
-                                reactionUsers={reactionUsers}
-                                hasUserReacted={hasUserReacted}
-                                onReactionListOpen={onReactionListOpen}
-                            />
-                        </View>
-                    </Tooltip>
-                );
-            })}
-            {totalReactionCount > 0 && (
+        return {
+            reactionEmojiName,
+            emojiCodes,
+            reactionUserAccountIDs,
+            onPress,
+            reactionUsers,
+            reactionCount,
+            hasUserReacted,
+            onReactionListOpen,
+        };
+    });
+
+    return (
+        totalReactionCount > 0 && (
+            <View
+                ref={popoverReactionListAnchor}
+                style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}
+            >
+                {_.map(formattedReactions, (reaction) => {
+                    if (reaction === null) {
+                        return;
+                    }
+                    return (
+                        <Tooltip
+                            renderTooltipContent={() => (
+                                <ReactionTooltipContent
+                                    emojiName={EmojiUtils.getLocalizedEmojiName(reaction.reactionEmojiName, props.preferredLocale)}
+                                    emojiCodes={reaction.emojiCodes}
+                                    accountIDs={reaction.reactionUserAccountIDs}
+                                    currentUserPersonalDetails={props.currentUserPersonalDetails}
+                                />
+                            )}
+                            renderTooltipContentKey={[..._.map(reaction.reactionUsers, (user) => user.toString()), ...reaction.emojiCodes]}
+                            key={reaction.reactionEmojiName}
+                        >
+                            <View>
+                                <EmojiReactionBubble
+                                    ref={props.forwardedRef}
+                                    count={reaction.reactionCount}
+                                    emojiCodes={reaction.emojiCodes}
+                                    onPress={reaction.onPress}
+                                    reactionUsers={reaction.reactionUsers}
+                                    hasUserReacted={reaction.hasUserReacted}
+                                    onReactionListOpen={reaction.onReactionListOpen}
+                                />
+                            </View>
+                        </Tooltip>
+                    );
+                })}
                 <AddReactionBubble
                     onSelectEmoji={props.toggleReaction}
                     reportAction={{reportActionID: props.reportActionID}}
                 />
-            )}
-        </View>
+            </View>
+        )
     );
 }