Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Display total no. of entities with heading in Organization #10092

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions public/locale/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -984,6 +984,8 @@
"entered-in-error": "Entered in error",
"entered_in_error": "Entered in Error",
"entered_in_error_warning": "This action cannot be undone. The appointment will be marked as entered in error and removed from the system.",
"entity_count_one": "{{count}} {{entity}}",
"entity_count_other": "{{count}} {{entity}}s",
"error_404": "Error 404",
"error_deleting_shifting": "Error while deleting Shifting record",
"error_fetching_facility_data": "Error while fetching facility data",
Expand Down Expand Up @@ -1017,6 +1019,8 @@
"facility": "Facility",
"facility_added_successfully": "Facility created successfully",
"facility_consent_requests_page_title": "Patient Consent List",
"facility_count_one": "{{count}} Facility",
"facility_count_other": "{{count}} Facilities ",
"facility_district_name": "Facility/District Name",
"facility_district_pincode": "Facility/District/Pincode",
"facility_for_care_support": "Facility for Care Support",
Expand Down Expand Up @@ -2170,8 +2174,6 @@
"use_phone_number_for_emergency": "Use this phone number for emergency contact",
"user_add_error": "Error while adding User",
"user_added_successfully": "User added successfully",
"user_count_one": "{{count}} user",
"user_count_other": "{{count}} users",
"user_delete_error": "Error while deleting User",
"user_deleted_successfully": "User Deleted Successfully",
"user_deleted_successfuly": "User Deleted Successfully",
Expand Down
5 changes: 4 additions & 1 deletion src/components/Facility/FacilityUsers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,10 @@
className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
variant="outline"
>
{t("user_count", { count: userListData?.count ?? 0 })}
{t("entity_count", {

Check failure on line 76 in src/components/Facility/FacilityUsers.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (1)

Argument of type '["entity_count", { count: string | number; entity: string; }]' is not assignable to parameter of type '[key: string | string[], options: TOptionsBase & $Dictionary & { defaultValue: string; }] | [key: string | string[], defaultValue: string, options?: (TOptionsBase & $Dictionary) | undefined] | [key: ...]'.
count: userListData?.count || "...",
entity: "User",
})}
Comment on lines +76 to +79
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix translation type error and improve loading state.

  1. Add defaultValue to translation function to fix type error
  2. Use skeleton loading for count instead of "..." for consistency

Apply this fix:

-          {t("entity_count", {
-            count: userListData?.count || "...",
-            entity: "User",
-          })}
+          {t("entity_count", {
+            count: userListData?.count || 0,
+            entity: "User",
+            defaultValue: "{{count}} {{entity}}"
+          })}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{t("entity_count", {
count: userListData?.count || "...",
entity: "User",
})}
{t("entity_count", {
count: userListData?.count || 0,
entity: "User",
defaultValue: "{{count}} {{entity}}"
})}
🧰 Tools
🪛 GitHub Check: cypress-run (1)

[failure] 76-76:
Argument of type '["entity_count", { count: string | number; entity: string; }]' is not assignable to parameter of type '[key: string | string[], options: TOptionsBase & $Dictionary & { defaultValue: string; }] | [key: string | string[], defaultValue: string, options?: (TOptionsBase & $Dictionary) | undefined] | [key: ...]'.

🪛 GitHub Actions: Cypress Tests

[error] 76-76: Type error: Argument of type '['entity_count', { count: string | number; entity: string; }]' is not assignable to parameter of type '[key: string | string[], options: TOptionsBase & $Dictionary & { defaultValue: string; }] | [key: string | string[], defaultValue: string, options?: (TOptionsBase & $Dictionary) | undefined] | [key: ...]'

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai, how to show ... when count is not present

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AdityaJ2305 You can show "..." when count is not present by using conditional rendering. Here's how:

{t("entity_count", {
  count: userListData?.count ?? "...",
  entity: "User",
  defaultValue: "{{count}} {{entity}}"
})}

The ?? (nullish coalescing) operator will only use "..." when count is null or undefined, which is exactly what we want for the loading state. This is different from || which would also convert falsy values like 0 to "...".


✏️ Learnings added
Learnt from: AdityaJ2305
PR: ohcnetwork/care_fe#10092
File: src/components/Facility/FacilityUsers.tsx:76-79
Timestamp: 2025-01-22T12:17:11.991Z
Learning: In React components that display counts, use the nullish coalescing operator (??) with "..." as the fallback to show loading states, instead of defaulting to 0 with the OR operator (||). This provides better user feedback during loading.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

