Fixes: Reset Input box on changing Organization #10797
Conversation
WalkthroughThe pull request introduces a new Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
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. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/Organization/OrganizationView.tsx (1)
39-49: Consider optimizing state updates to minimize API calls.While the implementation works correctly, the combination of debounced queries and multiple state updates could lead to unnecessary API calls. Consider using a single state object to batch these updates.
Here's a suggested optimization:
- const [page, setPage] = useState(1); - const [searchQuery, setSearchQuery] = useState(""); + const [searchState, setSearchState] = useState({ page: 1, query: "" }); useEffect(() => { - setSearchQuery(""); - setPage(1); + setSearchState({ page: 1, query: "" }); }, [id]); const { data: children, isFetching } = useQuery({ - queryKey: ["organization", id, "children", page, limit, searchQuery], + queryKey: ["organization", id, "children", searchState.page, limit, searchState.query], queryFn: query.debounced(organizationApi.list, { queryParams: { parent: id, - offset: (page - 1) * limit, + offset: (searchState.page - 1) * limit, limit, - name: searchQuery || undefined, + name: searchState.query || undefined, }, }), });Update the Input and Pagination components accordingly:
<Input placeholder="Search by name..." - value={searchQuery} + value={searchState.query} onChange={(e) => { - setSearchQuery(e.target.value); - setPage(1); // Reset to first page on search + setSearchState({ query: e.target.value, page: 1 }); }} className="w-full" /> <Pagination data={{ totalCount: children.count }} - onChange={(page, _) => setPage(page)} + onChange={(page, _) => setSearchState(prev => ({ ...prev, page }))} defaultPerPage={limit} - cPage={page} + cPage={searchState.page} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Organization/OrganizationView.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: bandit
- GitHub Check: Test
- GitHub Check: OSSAR-Scan
- GitHub Check: cypress-run (1)
🔇 Additional comments (2)
src/pages/Organization/OrganizationView.tsx (2)
3-3: LGTM!The
useEffectimport is correctly added to the existing React imports.
34-37: LGTM! Well-implemented solution.The
useEffecthook effectively addresses the issue by:
- Clearing the search query when organization changes
- Resetting pagination to ensure a clean state
|
do clean the PR title btw; do refer existing PRs |
|
@rithviknishad OrganizationUsers , OrganizationPatient, EncounterList are missing i18n translations, shall i add them as well in this same PR? Waiting for your response before commiting changes in the PR. |
| const handleSearch = useCallback( | ||
| (key: string, value: string) => { | ||
| const searchParams = { | ||
| name: key === "name" ? value : "", | ||
| }; | ||
| updateQuery(searchParams); | ||
| }, | ||
| [updateQuery], | ||
| ); |
There was a problem hiding this comment.
why do we need this complications when we only have 1 search attribute?
| const handleFieldChange = useCallback(() => { | ||
| updateQuery({ | ||
| name: undefined, | ||
| }); | ||
| }, [updateQuery]); |
There was a problem hiding this comment.
checkout removeFilters from useFilters. also do we need this in the first place 🤔 since we can't change the search attribute since there's only one
|
do follow the merge checklist btw |
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
|
@Sulochan-khadka Any updates? |
ETA : EOD |
|
@Sulochan-khadka clsoing the PR as the ETD has been passed |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Bug Fixes
New Features
useFiltershook for better state management of search and pagination.