Add phone number search for organization users #10598
Conversation
WalkthroughThe changes update the search functionality within the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant S as SearchByMultipleFields
participant OU as OrganizationUsers
participant API as Server/API
U->>S: Enter search value & select field
S->>OU: Trigger handleSearch with input details
OU->>API: Make API call with updated query parameters
API-->>OU: Return search results
OU-->>S: Update displayed results
U->>S: Change selected field
S->>OU: Trigger handleFieldChange to reset search
OU-->>S: Reset and update fields
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (1)src/pages/Organization/OrganizationUsers.tsx (1)⏰ Context from checks skipped due to timeout of 90000ms (3)
🔇 Additional comments (4)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@rithviknishad @Jacobjeevan Need backend support for phonenumber filtering. Should i raise PR for phone_number filter in backend?? |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/pages/Organization/OrganizationUsers.tsx (2)
38-51: Consider enhancing type safety and internationalization.While the search options configuration is well-structured, consider these improvements:
- Add type definitions for the search options
- Use translation keys for placeholders
+interface SearchOption { + key: "username" | "phone_number"; + type: "text" | "phone"; + placeholder: string; + value: string; +} -const searchOptions = [ +const searchOptions: SearchOption[] = [ { key: "username", type: "text" as const, - placeholder: "Search by username", + placeholder: t("search_by_username"), value: qParams.name || "", }, { key: "phone_number", type: "phone" as const, - placeholder: "Search by phone number", + placeholder: t("search_by_phone_number"), value: qParams.phone_number || "", }, ];
77-89: Consider adding error handling and loading states.The query integration and UI implementation are well-structured, but consider these enhancements:
- Add error handling for API failures
- Show loading states during search operations
const { data: users, isFetching: isFetchingUsers } = useQuery({ queryKey: [ "organizationUsers", id, qParams.name, qParams.phone_number, qParams.page, ], queryFn: query.debounced(organizationApi.listUsers, { pathParams: { id }, queryParams: { username: qParams.name, phone_number: qParams.phone_number, page: qParams.page, limit: resultsPerPage, offset: ((qParams.page ?? 1) - 1) * resultsPerPage, }, }), enabled: !!id, + retry: 3, + onError: (error) => { + // Handle API errors + console.error("Failed to fetch users:", error); + }, }); <SearchByMultipleFields id="user-search" options={searchOptions} initialOptionIndex={Math.max( searchOptions.findIndex((option) => option.value !== ""), 0, )} onSearch={handleSearch} onFieldChange={handleFieldChange} className="w-full" data-cy="search-user" + isLoading={isFetchingUsers} />Also applies to: 135-146
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Organization/OrganizationUsers.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: OSSAR-Scan
- GitHub Check: cypress-run (1)
🔇 Additional comments (1)
src/pages/Organization/OrganizationUsers.tsx (1)
2-2: LGTM! Well-structured setup for the search functionality.The imports and cache configuration are properly set up for the new search functionality.
Also applies to: 11-11, 34-34
Create a backend issue and get it assigned 👍 |
|
@rithviknishad @Jacobjeevan Backend PR ohcnetwork/care#2833 got merged . This PR is ready for review now |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit