Add count to resource and encounter page #10700
Conversation
WalkthroughThis pull request updates two UI components—ResourceList and EncounterList—to enhance user feedback regarding data loading. Both components now pass a new Changes
Sequence Diagram(s)sequenceDiagram
participant List as List Component (Resource/Encounter)
participant Page as Page Component
participant Badge as Badge Component
List->>Page: Render component with title and componentRight (Badge)
Page->>Badge: Provide isLoading state and count data
alt Data is loading
Badge-->>Page: Display "loading" message
else Data loaded
Badge-->>Page: Display count (with translation in EncounterList)
end
Page-->>List: Render updated UI with Badge
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 (4)
src/components/Resource/ResourceList.tsx (1)
109-119: Consider adding ARIA attributes for better accessibility.While the Badge implementation is solid, consider adding ARIA attributes to improve accessibility for screen readers.
Apply this diff to enhance accessibility:
<Badge className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3 w-max" variant="outline" + role="status" + aria-live="polite" > {isLoading ? t("loading") : t("entity_count", { count: queryResources?.count ?? 0, entity: "Resource", })} </Badge>src/pages/Encounters/EncounterList.tsx (3)
213-213: Consider adding type-safety for translation keys.While the translation implementation is correct, consider using TypeScript to enforce type-safety for translation keys to prevent potential runtime errors from typos or missing translations.
// Create a type for your translation keys type TranslationKey = | 'loading' | 'entity_count' | 'encounters' // ... other keys // Use it with your translation function const { t } = useTranslation<TranslationKey>();Also applies to: 224-228
685-691: Add error state handling.While loading and empty states are well-handled, consider adding error state handling for failed API requests.
- {isLoading ? ( + {error ? ( + <div className="col-span-full"> + <ErrorState + message={t('error_loading_encounters')} + retry={() => refetch()} + /> + </div> + ) : isLoading ? ( <CardGridSkeleton count={6} /> ) : encounters.length === 0 ? ( <div className="col-span-full"> <EmptyState /> </div> ) : (
117-764: Consider breaking down the component for better maintainability.The component is handling multiple responsibilities (filtering, search, display). Consider splitting it into smaller, focused components:
EncounterFiltersEncounterSearchBarEncounterCardEncounterListThis would improve maintainability and make the code more testable.
Example structure:
// EncounterFilters.tsx const EncounterFilters = ({ status, encounterClass, priority, onFilterChange }: EncounterFiltersProps) => { // Filter implementation }; // EncounterSearchBar.tsx const EncounterSearchBar = ({ onSearch }: EncounterSearchBarProps) => { // Search implementation }; // EncounterCard.tsx const EncounterCard = ({ encounter }: EncounterCardProps) => { // Card implementation }; // EncounterList.tsx const EncounterList = () => { return ( <Page> <EncounterFilters /> <EncounterSearchBar /> <div className="grid"> {encounters.map(encounter => ( <EncounterCard key={encounter.id} encounter={encounter} /> ))} </div> </Page> ); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Resource/ResourceList.tsx(1 hunks)src/pages/Encounters/EncounterList.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/components/Resource/ResourceList.tsx (2)
106-121: LGTM! Clean implementation of the count display.The componentRight prop usage provides a good solution for displaying the count, maintaining a clean component composition pattern.
86-101: LGTM! Excellent integration with existing data flow.The count display is well integrated with the existing query system, reusing the data and loading states without introducing additional complexity.
Also applies to: 113-119
src/pages/Encounters/EncounterList.tsx (1)
216-230: LGTM! Well-implemented count badge.The count badge implementation is clean and follows best practices:
- Handles loading states appropriately
- Uses internationalization for text
- Maintains consistent styling with the design system
|
@Mahendar0701 Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit