Background
Across the application, around 15 components serve the same or very similar functionality: search users. These components use the same source of truth, OptionListContextProvider, and use getValidOptions to properly filter and sort options with contact.
Problem
Although the functionality of these components is almost the same, their implementation is the same or differs slightly. There is a lot of code duplication, which leads to situations where users experience different behaviours across these functionalities.
Working on these components (for example, with performance optimizations) is also problematic for developers, as there are many places that should be checked and updated. For example, when we implemented new parameters in getValidOptions there is a need to update all of these components
Solution
To improve code quality and developers’ and users' experience, we’ve implemented the useSearchSelector hook, which will be a single place of truth for all components that provide user searching. These components serve:
- options selection
- options sorting
- options filtering
- phone contacts importing
Using that hook will make the user experience more consistent across all components.
Task 5
Refactor listed components to use useSearchSelector hook and remove unused and duplicated code.
Components:
MoneyRequestParticipantsSelectorVacationDelegatePage
Important notes:
- you can use
InviteReportParticipantsPage as an example of the implementation
- you should use
context param: CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_GENERAL
- you need to ensure all functionalities are working correctly. Especially: selection, filtering, ordering, and inviting new users
@mountiny @sosek108
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~021970468599774553248
- Upwork Job ID: 1970468599774553248
- Last Price Increase: 2025-09-23
- Automatic offers:
- linhvovan29546 | Reviewer | 108892968
Issue Owner
Current Issue Owner: @brianlee-expensify
Background
Across the application, around 15 components serve the same or very similar functionality: search users. These components use the same source of truth,
OptionListContextProvider,and usegetValidOptionsto properly filter and sort options with contact.Problem
Although the functionality of these components is almost the same, their implementation is the same or differs slightly. There is a lot of code duplication, which leads to situations where users experience different behaviours across these functionalities.
Working on these components (for example, with performance optimizations) is also problematic for developers, as there are many places that should be checked and updated. For example, when we implemented new parameters in
getValidOptionsthere is a need to update all of these componentsSolution
To improve code quality and developers’ and users' experience, we’ve implemented the
useSearchSelectorhook, which will be a single place of truth for all components that provide user searching. These components serve:Using that hook will make the user experience more consistent across all components.
Task 5
Refactor listed components to use
useSearchSelectorhook and remove unused and duplicated code.Components:
MoneyRequestParticipantsSelectorVacationDelegatePageImportant notes:
InviteReportParticipantsPageas an example of the implementationcontextparam:CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_GENERAL@mountiny @sosek108
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @brianlee-expensify