[HOLD for payment 2025-02-04] [$250] Reports page - Draft report not showing in the draft status filter

[trjExpensify]

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:
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: No
Email or phone of affected tester (no customers): customer
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @trjExpensify
Slack conversation (hyperlinked to channel name): #migrate

Action Performed:

This was a migrated user, so the open draft reports weren't created in NewDot

1. Create an open report in OldDot
2. Go to the Reports page in NewDot
3. Click the Drafts status filter

Expected Result:

The draft report should have appeared.

Actual Result:

The empty state page appears.

From @luacmartins: "Something weird happened, as I can see we sent OFFSET 100 so it seems like App thought the user was on the 3rd page of results for drafts, which is why it didn't return the single report that matched it"

Workaround:

Use OldDot

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021879246404932856846
• Upwork Job ID: 1879246404932856846
• Last Price Increase: 2025-01-14

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[melvin-bot]

Current assignee @trjExpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[luacmartins]

From the logs, we can see that the Search API request was made with offset of 100 which is incorrect:

.... ORDER BY sortedTransactions.sortBy desc LIMIT 51 OFFSET 100

[ishakakkad]

Proposal

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

Reports page - Draft report not showing in the draft status filter

What is the root cause of that problem?

When we use pagination for any of the chat tabs, we set offset of last loaded page. But when we change the tab we are not resetting offset. And we load the data by using previous tab offset.

For ex, previously All Chat tab loaded 100 records using Search API, so our offset is set to 100. Now when we move to Draft Tab offset is still 100 and we call Search API using offset 100 so correct data is not render. This issue is exists in all the tabs.

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

To fix issue issue we need to reset the offset on tab change.

Solution 1 We can pass uniq key here. By passing uniq key we are make sure that whenever we change tab, search component will re-render.

<Search
    queryJSON={queryJSON}
    key={<SOME UNIQ KEY FOR TAB>}
/>

Solution 2 we can use useEffect here to reset the offset when status change.

 useEffect(() => {
        if (type === CONST.SEARCH.DATA_TYPES.CHAT) {
            setOffset(0);
        }
    }, [type, status]);

Here I added condition for CHAT type only, but we can applied for all kind reports.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

UI bug so not sure if we can test it or not. If possible we can test if offset is reset to 0 when chat report tab is changed.

What alternative solutions did you explore? (Optional)

Na

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-16 08:30:32 UTC.

Proposal

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

The empty state page appears.

What is the root cause of that problem?

The offset will increase if we fetch more results.

App/src/components/Search/index.tsx

Line 428 in 7b9e55e

setOffset(offset + CONST.SEARCH.RESULTS_PAGE_SIZE);

When we change from All to Draft, we only change the navigation param then the offset still is the previous offset. As a result, the draft report not showing.

App/src/components/Search/SearchStatusBar.tsx

Lines 180 to 182 in 7b9e55e

	const query = SearchQueryUtils.buildSearchQueryString({...queryJSON, status: item.status});
	Navigation.setParams({q: query});
	});

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

If we reset the offset whenever the status is changed, we still have a problem the Search API is still called two times, one time is the old offset, one time is the reset offset(0). This can cause the problem is the data can be displayed wrong if this tab isn't opened before and this tab has many results.

For example: We're in the All tab and the offset is 50. If the Draft tab can have 51 result, when we change from All to Draft tab the first Search API will be called with offset is 50 and it get the last data first then get 50 first result in the second API.

Screen.Recording.2025-01-16.at.15.28.33.mov

To resolve it, we can store the offset as an object that will store the offset of each tab.

const [offsetObj, setOffsetObj] = useState<Record<string, number>>({});
const offset = offsetObj[hash] ?? 0;

Then when we fetch more results, update the offset of this tab

setOffsetObj((prev) => {
    const newOffsetObj = {...prev};
    newOffsetObj[hash] = (newOffsetObj[hash] ?? 0) + CONST.SEARCH.RESULTS_PAGE_SIZE;
    return newOffsetObj;
});

App/src/components/Search/index.tsx

Line 428 in 5133090

setOffset(offset + CONST.SEARCH.RESULTS_PAGE_SIZE);

Here is the result with this solution, the API only called one time

Screen.Recording.2025-01-16.at.15.29.54.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[hungvu193]

I created 2 open report on OD and there's no expense on draft of ND even when the offset of the params is 0.

Screen.Recording.2025-01-15.at.15.33.49.mov