show AddReactionBubble in the row of reactions as well

Expensify · Feb 16, 2023 · 7907fd2 · 7907fd2
1 parent 7281f82
commit 7907fd2
Showing 1 changed file with 46 additions and 30 deletions.
diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js
@@ -9,6 +9,7 @@ import withCurrentUserPersonalDetails, {
     withCurrentUserPersonalDetailsPropTypes,
 } from '../withCurrentUserPersonalDetails';
 import emojis from '../../../assets/emojis';
+import AddReactionBubble from './AddReactionBubble';
 
 /**
  * Given an emoji object and a list of senders it will return an
@@ -43,40 +44,55 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-const ReportActionItemReactions = props => (
-    <View style={[styles.flexRow, styles.flexWrap]}>
-        {_.map(props.reactions, (reaction) => {
-            const reactionCount = reaction.users.length;
-            const hasUserReacted = _.find(reaction.users, reactor => `${reactor.accountID}` === `${props.currentUserPersonalDetails.accountID}`) != null;
-            const senderIDs = _.map(reaction.users, sender => sender.accountID);
-            const emoji = _.find(emojis, e => e.name === reaction.emoji);
-            const emojiCodes = getUniqueEmojiCodes(emoji, reaction.users);
+const ReportActionItemReactions = (props) => {
+    /**
+     * @param {{ name: string, code: string }} emoji
+     */
+    const selectEmojiFromPicker = (emoji) => {
+        // Check if the emoji already exists in the reactions
+        const reaction = _.find(props.reactions, r => r.emoji === emoji.name);
+        if (reaction) {
+            props.removeReaction(emoji);
+        } else {
+            props.addReaction(emoji);
+        }
+    };
+
+    return (
+        <View style={[styles.flexRow, styles.flexWrap]}>
+            {_.map(props.reactions, (reaction) => {
+                const reactionCount = reaction.users.length;
+                const hasUserReacted = _.find(reaction.users, reactor => `${reactor.accountID}` === `${props.currentUserPersonalDetails.accountID}`) != null;
+                const senderIDs = _.map(reaction.users, sender => sender.accountID);
+                const emoji = _.find(emojis, e => e.name === reaction.emoji);
+                const emojiCodes = getUniqueEmojiCodes(emoji, reaction.users);
 
-            const onPress = () => {
-                if (hasUserReacted) {
-                    props.removeReaction(emoji);
-                } else {
-                    props.addReaction(emoji);
-                }
-            };
+                const onPress = () => {
+                    if (hasUserReacted) {
+                        props.removeReaction(emoji);
+                    } else {
+                        props.addReaction(emoji);
+                    }
+                };
 
-            return (
-                <EmojiReactionBubble
-                    key={reaction.emoji}
-                    count={reactionCount}
-                    emojiName={reaction.emoji}
-                    emojiCodes={emojiCodes}
-                    hasUserReacted={hasUserReacted}
-                    onPress={onPress}
+                return (
+                    <EmojiReactionBubble
+                        key={reaction.emoji}
+                        count={reactionCount}
+                        emojiName={reaction.emoji}
+                        emojiCodes={emojiCodes}
+                        hasUserReacted={hasUserReacted}
+                        onPress={onPress}
 
                         // TODO: onLongPress={() => ReactionsContextMenu.showContextMenu(reactions)}
-                    senderIDs={senderIDs}
-                />
-            );
-        })}
-        {/* TODO: {props.reactions && props.reactions.length > 0 && <AddReactionBubble onSelectEmoji={this.addReaction} />} */}
-    </View>
-);
+                        senderIDs={senderIDs}
+                    />
+                );
+            })}
+            {props.reactions.length > 0 && <AddReactionBubble onSelectEmoji={selectEmojiFromPicker} />}
+        </View>
+    );
+};
 
 ReportActionItemReactions.displayName = 'ReportActionItemReactions';
 ReportActionItemReactions.propTypes = propTypes;