[$500] Task details are not immediately removed after navigating back to a task using the back button browser #27728

thienlnam · 2023-09-19T01:43:00Z

Found as part of #24137

Go offline
Create a task and open the task detail
Send a message
Right-click on the message and select reply in a thread
Press the browser back button
Cancel the task

Expected:
The task details show show [Canceled Task] without having to refresh the page

Actual:
The task details are shown, and require a refresh before [Cancel Task] is shown

Platform:
Web

OFFLINE

Untitled.mov

ONLINE

Screen.Recording.2023-09-12.at.21.15.30.mov

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01815b4d02dffa34d6
Upwork Job ID: 1703948271970603008
Last Price Increase: 2023-09-26

melvin-bot · 2023-09-19T01:44:21Z

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

melvin-bot · 2023-09-19T01:44:23Z

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 · 2023-09-19T01:45:02Z

Job added to Upwork: https://www.upwork.com/jobs/~01815b4d02dffa34d6

melvin-bot · 2023-09-19T01:45:05Z

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

melvin-bot · 2023-09-19T01:45:10Z

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

imranaalam · 2023-09-19T02:13:44Z

@thienlnam
what to expect?
what happened?

imranaalam · 2023-09-19T02:15:37Z

@thienlnam
which platform?

thienlnam · 2023-09-19T02:18:20Z

Added some more details

dukenv0307 · 2023-09-19T02:39:37Z

@thienlnam
I cannot reproduce it in the latest main.

Screencast.from.19-09-2023.09.38.54.webm

dukenv0307 · 2023-09-19T02:43:02Z

@thienlnam

But I saw we have another bug: the last message in LHN of cancelled task report is different when offline and online. Do you think we should fix it here or it is in progress?

thienlnam · 2023-09-19T03:20:11Z

But I saw we have another bug: the last message in LHN of cancelled task report is different when offline and online. Do you think we should fix it here or it is in progress?

Is it that one shows cancelled and the other shows deleted? We're aligning task system messages in a different issue

dukenv0307 · 2023-09-19T03:26:27Z

Is it that one shows cancelled and the other shows deleted.

Yes.

Nodebrute · 2023-09-19T03:41:33Z

Proposal

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

When we navigate using the browser back button task details are not removed.

What is the root cause of that problem?

In the memo function, we do not trigger a re-render when we cancel a task report. As a result, when we navigate using the browser's back button, the component does not re-render, and we continue to see the old data.

App/src/pages/home/report/ReportActionItem.js

Line 687 in 015cfb2

