implemented toggling reactions when selecting the same again

Expensify · Feb 16, 2023 · 71220c0 · 71220c0
1 parent 7907fd2
commit 71220c0
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 62 deletions.
diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js
@@ -34,8 +34,7 @@ const getUniqueEmojiCodes = (emoji, users) => {
 const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     reactions: PropTypes.arrayOf(PropTypes.object).isRequired,
-    removeReaction: PropTypes.func.isRequired,
-    addReaction: PropTypes.func.isRequired,
+    toggleReaction: PropTypes.func.isRequired,
 
     ...withCurrentUserPersonalDetailsPropTypes,
 };
@@ -44,55 +43,36 @@ const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-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 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 onPress = () => {
-                    if (hasUserReacted) {
-                        props.removeReaction(emoji);
-                    } else {
-                        props.addReaction(emoji);
-                    }
-                };
+            const onPress = () => {
+                props.toggleReaction(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}
-                    />
-                );
-            })}
-            {props.reactions.length > 0 && <AddReactionBubble onSelectEmoji={selectEmojiFromPicker} />}
-        </View>
-    );
-};
+                    // TODO: onLongPress={() => ReactionsContextMenu.showContextMenu(reactions)}
+                    senderIDs={senderIDs}
+                />
+            );
+        })}
+        {props.reactions.length > 0 && <AddReactionBubble onSelectEmoji={props.toggleReaction} />}
+    </View>
+);
 
 ReportActionItemReactions.displayName = 'ReportActionItemReactions';
 ReportActionItemReactions.propTypes = propTypes;

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
@@ -1221,8 +1221,8 @@ function addReaction(reportID, originalReportAction, emoji, skinTone) {
         };
     }
 
-    const isReacted = hasAccountIDReacted(currentUserAccountID, reactionObject.users, skinTone);
-    if (isReacted) {
+    const hasCurrentUserReacted = hasAccountIDReacted(currentUserAccountID, reactionObject.users, skinTone);
+    if (hasCurrentUserReacted) {
         return;
     }
 
@@ -1298,6 +1298,18 @@ function removeReaction(reportID, originalReportAction, emoji) {
     // API.write('RemoveReaction', parameters, {optimisticData});
 }
 
+function toggleReaction(reportID, reportAction, emoji, skinTone) {
+    const message = reportAction.message[0];
+    const reactionObject = message.reactions && _.find(message.reactions, reaction => reaction.emoji === emoji.name);
+    if (reactionObject) {
+        const hasCurrentUserReacted = hasAccountIDReacted(currentUserAccountID, reactionObject.users, skinTone);
+        if (hasCurrentUserReacted) {
+            return removeReaction(reportID, reportAction, emoji, skinTone);
+        }
+    }
+    return addReaction(reportID, reportAction, emoji, skinTone);
+}
+
 export {
     addComment,
     addAttachment,
@@ -1331,4 +1343,5 @@ export {
     showReportActionNotification,
     addReaction,
     removeReaction,
+    toggleReaction,
 };
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -43,8 +43,8 @@ export default [
             <QuickEmojiReactions
                 key="QuickEmojiReactions"
                 onEmojiSelected={(emoji) => {
-                    console.log('emoji selected', emoji);
-                    Report.addReaction(reportID, reportAction, emoji);
+                    // TODO: we need to add the preferred skin tone here as well somehow
+                    Report.toggleReaction(reportID, reportAction, emoji);
                 }}
             />
         ),

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -81,8 +81,7 @@ class ReportActionItem extends Component {
         this.checkIfContextMenuActive = this.checkIfContextMenuActive.bind(this);
         this.showPopover = this.showPopover.bind(this);
         this.renderItemContent = this.renderItemContent.bind(this);
-        this.addReaction = this.addReaction.bind(this);
-        this.removeReaction = this.removeReaction.bind(this);
+        this.toggleReaction = this.toggleReaction.bind(this);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -142,12 +141,9 @@ class ReportActionItem extends Component {
         );
     }
 
-    addReaction(emoji) {
-        Report.addReaction(this.props.report.reportID, this.props.action, emoji);
-    }
-
-    removeReaction(emoji) {
-        Report.removeReaction(this.props.report.reportID, this.props.action, emoji);
+    toggleReaction(emoji) {
+        // TODO: we need to add the skin tone here somehow
+        Report.toggleReaction(this.props.report.reportID, this.props.action, emoji);
     }
 
     /**
@@ -215,8 +211,7 @@ class ReportActionItem extends Component {
                 {hasReactions && (
                     <ReportActionItemReactions
                         reactions={reactions}
-                        addReaction={this.addReaction}
-                        removeReaction={this.removeReaction}
+                        toggleReaction={this.toggleReaction}
                     />
                 )}
             </>