[HOLD for payment 2023-07-14] [$1000] Original message is displayed for few seconds after adding emoji reaction on edited message

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app and login with user A
2. Open the app in another device and login with user B
3. From user B, send message to user A
4. From user A, open user B report, hover on latest sent message and click on Add reaction
5. From user B, edit the message
6. Observe in user A, the user B message is displayed edited, from the current open emoji picker for reaction, click on any emoji to add reaction
7. Observe that after adding the reaction, app displays older (message before edit) for few seconds

Expected Result:

App should not display older message i.e. message before edit on adding reaction to edited message

Actual Result:

App displays older message i.e. message before edit on adding reaction to edited message

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.33-3
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

older.edit.message.is.displayed.on.reaction.2.mp4

Recording.946.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687870862782029

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015a60dfce3c07cce2
• Upwork Job ID: 1674267414000873472
• Last Price Increase: 2023-06-29

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[jeet-dhandha]

Proposal

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

• Problem is user is seeing old message for few seconds when someone edits the message, before the user add's emoji to the message.

What is the root cause of that problem?

• The reportAction given to Report.toggleEmojiReaction function is not updated with the latest message.

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

• We can access the latest message using reportID and reportActionID and pass it to a function ReportActionsUtils.getReportAction(reportID, reportActionID) (which i had to create) and now use this reportAction for further code.

Code for `toggleEmojiReaction`

function toggleEmojiReaction(reportID, reportAction, emoji, paramSkinTone = preferredSkinTone) {
    const latestReportAction = ReportActionsUtils.getReportAction(reportID, reportAction);
    const message = latestReportAction.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(reportID, latestReportAction, emoji, skinTone);
        }
    }
    return addEmojiReaction(reportID, latestReportAction, emoji, skinTone);
}

What alternative solutions did you explore? (Optional)

• N/A

[dummy-1111]

Proposal

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

What is the root cause of that problem?

When user opens the emoji picker from the reaction bar, openEmojiPicker is called

App/src/components/Reactions/MiniQuickEmojiReactions.js

Lines 59 to 71 in d1a743c

	const openEmojiPicker = () => {
	props.onPressOpenPicker();
	EmojiPickerAction.showEmojiPicker(
	props.onEmojiPickerClosed,
	(emojiCode, emojiObject) => {
	props.onEmojiSelected(emojiObject);
	},
	ref.current,
	undefined,
	() => {},
	props.reportAction,
	);
	};

The value of props.onEmojiSelected is defined when openEmojiPicker is called. So reportAction value of the onEmojiSelected function when emoji is selected would have the value of when user opens the emoji picker.

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

Lines 60 to 63 in 53e4154

	const onEmojiSelected = (emoji) => {
	Report.toggleEmojiReaction(reportID, reportAction, emoji);
	closeContextMenu();
	};

This is the root cause

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

We can get latest reportAction in toggleEmojiReaction function

App/src/libs/actions/Report.js

Line 1641 in 53e4154

function toggleEmojiReaction(reportID, reportAction, emoji, paramSkinTone = preferredSkinTone) {

    const action = _.get(allReportActions, [reportID, reportAction.reportActionID], reportAction);

The final function would look like

function toggleEmojiReaction(reportID, reportAction, emoji, paramSkinTone = preferredSkinTone) {
    const action = _.get(allReportActions, [reportID, reportAction.reportActionID], reportAction);
    const message = action.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(reportID, action, emoji, skinTone);
        }
    }
    return addEmojiReaction(reportID, action, emoji, skinTone);
}

This works as expected.

Result

21826_mac_chrome.mp4

What alternative solutions did you explore? (Optional)

[jeet-dhandha]

Comment : #21826 (comment)

Check below video for fix if necessary.

Fixed Video

EditText-PickerFixVideo.mp4

[jliexpensify]

Did some Android issues for Sophie, so doing an issue swap as I'm a bit swamped today and working 50%.

[sophiepintoraetz]

Able to reproduce!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015a60dfce3c07cce2