memo(

An additional approach to verify whether the issue is associated with the memoization HOC is to temporarily remove the memoization HOC and check if the problem persists which, in this case, does not persist.

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

We can add another condition in the Memo function to check if the task report is canceled.

const parentReportActionPrev = ReportActionsUtils.getParentReportAction(prevProps.report);
const parentReportActionNext = ReportActionsUtils.getParentReportAction(nextProps.report);

  ReportUtils.isCanceledTaskReport(prevProps.report, parentReportActionPrev) ===
  ReportUtils.isCanceledTaskReport(nextProps.report, parentReportActionNext)

Sample code to test

 memo(
        ReportActionItem,
        (prevProps, nextProps) =>{
            const parentReportActionPrev = ReportActionsUtils.getParentReportAction(prevProps.report);
            const parentReportActionNext = ReportActionsUtils.getParentReportAction(nextProps.report);
            console.log(parentReportActionNext === parentReportActionPrev)
            return(
                prevProps.displayAsGroup === nextProps.displayAsGroup &&
         ........Omitted code for readability
           ReportUtils.isCanceledTaskReport(prevProps.report, parentReportActionPrev) ===
            ReportUtils.isCanceledTaskReport(nextProps.report, parentReportActionNext)
            )
        }
            
    ),

Works as expected

Screen.Recording.2023-09-19.at.8.43.08.AM.mov

What alternative solutions did you explore? (Optional)

As getParentReportAction is being deprecated. Therefore, we can replace it with withOnyx() to obtain the latest value.

mollfpr · 2023-09-19T14:50:09Z

I am still able to reproduce the issue in the latest main.

Screen.Recording.2023-09-19.at.21.39.22.mov

dylanexpensify · 2023-09-19T15:03:09Z

@mollfpr mind giving a review on above proposal?

mollfpr · 2023-09-19T15:10:07Z

ReportUtils.isCanceledTaskReport(prevProps.report, prevProps.parentReportAction) ===
ReportUtils.isCanceledTaskReport(nextProps.report, nextProps.parentReportAction)

@Nodebrute Why parentReportAction become a prop? Why the issue is reproduced with the browser back button?

Nodebrute · 2023-09-19T15:32:22Z

Hey, yeah, @mollfpr , you are right. It was a mistake. We can do it like this

     const parentReportActionPrev = ReportActionsUtils.getParentReportAction(prevProps.report);
     const parentReportActionNext = ReportActionsUtils.getParentReportAction(nextProps.report);

And then we can use this to trigger re-render.

Nodebrute · 2023-09-19T16:04:29Z

@mollfpr It has also come to my attention that getParentReportAction is being deprecated. Therefore, we can replace it with withOnyx() to obtain the latest value.

App/src/libs/ReportActionsUtils.js

Lines 120 to 127 in 4969433

  * Returns the parentReportAction if the given report is a thread/task. 

  * 

  * @param {Object} report 

  * @param {Object} [allReportActionsParam] 

  * @returns {Object} 

  * @deprecated Use Onyx.connect() or withOnyx() instead 

  */ 

 function getParentReportAction(report, allReportActionsParam = undefined) {

mollfpr · 2023-09-19T16:19:54Z

@Nodebrute I think it might work. Please update your proposal when you are ready.

Nodebrute · 2023-09-19T19:44:12Z

@mollfpr Updated. Please consider reviewing.

mollfpr · 2023-09-21T04:34:20Z

The issue is not reproduced on staging and DEV.

paultsimura · 2023-09-21T08:54:17Z

Just reproduced on 1.3.72-9 (latest main):
https://www.loom.com/share/112ece73eeba4b1f84bc27da43a80ede?sid=87ddc97c-fc10-41c6-b47c-5aa36b6ed204

DylanDylann · 2023-09-21T15:24:54Z

Proposal

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

Task details are not immediately removed after navigating back to a task using the back button browser

What is the root cause of that problem?

When deleting task, isDeletedParentAction of task report will be true. But when isDeletedParentAction changed we don't re-render ReportActionItem

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

App/src/pages/home/report/ReportActionItem.js

Lines 691 to 693 in e52f21a

 memo( 

 ReportActionItem, 

 (prevProps, nextProps) =>

In here we should add

lodashGet(prevProps.report, 'isDeletedParentAction') === lodashGet(nextProps.report, 'isDeletedParentAction') &&

What alternative solutions did you explore? (Optional)

dylanexpensify · 2023-09-25T10:29:08Z

@mollfpr let's confirm reproducibility comment here, and if valid review @DylanDylann's proposal!

mollfpr · 2023-09-25T15:07:10Z

I still couldn't reproduce it on v1.3.74-1 latest main. @DylanDylann Could you confirm if this issue is still reproducible?

DylanDylann · 2023-09-26T07:26:05Z

Couldn't reproduce

melvin-bot · 2023-09-26T16:00:17Z

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

thienlnam · 2023-09-27T06:55:39Z

Thank you all - I'll go ahead and close since we can't seem to reproduce anymore

thienlnam assigned mollfpr Sep 19, 2023

thienlnam added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 19, 2023

melvin-bot bot assigned dylanexpensify Sep 19, 2023

thienlnam added the External Added to denote the issue can be worked on by a contributor label Sep 19, 2023

melvin-bot bot changed the title ~~Task details are not immediately removed after navigating back to a task using the back button browser~~ [$500] Task details are not immediately removed after navigating back to a task using the back button browser Sep 19, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 19, 2023

DylanDylann mentioned this issue Sep 21, 2023

[$500] Web - Cancel task does not show [Deleted task] view #27874

Closed

6 tasks

melvin-bot bot added the Overdue label Sep 25, 2023

melvin-bot bot removed the Overdue label Sep 25, 2023

thienlnam closed this as completed Sep 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$500] Task details are not immediately removed after navigating back to a task using the back button browser #27728

[$500] Task details are not immediately removed after navigating back to a task using the back button browser #27728

thienlnam commented Sep 19, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 19, 2023

melvin-bot bot commented Sep 19, 2023

melvin-bot bot commented Sep 19, 2023

melvin-bot bot commented Sep 19, 2023

melvin-bot bot commented Sep 19, 2023

imranaalam commented Sep 19, 2023

imranaalam commented Sep 19, 2023

thienlnam commented Sep 19, 2023

dukenv0307 commented Sep 19, 2023 •

edited

Loading

dukenv0307 commented Sep 19, 2023

thienlnam commented Sep 19, 2023

dukenv0307 commented Sep 19, 2023

Nodebrute commented Sep 19, 2023 •

edited

Loading

mollfpr commented Sep 19, 2023

dylanexpensify commented Sep 19, 2023

mollfpr commented Sep 19, 2023

Nodebrute commented Sep 19, 2023

Nodebrute commented Sep 19, 2023

mollfpr commented Sep 19, 2023

Nodebrute commented Sep 19, 2023

mollfpr commented Sep 21, 2023

paultsimura commented Sep 21, 2023

DylanDylann commented Sep 21, 2023

dylanexpensify commented Sep 25, 2023

mollfpr commented Sep 25, 2023

DylanDylann commented Sep 26, 2023

melvin-bot bot commented Sep 26, 2023

thienlnam commented Sep 27, 2023

[$500] Task details are not immediately removed after navigating back to a task using the back button browser #27728

[$500] Task details are not immediately removed after navigating back to a task using the back button browser #27728

Comments

thienlnam commented Sep 19, 2023 • edited by melvin-bot bot Loading

melvin-bot bot commented Sep 19, 2023

melvin-bot bot commented Sep 19, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot bot commented Sep 19, 2023

melvin-bot bot commented Sep 19, 2023

melvin-bot bot commented Sep 19, 2023

imranaalam commented Sep 19, 2023

imranaalam commented Sep 19, 2023

thienlnam commented Sep 19, 2023

dukenv0307 commented Sep 19, 2023 • edited Loading

dukenv0307 commented Sep 19, 2023

thienlnam commented Sep 19, 2023

dukenv0307 commented Sep 19, 2023

Nodebrute commented Sep 19, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

mollfpr commented Sep 19, 2023

dylanexpensify commented Sep 19, 2023

mollfpr commented Sep 19, 2023

Nodebrute commented Sep 19, 2023

Nodebrute commented Sep 19, 2023

mollfpr commented Sep 19, 2023

Nodebrute commented Sep 19, 2023

mollfpr commented Sep 21, 2023

paultsimura commented Sep 21, 2023

DylanDylann commented Sep 21, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

dylanexpensify commented Sep 25, 2023

mollfpr commented Sep 25, 2023

DylanDylann commented Sep 26, 2023

melvin-bot bot commented Sep 26, 2023

thienlnam commented Sep 27, 2023

thienlnam commented Sep 19, 2023 •

edited by melvin-bot bot

Loading

dukenv0307 commented Sep 19, 2023 •

edited

Loading

Nodebrute commented Sep 19, 2023 •

edited

Loading