App: [HOLD for payment 2023-08-01] [$1000] Dev: Web - Reaction does not work for first message of thread

Now that we have a specific issue for payment I’m going to close this.

Here’s timeline analysis:

@jeet-dhandha was not assigned on this issue, but they took responsibility of fixing this as this came from their original PR.

• PR was created on Jul 5
• Issue was put on hold for https://github.com/Expensify/App/pull/17996 on Jul 6
• Holding PR was merged on Jul 20
• Our PR was merged the same day on Jul 20

Not overdue on my side

• The PR that introduced the bug has been identified. Link to the PR: https://github.com/Expensify/App/pull/21933
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/21933#issuecomment-1661245753

Regression Test Step: https://github.com/Expensify/App/issues/19363#issuecomment-1621774945

@johncschuster Can we put this issue on hold for a bit? I’m trying to get this pr merged which is going to touch the same code, and I don’t want to accidentally revert any work done here

Proposal

Please re-state the problem that we are trying to solve in this issue.

Reaction does not work for first message of thread

What is the root cause of that problem?

We pass report as child report and action as parentReportAction into ReportActionItem

https://github.com/Expensify/App/blob/15e547e3bceeb7bfe693f78fc8b90fdc28b1b32f/src/pages/home/report/ReportActionItemParentAction.js#L64-L70

When we call toggleEmojiReaction, because reportID is the current report but reportActionID is parent report action, reportAction is empty, and then this function return and do nothing.

https://github.com/Expensify/App/blob/15e547e3bceeb7bfe693f78fc8b90fdc28b1b32f/src/libs/actions/Report.js#L1644-L1648

What changes do you think we should make in order to solve the problem?

We should check if reportAction is empty that mean reportActionID is the ID of parent report action, we will get the parentReport, and get the correct reportAction.

function toggleEmojiReaction(reportID, reportActionID, emoji, paramSkinTone = preferredSkinTone) {
  let currentReportID = reportID;
  let reportAction = ReportActionsUtils.getReportAction(reportID, reportActionID);

  if (_.isEmpty(reportAction)) {
      const parentReport = ReportUtils.getParentReport(ReportUtils.getReport(reportID))
      currentReportID = parentReport.reportID;
      reportAction = ReportActionsUtils.getReportAction(currentReportID, reportActionID);
  }

  if (_.isEmpty(reportAction)) {
      return;
  }

  const message = reportAction.message[0];
  const reactionObject = message.reactions && _.find(message.reactions, (reaction) => reaction.emoji === emoji.name);
  const skinTone = emoji.types === undefined ? null : paramSkinTone; // only use skin tone if emoji supports it
  if (reactionObject) {
      if (hasAccountIDReacted(currentUserAccountID, reactionObject.users, skinTone)) {
          return removeEmojiReaction(currentReportID, reportAction, emoji, skinTone);
      }
  }
  return addEmojiReaction(currentReportID, reportAction, emoji, skinTone);
}

What alternative solutions did you explore? (Optional)

NA

Result

Screencast from 05-07-2023 15:30:37.webm