[$250] [Search v2.3] Add Onyx optimistic and failure data

[lakchote]

See #48566 (comment)

You should also optimistically display the saved search.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836663116286679327
• Upwork Job ID: 1836663116286679327
• Last Price Increase: 2024-09-19
• Automatic offers:
• nkdengineer | Contributor | 104037632

Issue Owner

Current Issue Owner: @hoangzinh

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

Add Onyx optimistic and failure data

What is the root cause of that problem?

The Save search button is not greyed out when offline, but instead takes you to the You appear to be offline page which is probably fine for now, but blocking the button tap would be the standard thing to do here I think!

The save search button is not disabled when we offline

App/src/pages/Search/AdvancedSearchFilters.tsx

Line 320 in f7a4aa1

<Button

Deleting a saved search has no offline feedback (I'd expect the deleted search to show up greyed out)

App/src/libs/actions/Search.ts

Line 61 in f7a4aa1

function deleteSavedSearch(hash: number) {

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

1. The Save search button is not greyed out when offline, but instead takes you to the You appear to be offline page which is probably fine for now, but blocking the button tap would be the standard thing to do here I think!

We can add disabled={isOffline} for the save search button. Or if we want to create optimistic data and failure data for ONYXKEYS.SAVED_SEARCHES with pendingAction as add here with key is queryJSON.hash, name is queryJSON.saveSearchName and query is queryJSON.inputQuery. Then we can also add an error infailureData to display the error

App/src/pages/Search/AdvancedSearchFilters.tsx

Line 320 in f7a4aa1

<Button

2. When we delete the saved search here, we can add pendingAction in optimistic data of this saved search as delete and reset it in failureData and we can also add an error if the API fails

App/src/libs/actions/Search.ts

Line 61 in f7a4aa1

function deleteSavedSearch(hash: number) {

Then we can add pendingAction field as item.pendingAction here. We can also add error field to display the error and onPendingActionDismiss to clear the error if we want

App/src/pages/Search/SearchTypeMenu.tsx

Line 109 in f7a4aa1

const baseMenuItem: SavedSearchMenuItem = {

What alternative solutions did you explore? (Optional)

NA

[lakchote]

Added @allroundexperts experts as the C+ since he's available now to review, to move this forward.

[allroundexperts]

@nkdengineer's proposal looks good enough to me. I think we want to go with the optimistic data creation in this case. @lakchote can confirm this.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @lakchote is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[lakchote]

Let's go with optimistic data creation, yes.

@nkdengineer's proposal LGTM.

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[nkdengineer]

@allroundexperts The PR is here.