Skip to content

Commit ba08d3d

Browse files
pecanoropecanoro
authored
Merge pull request #23671 from Expensify/stites-fixReactionMargin
Only render ReportActionItemReactions if there are reactions
2 parents 92117c5 + d614c0d commit ba08d3d

File tree

1 file changed

+74
-58
lines changed

1 file changed

+74
-58
lines changed

‎src/components/Reactions/ReportActionItemEmojiReactions.js

Lines changed: 74 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -67,72 +67,88 @@ function ReportActionItemEmojiReactions(props) {
6767
return (oldestUserReactionTimestamp || emojiReaction.createdAt) + emojiName;
6868
});
6969

70-
return (
71-
<View
72-
ref={popoverReactionListAnchor}
73-
style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}
74-
>
75-
{_.map(sortedReactions, (reaction) => {
76-
const reactionEmojiName = reaction.emojiName;
77-
const usersWithReactions = _.pick(reaction.users, _.identity);
78-
let reactionCount = 0;
70+
const formattedReactions = _.map(sortedReactions, (reaction) => {
71+
const reactionEmojiName = reaction.emojiName;
72+
const usersWithReactions = _.pick(reaction.users, _.identity);
73+
let reactionCount = 0;
7974

80-
// Loop through the users who have reacted and see how many skintones they reacted with so that we get the total count
81-
_.forEach(usersWithReactions, (user) => {
82-
reactionCount += _.size(user.skinTones);
83-
});
84-
if (!reactionCount) {
85-
return null;
86-
}
87-
totalReactionCount += reactionCount;
88-
const emojiAsset = EmojiUtils.findEmojiByName(reactionEmojiName);
89-
const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emojiAsset, reaction.users);
90-
const hasUserReacted = Report.hasAccountIDEmojiReacted(props.currentUserPersonalDetails.accountID, reaction.users);
91-
const reactionUsers = _.keys(usersWithReactions);
92-
const reactionUserAccountIDs = _.map(reactionUsers, Number);
75+
// Loop through the users who have reacted and see how many skintones they reacted with so that we get the total count
76+
_.forEach(usersWithReactions, (user) => {
77+
reactionCount += _.size(user.skinTones);
78+
});
79+
if (!reactionCount) {
80+
return null;
81+
}
82+
totalReactionCount += reactionCount;
83+
const emojiAsset = EmojiUtils.findEmojiByName(reactionEmojiName);
84+
const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emojiAsset, reaction.users);
85+
const hasUserReacted = Report.hasAccountIDEmojiReacted(props.currentUserPersonalDetails.accountID, reaction.users);
86+
const reactionUsers = _.keys(usersWithReactions);
87+
const reactionUserAccountIDs = _.map(reactionUsers, Number);
9388

94-
const onPress = () => {
95-
props.toggleReaction(emojiAsset);
96-
};
89+
const onPress = () => {
90+
props.toggleReaction(emojiAsset);
91+
};
9792

98-
const onReactionListOpen = (event) => {
99-
reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction);
100-
};
93+
const onReactionListOpen = (event) => {
94+
reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction);
95+
};
10196

102-
return (
103-
<Tooltip
104-
renderTooltipContent={() => (
105-
<ReactionTooltipContent
106-
emojiName={EmojiUtils.getLocalizedEmojiName(reactionEmojiName, props.preferredLocale)}
107-
emojiCodes={emojiCodes}
108-
accountIDs={reactionUserAccountIDs}
109-
currentUserPersonalDetails={props.currentUserPersonalDetails}
110-
/>
111-
)}
112-
renderTooltipContentKey={[..._.map(reactionUsers, (user) => user.toString()), ...emojiCodes]}
113-
key={reactionEmojiName}
114-
>
115-
<View>
116-
<EmojiReactionBubble
117-
ref={props.forwardedRef}
118-
count={reactionCount}
119-
emojiCodes={emojiCodes}
120-
onPress={onPress}
121-
reactionUsers={reactionUsers}
122-
hasUserReacted={hasUserReacted}
123-
onReactionListOpen={onReactionListOpen}
124-
/>
125-
</View>
126-
</Tooltip>
127-
);
128-
})}
129-
{totalReactionCount > 0 && (
97+
return {
98+
reactionEmojiName,
99+
emojiCodes,
100+
reactionUserAccountIDs,
101+
onPress,
102+
reactionUsers,
103+
reactionCount,
104+
hasUserReacted,
105+
onReactionListOpen,
106+
};
107+
});
108+
109+
return (
110+
totalReactionCount > 0 && (
111+
<View
112+
ref={popoverReactionListAnchor}
113+
style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}
114+
>
115+
{_.map(formattedReactions, (reaction) => {
116+
if (reaction === null) {
117+
return;
118+
}
119+
return (
120+
<Tooltip
121+
renderTooltipContent={() => (
122+
<ReactionTooltipContent
123+
emojiName={EmojiUtils.getLocalizedEmojiName(reaction.reactionEmojiName, props.preferredLocale)}
124+
emojiCodes={reaction.emojiCodes}
125+
accountIDs={reaction.reactionUserAccountIDs}
126+
currentUserPersonalDetails={props.currentUserPersonalDetails}
127+
/>
128+
)}
129+
renderTooltipContentKey={[..._.map(reaction.reactionUsers, (user) => user.toString()), ...reaction.emojiCodes]}
130+
key={reaction.reactionEmojiName}
131+
>
132+
<View>
133+
<EmojiReactionBubble
134+
ref={props.forwardedRef}
135+
count={reaction.reactionCount}
136+
emojiCodes={reaction.emojiCodes}
137+
onPress={reaction.onPress}
138+
reactionUsers={reaction.reactionUsers}
139+
hasUserReacted={reaction.hasUserReacted}
140+
onReactionListOpen={reaction.onReactionListOpen}
141+
/>
142+
</View>
143+
</Tooltip>
144+
);
145+
})}
130146
<AddReactionBubble
131147
onSelectEmoji={props.toggleReaction}
132148
reportAction={{reportActionID: props.reportActionID}}
133149
/>
134-
)}
135-
</View>
150+
</View>
151+
)
136152
);
137153
}
138154

0 commit comments

Comments
 (0)