[$1000] Chat - Message not updated in Edit message box

[lanitochka17]

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. Login with same account on two platforms
2. Platform A: Send any message -> Open Context menu for that message
3. Platform B : Go to same chat -> Open Context menu for same message-> Edit that message with new Message
4. Platform A : (You will see message is updated behind context menu) -> Click Edit message (It will show old message there)

Expected Result:

Chat Message should be updated with updated message

Actual Result:

Edited message is not reflected in Edit message box

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.55-7

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Image.from.iOS.9.mov

0-02-01-2bf38c3dfc6a17d5611b8bcae06a102a9f50cfc88955581b2562e6393476ab61_4e57f4c03ec7dc7b.1.mp4

Expensify/Expensify Issue URL:

Issue reported by: @DinalJivani

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691363116598759

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0155075a8e482e44b6
• Upwork Job ID: 1693543507732049920
• Last Price Increase: 2023-08-28

[dukenv0307]

Proposal

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

Message not updated in Edit message box

What is the root cause of that problem?

reportAction is a state in PopoverReportActionContextMenu and it's only updated when the first time we open context menu. So when current reportAction is changed, this state isn't updated.

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

Line 313 in c43491a

reportAction={this.state.reportAction}

and then when we click on edit message, compose display the old value when context menu is visible

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

Line 275 in c43491a

const editAction = () => Report.saveReportActionDraft(reportID, reportAction.reportActionID, _.isEmpty(draftMessage) ? getActionText(reportAction) : '');

We have the same issue with copy to clipboard action

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

We should create a method to update reportAction state in PopoverReportActionContextMenu if the active report action is changed.

1. In ReportActionContextMenu, create a new method to update reportAction

function updateActiveReportAction(reportAction) {
    if (!contextMenuRef.current) {
        return;
    }
    return contextMenuRef.current.updateActiveReportAction(reportAction);
}

2. In ReportActionItem, create a new useEffect to update reportAction of context menu if the action is currently active action

useEffect(() => {
    if (ReportActionContextMenu.isActiveReportAction(props.action.reportActionID)) {
        ReportActionContextMenu.updateActiveReportAction(props.action);
    }
}, [props.action])

3. In PopoverReportActionContextMenu, create updateActiveReportAction function to update reportAction state

updateActiveReportAction(reportAction) {
    this.setState({reportAction})
}

And in shouldComponentUpdate add the condition to update when reportAction state is changed

this.state.reportAction !== nextState.reportAction

What alternative solutions did you explore? (Optional)

Some other solution for this issue

1. Instead of passing reportAction to showContextMenu function, we can pass reportActionID to this. And then in BaseReportActionContextMenu we will subscribe reportActions in Onyx to get the reportAction with props.reprotActionID to make reportAction is updated

To avoid unnecessary re-render we can use memo to only compare the reportAction with reportActionID in BaseReportActionContextMenu

2. For each option in ContextMenuActions, in onPress, we can get the updated reportAction by using ReportActionUtils.getReportAction(reportID, reportAction.reportActionID) and use this to do the action.

Result

Screencast.from.15-08-2023.12.40.29.webm

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0155075a8e482e44b6

[melvin-bot]

Current assignee @laurenreidexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @0xmiroslav (External)

[dummy-1111]

Proposal

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

Message is not updated in edit message box when the message is updated while context menu is opened

What is the root cause of that problem?

When we show the context menu, we store the current reportAction.
When we edit the reportAction, we pass the html(message[0].html) of the stored reportAction to Report.saveReportActionDraft. So if the reportAction is updated while context menu is opened, we set the old html as draft.

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

Line 282 in 03cf0b1

const editAction = () => Report.saveReportActionDraft(reportID, reportAction, _.isEmpty(draftMessage) ? getActionText(reportAction) : '');

This is the root cause

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

We can solve this issue by using the latest html content of the reportAction
Replacing the above code line with

        const editAction = () => Report.saveReportActionDraft(reportID, reportAction, _.isEmpty(draftMessage) ? getActionText(ReportActionUtils.getReportAction(reportID, reportAction.reportActionID)) : '');

This works as expected and requires minimal changes

What alternative solutions did you explore? (Optional)