Add Search Feature in Devices with name and location wise | Add Clear button in Location Search #10831
Conversation
WalkthroughThe changes update two components. In the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LocationSearch
participant Parent
User->>LocationSearch: Clicks clear button
LocationSearch->>LocationSearch: Stops event propagation
LocationSearch->>Parent: Calls onSelect(null)
Parent->>Parent: Updates selectedLocation to null
Parent->>API: Re-fetch devices with updated query parameters
sequenceDiagram
participant User
participant DevicesList
participant API
User->>DevicesList: Enters search text / selects location
DevicesList->>DevicesList: Updates qParams and selectedLocation state
DevicesList->>API: Fetches devices with new query parameters
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (6)
🔇 Additional comments (6)
✨ Finishing Touches
🪧 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 Needed backend support care#2872 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/Facility/settings/devices/DevicesList.tsx (1)
62-87: Implementation of the search and location filter UI is well executed.
The combination ofInputfor the device name search andLocationSearchfor location filtering is straightforward, and resetting the page on search input change is a good user experience.Consider adding a label or
aria-labelfor the input to enhance accessibility for screen readers.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Facility/settings/devices/DevicesList.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: Test
- GitHub Check: cypress-run (1)
🔇 Additional comments (7)
src/pages/Facility/settings/devices/DevicesList.tsx (7)
10-10: No issues with the new import of the Input component.
The usage is straightforward and aligns well with the UI library structure.
15-15: ImportingLocationSearchappears valid and consistent.
No concerns regarding the dependency or import path.
20-20: The import ofLocationListis correctly placed.
Ensuring strong typing for location data is a good practice here.
29-32: State variables for search and selected location look appropriate.
Having a nullableLocationListstate helps manage scenarios where no location is selected.
37-44: IncludingsearchQueryandselectedLocationin the queryKey is solid.
This ensures that the query automatically re-fetches and reflects changes in either state.
50-51: Neat parameter handling forregistered_nameandlocation.
Passingundefinedwhen values are empty or null is a valid approach to avoid sending unwanted query parameters.
58-58: Well-structured layout modifications.
The updated classnames effectively maintain a responsive layout for the container.
|
@rithviknishad @Jacobjeevan Backend PR got merged. Now this PR is Ready for review |
|
Conflicts have been detected against the base branch. Please merge the base branch into your branch.
|
…update DevicesList to use useFilters for pagination and search
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/pages/Facility/settings/devices/DevicesList.tsx (2)
29-31: Consider storing just the location ID for improved stability.
Storing the entireLocationListobject in state might lead to unnecessary re-renders or refetches whenever the object reference changes, even if the ID remains the same. Persisting onlyselectedLocation?.idis a simpler alternative unless the full object is needed elsewhere.
39-45: Avoid passing entire objects as query keys to prevent redundant refetches.
Keys likeqParamsandselectedLocationmay trigger additional network requests if their references change frequently. Passing only stable representations (likeqParams.page,qParams.search_text, etc., plusselectedLocation?.id) can help mitigate this.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
public/locale/en.json(1 hunks)src/components/Location/LocationSearch.tsx(4 hunks)src/pages/Facility/settings/devices/DevicesList.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- public/locale/en.json
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Location/LocationSearch.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
🔇 Additional comments (8)
src/pages/Facility/settings/devices/DevicesList.tsx (8)
10-10: All newly imported modules seem appropriate and consistent.
These imports appear to be correctly used later in the file. No concerns.Also applies to: 14-14, 16-16, 21-21
33-36: Kudos on using a caching hook with a blacklist.
UsinguseFiltersand blacklisting query params helps avoid cache key collisions. This is a neat approach to controlling unwanted caching behavior for search parameters.
59-59: Responsive layout changes look good.
This line adds helpful spacing and flex layout classes. No issues found.
63-65: Search input configuration is clean and user-friendly.
You have proper coherence with i18n for the placeholder, andonChangeseamlessly updatesqParams.search_text. Good job integrating with the debounced query.Also applies to: 66-72
74-74: LocationSearch integration is straightforward and consistent.
AllowingnullforonSelecteffectively clears the selected location. This satisfies the requirement for single-input searching while also filtering by location when needed.Also applies to: 75-83
86-92: "Add Device" button is well-placed and intuitive.
Linking to"/devices/create"is consistent if your routes handle facility context at or after creation. No concerns here.
114-114: Pagination usage is correctly integrated.
Connecting the total count todata?.countensures accurate pagination. Implementation looks good.
49-52:❓ Verification inconclusive
Confirm that offset resets to page 1 when new search filters are applied.
IfqParams.pageretains its previous value whensearch_textorcurrent_locationchanges, users might land on an empty page. Verify that the pagination logic resets page to 1 on filter changes.
🏁 Script executed:
#!/bin/bash # Searching for explicit reset of page to 1 upon search_text/current_location changes rg -A 3 'updateQuery\(\{.*page:\s*1'Length of output: 38
Action Required: Confirm Pagination Reset on Filter Changes
The current implementation calculates
offsetbased onqParams.pagewithout any explicit reset when the search filters (search_textorcurrent_location) change. This could lead to scenarios where a user, upon updating the filters, might retain a non-first page value and consequently land on an empty result page.
- Verify: Ensure that when
search_textorcurrent_locationchanges, the pagination is correctly reset by updatingqParams.pageto 1.- Review Location: Please inspect and confirm this logic in
src/pages/Facility/settings/devices/DevicesList.tsx(around lines 49-52) and any related handlers or effects that might update the query parameters.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/Facility/settings/devices/DevicesList.tsx (1)
57-86: Debounce search to reduce rapid re-fetches.
Consider wrappingupdateQuerywith a debounce to avoid initiating frequent queries while typing, improving performance.- onChange={(e) => { - updateQuery({ search_text: e.target.value }); - }} + onChange={debounce((e) => { + updateQuery({ search_text: e.target.value }); + }, 300)}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Facility/settings/devices/DevicesList.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: Test
- GitHub Check: OSSAR-Scan
- GitHub Check: cypress-run (1)
🔇 Additional comments (10)
src/pages/Facility/settings/devices/DevicesList.tsx (10)
10-10: No issues with this import.
This addition is consistent with the existing UI framework usage.
14-14: LocationSearch import is valid.
No concerns here; it matches the usage below for location-based filtering.
16-16: UsinguseFilters.
Adopting a dedicated filtering hook is a good approach for handling pagination and query state.
21-21: Type import forLocationList.
This import is aligned with the state handling inselectedLocation.
29-31: State initialization is clear.
InitializingselectedLocationtonullaccommodates scenarios where no location is selected.
33-36: Proper use ofuseFilters.
Setting a default limit and blacklisting specific params is appropriate for this context.
39-39: Query key update.
Including all relevant parameters (facilityId,qParams,resultsPerPage) ensures consistent re-fetch.
43-46: Offset calculation.
Be mindful of edge cases ifqParams.pageis 0 or negative. Clamping the page to a minimum of 1 can prevent negative offsets.- offset: (qParams.page - 1) * resultsPerPage, + offset: (Math.max(1, qParams.page) - 1) * resultsPerPage,
53-53: Styling adjustment.
The flex layout updates appear intentional and maintain responsiveness.
108-108: Pagination usage is correct.
Passingdata?.count ?? 0to the<Pagination>component aligns with the updated query approach.
|
@rithviknishad @Jacobjeevan Backend PR got merged can review this PR |
There was a problem hiding this comment.
Let's adjust the style. Right now the select looks like it's disabled (adjust the bg, maybe add a border so it looks similar to the search input).
Also adjust the trigger width in location search (you can look into shadcn's documentation and other examples of popover in the codebase on how to do this). Make sure to test the other components where LocationSearch is called.
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Screenshots
Merge Checklist
Summary by CodeRabbit
New Features
UI Improvements