</Badge>
}
>
Expand Down
13 changes: 12 additions & 1 deletion src/pages/Organization/OrganizationFacilities.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

import CareIcon from "@/CAREUI/icons/CareIcon";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
Expand Down Expand Up @@ -58,7 +59,17 @@
<OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
<div className="space-y-6">
<div className="flex justify-between items-center">
<h2 className="text-lg font-semibold">{t("facilities")}</h2>
<div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
<h2 className="text-lg font-semibold">{t("facilities")}</h2>
<Badge
className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
variant="outline"
>
{t("facility_count", {

Check failure on line 68 in src/pages/Organization/OrganizationFacilities.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (1)

Argument of type '["facility_count", { count: string | number; }]' is not assignable to parameter of type '[key: string | string[], options: TOptionsBase & $Dictionary & { defaultValue: string; }] | [key: string | string[], defaultValue: string, options?: (TOptionsBase & $Dictionary) | undefined] | [key: ...]'.
count: facilities?.count || "...",
})}
</Badge>
AdityaJ2305 marked this conversation as resolved.
Show resolved Hide resolved
</div>
<AddFacilitySheet organizationId={id} />
</div>

Expand Down
14 changes: 13 additions & 1 deletion src/pages/Organization/OrganizationPatients.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import RecordMeta from "@/CAREUI/display/RecordMeta";
import CareIcon from "@/CAREUI/icons/CareIcon";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

Expand Down Expand Up @@ -97,7 +98,18 @@
>
<div className="space-y-6">
<div className="flex justify-between items-center">
<h2 className="text-lg font-semibold">{t("patients")}</h2>
<div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
<h2 className="text-lg font-semibold">{t("patients")}</h2>
<Badge
className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
variant="outline"
>
{t("entity_count", {

Check failure on line 107 in src/pages/Organization/OrganizationPatients.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (1)

Argument of type '["entity_count", { count: string | number; entity: string; }]' is not assignable to parameter of type '[key: string | string[], options: TOptionsBase & $Dictionary & { defaultValue: string; }] | [key: string | string[], defaultValue: string, options?: (TOptionsBase & $Dictionary) | undefined] | [key: ...]'.
count: patients?.count || "...",
entity: "Patient",
})}
</Badge>
</div>
</div>

<SearchByMultipleFields
Expand Down
14 changes: 13 additions & 1 deletion src/pages/Organization/OrganizationUsers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

import CareIcon from "@/CAREUI/icons/CareIcon";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
Expand Down Expand Up @@ -57,7 +58,18 @@
<OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
<div className="space-y-6">
<div className="flex justify-between items-center">
<h2 className="text-lg font-semibold">{t("users")}</h2>
<div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
<h2 className="text-lg font-semibold">{t("users")}</h2>
<Badge
className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
variant="outline"
>
{t("entity_count", {

Check failure on line 67 in src/pages/Organization/OrganizationUsers.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (1)

Argument of type '["entity_count", { count: string | number; entity: string; }]' is not assignable to parameter of type '[key: string | string[], options: TOptionsBase & $Dictionary & { defaultValue: string; }] | [key: string | string[], defaultValue: string, options?: (TOptionsBase & $Dictionary) | undefined] | [key: ...]'.
count: users?.count || "...",
entity: "User",
})}
</Badge>
</div>
<div className="flex gap-2">
<AddUserSheet
open={openAddUserSheet}
Expand Down
13 changes: 12 additions & 1 deletion src/pages/Organization/OrganizationView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,18 @@
<OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
<div className="space-y-6">
<div className="flex flex-col justify-between items-start gap-4">
<h2 className="text-lg font-semibold">{t("organizations")}</h2>
<div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
<h2 className="text-lg font-semibold">{t("organizations")}</h2>
<Badge
className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3"
variant="outline"
>
{t("entity_count", {

Check failure on line 61 in src/pages/Organization/OrganizationView.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (1)

Argument of type '["entity_count", { count: string | number; entity: string; }]' is not assignable to parameter of type '[key: string | string[], options: TOptionsBase & $Dictionary & { defaultValue: string; }] | [key: string | string[], defaultValue: string, options?: (TOptionsBase & $Dictionary) | undefined] | [key: ...]'.
count: children?.count || "...",
entity: "Organization",
})}
</Badge>
</div>
<div className="w-72">
<Input
placeholder="Search by name..."
Expand Down
Loading