fix: Regression - Emoji reaction not working - Issue 22235 (Original - 21826)

src/libs/actions/Report.js

@@ -1645,15 +1645,16 @@ function removeEmojiReaction(reportID, reportActionID, emoji) {
  * Calls either addEmojiReaction or removeEmojiReaction depending on if the current user has reacted to the report action.
  * Uses the NEW FORMAT for "emojiReactions"
  * @param {String} reportID
- * @param {String} reportActionID
+ * @param {Object} reportAction
  * @param {Object} reactionObject
  * @param {Object} existingReactions
  * @param {Number} [paramSkinTone]
  */
-function toggleEmojiReaction(reportID, reportActionID, reactionObject, existingReactions, paramSkinTone = preferredSkinTone) {
-    const reportAction = ReportActionsUtils.getReportAction(reportID, reportActionID);
+function toggleEmojiReaction(reportID, reportAction, reactionObject, existingReactions, paramSkinTone = preferredSkinTone) {
+    const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction);
+    const originalReportAction = ReportActionsUtils.getReportAction(originalReportID, reportAction.reportActionID);
 
-    if (_.isEmpty(reportAction)) {
+    if (_.isEmpty(originalReportAction)) {
         return;
     }
 

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -59,7 +59,7 @@ export default [
             };
 
             const toggleEmojiAndCloseMenu = (emoji, existingReactions) => {
-                Report.toggleEmojiReaction(reportID, reportAction.reportActionID, emoji, existingReactions);
+                Report.toggleEmojiReaction(reportID, reportAction, emoji, existingReactions);
                 closeContextMenu();
             };
 

src/pages/home/report/ReportActionItem.js

@@ -209,7 +209,7 @@ function ReportActionItem(props) {
 
     const toggleReaction = useCallback(
         (emoji) => {
-            Report.toggleEmojiReaction(props.report.reportID, props.action.reportActionID, emoji, props.emojiReactions);
+            Report.toggleEmojiReaction(props.report.reportID, props.action, emoji, props.emojiReactions);
         },
         [props.report, props.action, props.emojiReactions],
     );

tests/actions/ReportTest.js

@@ -557,7 +557,7 @@ describe('actions/Report', () => {
                 reportActionID = reportAction.reportActionID;
 
                 // Add a reaction to the comment
-                Report.toggleEmojiReaction(REPORT_ID, reportActionID, EMOJI);
+                Report.toggleEmojiReaction(REPORT_ID, reportAction, EMOJI);
                 return waitForPromisesToResolve();
             })
             .then(() => {
@@ -573,7 +573,7 @@ describe('actions/Report', () => {
                 expect(reportActionReactionEmoji.users).toHaveProperty(`${TEST_USER_ACCOUNT_ID}`);
 
                 // Now we remove the reaction
-                Report.toggleEmojiReaction(REPORT_ID, reportActionID, EMOJI, reportActionReaction);
+                Report.toggleEmojiReaction(REPORT_ID, reportAction, EMOJI, reportActionReaction);
                 return waitForPromisesToResolve();
             })
             .then(() => {
@@ -584,11 +584,11 @@ describe('actions/Report', () => {
             })
             .then(() => {
                 // Add the same reaction to the same report action with a different skintone
-                Report.toggleEmojiReaction(REPORT_ID, reportActionID, EMOJI);
+                Report.toggleEmojiReaction(REPORT_ID, reportAction, EMOJI);
                 return waitForPromisesToResolve()
                     .then(() => {
                         const reportActionReaction = reportActionsReactions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`];
-                        Report.toggleEmojiReaction(REPORT_ID, reportActionID, EMOJI, reportActionReaction, EMOJI_SKIN_TONE);
+                        Report.toggleEmojiReaction(REPORT_ID, reportAction, EMOJI, reportActionReaction, EMOJI_SKIN_TONE);
                         return waitForPromisesToResolve();
                     })
                     .then(() => {
@@ -609,7 +609,7 @@ describe('actions/Report', () => {
                         expect(reportActionReactionEmojiUserSkinTones).toHaveProperty('2');
 
                         // Now we remove the reaction, and expect that both variations are removed
-                        Report.toggleEmojiReaction(REPORT_ID, reportActionID, EMOJI, reportActionReaction);
+                        Report.toggleEmojiReaction(REPORT_ID, reportAction, EMOJI, reportActionReaction);
                         return waitForPromisesToResolve();
                     })
                     .then(() => {
@@ -666,15 +666,15 @@ describe('actions/Report', () => {
                 resultAction = _.first(_.values(reportActions));
 
                 // Add a reaction to the comment
-                Report.toggleEmojiReaction(REPORT_ID, resultAction.reportActionID, EMOJI, {});
+                Report.toggleEmojiReaction(REPORT_ID, resultAction, EMOJI, {});
                 return waitForPromisesToResolve();
             })
             .then(() => {
                 // Now we toggle the reaction while the skin tone has changed.
                 // As the emoji doesn't support skin tones, the emoji
                 // should get removed instead of added again.
                 const reportActionReaction = reportActionsReactions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${resultAction.reportActionID}`];
-                Report.toggleEmojiReaction(REPORT_ID, resultAction.reportActionID, EMOJI, reportActionReaction, 2);
+                Report.toggleEmojiReaction(REPORT_ID, resultAction, EMOJI, reportActionReaction, 2);
                 return waitForPromisesToResolve();
             })
             .then(() => {