Room - When creating a room duplicate room displayed on search result

[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!

---

Version Number: 1.4.79-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: N/A
Email or phone of affected tester (no customers): shussain+safari4@applausemail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Create a room
2. Click on search icon
3. Notice duplicate room displayed

Expected Result:

Only one room should be displayed

Actual Result:

When creating a room duplicate room displayed on search result

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6501794_1717519470532.2024-06-04_21-36-01.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@stephanieelliott FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[tienifr]

Proposal

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

When creating a room duplicate room displayed on search result

What is the root cause of that problem?

We're calculating missingReportIds based on prevReports

App/src/components/OptionListContextProvider.tsx

Line 84 in a67be2f

const missingReportIds = Object.keys(reports).filter((key) => prevReports && !(key in prevReports));

There're 2 drawbacks of that approaches:

1. We create the huge prevReports state, instead of that we can use prevOptions.report
2. prevReports is not similar as prevOptions.reports so prevReports may contain the report that already is in prevOptions.reports that cause the duplication

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

To make things simple, we should use prevOptions.reports instead of prevReports

            const prevKeys = prevOptions.reports.map(p=>`report_${p.reportID}`)
            const missingReportIds = Object.keys(reports).filter((key) => prevKeys && !prevKeys.includes(key));

What alternative solutions did you explore? (Optional)

NA

Result

web-resize.mp4

[dragnoir]

Sound like this will be fixed here #43094 by a dev from Callstack

[dragnoir]

Proposal

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

Distance - "Center" button has no hover and press effect

What is the root cause of that problem?

inside OptionsListContextProvider When we have a new report inside reports then the whole code will re-render. In the 1st useEffect, there will be a newReports added to options

App/src/components/OptionListContextProvider.tsx

Line 67 in 47d5f5f

const newReports = OptionsListUtils.createOptionList(personalDetails, reports).reports;

Then on the next useEffect, missingReportIds will be the ID of the same report added previously on the 1st useEffect and will be added again.

App/src/components/OptionListContextProvider.tsx

Line 84 in 47d5f5f

const missingReportIds = Object.keys(reports).filter((key) => prevReports && !(key in prevReports));

We are comparing prevReports with reports and this leads to adding the same report.

The issue happens not only with a new room, but with any new report, a new DM to a new user will be double on the search list.

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

We can update the logic inside the second useEffect to ensure it only processes reports that have not already been added in the first useEffect. You can achieve this by checking if a report ID is already present in the options.reports array before adding it again.

App/src/components/OptionListContextProvider.tsx

Line 84 in 47d5f5f

const missingReportIds = Object.keys(reports).filter((key) => prevReports && !(key in prevReports));

let  missingReportIds  =  Object.keys(reports).filter((key) =>  prevReports  &&  !(key  in  prevReports));

// Filter out any IDs that are already in the options
missingReportIds  =  missingReportIds.filter((missingReportId) =>  !isReportInOptions(missingReportId));

Where isReportInOptions will check if the missingReportIds is already in the updated option

What alternative solutions did you explore?

We can use other logics to prevent adding a new report to options on the second useEffect that have been already added. The idea is to check if the option has already the updated/added report

[Beamanator]

I'll close this in favor of #43094 & we have an accepted proposal there