From c175797ca866550669d6ad75b8e06e7a8b41db74 Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 15:20:44 +0530 Subject: [PATCH 01/12] updated the user management design --- src/components/Facility/FacilityUsers.tsx | 115 +++++++++++++--------- src/components/Users/UserListAndCard.tsx | 55 +---------- 2 files changed, 73 insertions(+), 97 deletions(-) diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 4d4caed7e6e..8d41b5f31d7 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -2,54 +2,51 @@ import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; import { useTranslation } from "react-i18next"; -import CountBlock from "@/CAREUI/display/Count"; +import CareIcon from "@/CAREUI/icons/CareIcon"; +import { Badge } from "@/components/ui/badge"; import { Card, CardContent } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; import { Skeleton } from "@/components/ui/skeleton"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import Page from "@/components/Common/Page"; import UserListView from "@/components/Users/UserListAndCard"; import useFilters from "@/hooks/useFilters"; +import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants"; + import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; export default function FacilityUsers(props: { facilityId: string }) { const { t } = useTranslation(); const { qParams, updateQuery, Pagination } = useFilters({ - limit: 18, + limit: RESULTS_PER_PAGE_LIMIT, cacheBlacklist: ["username"], }); - const [activeTab, setActiveTab] = useState(0); + const [activeTab, setActiveTab] = useState<"card" | "list">("card"); const { facilityId } = props; + let usersList: JSX.Element = <>; + const { data: userListData, isLoading: userListLoading } = useQuery({ - queryKey: ["facilityUsers", facilityId], - queryFn: query(routes.facility.getUsers, { - pathParams: { facility_id: facilityId }, + queryKey: ["facilityUsers", facilityId, qParams], + queryFn: query.debounced(routes.facility.getUsers, { + pathParams: { facility_id: facilityId.toString() }, + queryParams: { + username: qParams.username, + limit: qParams.limit, + offset: (qParams.page - 1) * qParams.limit, + }, }), enabled: !!facilityId, }); - if (userListLoading) { - return ( -
- -
- -
- - -
-
-
- -
- - -
-
+ if (userListLoading || !userListData) { + usersList = ( +
{Array.from({ length: 6 }).map((_, i) => ( @@ -76,30 +73,58 @@ export default function FacilityUsers(props: { facilityId: string }) {
); - } - if (!userListData) { - return
{t("no_users_found")}
; + } else { + usersList = ( +
+ + +
+ ); } return ( - - - - updateQuery({ username })} - searchValue={qParams.username} - activeTab={activeTab} - onTabChange={setActiveTab} - /> - - + + + {`${userListData ? userListData.count : ""} Users`} + +
+
+ updateQuery({ username: e.target.value })} + value={qParams.username} + placeholder={t("search_by_username")} + className="w-full max-w-sm" + /> + setActiveTab(value as "card" | "list")} + className="ml-auto" + > + + +
+ + Card +
+ + +
+ + List +
+ + + +
+
{usersList}
 ); } diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index b1123f55d08..e74476a6cd6 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -7,8 +7,6 @@ import CareIcon from "@/CAREUI/icons/CareIcon"; import { Badge } from "@/components/ui/badge"; import { Avatar } from "@/components/Common/Avatar"; -import Tabs from "@/components/Common/Tabs"; -import SearchInput from "@/components/Form/SearchInput"; import useAuthUser from "@/hooks/useAuthUser"; import useSlug from "@/hooks/useSlug"; @@ -238,64 +236,17 @@ export const UserList = ({ users }: { users?: UserBase[] }) => { }; interface UserListViewProps { users: UserBase[]; - onSearch: (username: string) => void; - searchValue: string; - activeTab: number; - onTabChange: (tab: number) => void; + activeTab: string; } -export default function UserListView({ - users, - onSearch, - searchValue, - activeTab, - onTabChange, -}: UserListViewProps) { +export default function UserListView({ users, activeTab }: UserListViewProps) { const { t } = useTranslation(); return ( <> -
-
- onSearch(e.value)} - value={searchValue} - placeholder={t("search_by_username")} - /> -
- - - {t("card")} -
- ), - value: 0, - id: "user-card-view", - }, - { - text: ( -
- - {t("list")} -
- ), - value: 1, - id: "user-list-view", - }, - ]} - currentTab={activeTab} - onTabChange={(tab) => onTabChange(tab as number)} - className="float-right" - /> -
{users.length > 0 ? ( <> - {activeTab === 0 ? ( + {activeTab === "card" ? ( ) : ( From 16145f23c477a895f2e31c32c3296f1e6357d7da Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 18:01:57 +0530 Subject: [PATCH 02/12] fix the small screen crash --- public/locale/en.json | 1 + src/components/Facility/FacilityUsers.tsx | 8 ++++---- src/components/Users/UserListAndCard.tsx | 13 ++++++++++--- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/public/locale/en.json b/public/locale/en.json index b0c3404f084..6db1bb5f53c 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -2118,6 +2118,7 @@ "username_userdetails_not_found": "Unable to fetch details as username or user details not found", "username_valid": "Username is valid", "users": "Users", + "users_management": "Users Management", "vacant": "Vacant", "vaccinated": "Vaccinated", "vaccine_name": "Vaccine name", diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 8d41b5f31d7..a1a241d3e49 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -86,9 +86,9 @@ export default function FacilityUsers(props: { facilityId: string }) { } return ( - + {`${userListData ? userListData.count : ""} Users`} @@ -112,13 +112,13 @@ export default function FacilityUsers(props: { facilityId: string }) {
- Card + {t("card")}
- List + {t("list")}
diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index e74476a6cd6..e3b35794709 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -100,7 +100,6 @@ export const UserStatusIndicator = ({ ); }; const UserCard = ({ user }: { user: UserBase }) => { - const userOnline = isUserOnline(user); const { width } = useWindowDimensions(); const mediumScreenBreakpoint = 640; const isMediumScreen = width <= mediumScreenBreakpoint; @@ -124,7 +123,7 @@ const UserCard = ({ user }: { user: UserBase }) => { name={formatName(user)} className="h-16 w-16 self-center text-2xl sm:self-auto" /> - {isMediumScreen && getNameAndStatusCard(user, userOnline)} + {isMediumScreen && getNameAndStatusCard(user, false)}
{!isMediumScreen && @@ -133,7 +132,15 @@ const UserCard = ({ user }: { user: UserBase }) => {
{t("role")}
- {user.user_type} + {user.user_type ? user.user_type : "-"} +
+
+
+
{t("contact_number")}
+
+ {user.phone_number + ? formatPhoneNumber(user.phone_number) + : "-"}
From ada30bbec67fc02cf62b81ba7534e1c2a6f49e66 Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 18:14:11 +0530 Subject: [PATCH 03/12] minor changes --- src/components/Facility/FacilityUsers.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index a1a241d3e49..c143a11cd72 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -34,7 +34,7 @@ export default function FacilityUsers(props: { facilityId: string }) { const { data: userListData, isLoading: userListLoading } = useQuery({ queryKey: ["facilityUsers", facilityId, qParams], queryFn: query.debounced(routes.facility.getUsers, { - pathParams: { facility_id: facilityId.toString() }, + pathParams: { facility_id: facilityId }, queryParams: { username: qParams.username, limit: qParams.limit, @@ -91,7 +91,7 @@ export default function FacilityUsers(props: { facilityId: string }) { className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3" variant="outline" > - {`${userListData ? userListData.count : ""} Users`} + {`${userListData ? userListData.count : ""} ${t("users")}`}
From 26ee9769caa8776de8d3278f812bfb87696a508b Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 18:19:43 +0530 Subject: [PATCH 04/12] coderabbit suggestion --- src/components/Users/UserListAndCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index e3b35794709..48e80e8aa80 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -132,7 +132,7 @@ const UserCard = ({ user }: { user: UserBase }) => {
{t("role")}
- {user.user_type ? user.user_type : "-"} + {user.user_type ?? "-"}
@@ -243,7 +243,7 @@ export const UserList = ({ users }: { users?: UserBase[] }) => { }; interface UserListViewProps { users: UserBase[]; - activeTab: string; + activeTab: "card" | "list"; } export default function UserListView({ users, activeTab }: UserListViewProps) { From 57db8e669eb73c17ee15a1d7c8de7443b9d3db46 Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 20:32:10 +0530 Subject: [PATCH 05/12] added skeleton view specific --- src/components/Facility/FacilityUsers.tsx | 125 +++++++++++++++++----- src/components/Users/UserListAndCard.tsx | 108 +++++++------------ 2 files changed, 135 insertions(+), 98 deletions(-) diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index c143a11cd72..90018e24e48 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -30,7 +30,102 @@ export default function FacilityUsers(props: { facilityId: string }) { const { facilityId } = props; let usersList: JSX.Element = <>; + const UserListSkeleton = () => ( +
+ + {/* Header Skeleton */} + + + + + + + + + + {/* Body Skeleton */} + + {Array.from({ length: 7 }).map((_, i) => ( + + + + + + + + ))} + +
+ + + + + + + + + +
+
+ +
+ + +
+
+ 		+ + + + + + + +
+
+ ); + + const UserCardSkeleton = () => ( +
+
+ {Array.from({ length: 6 }).map((_, i) => ( + + +
+
+ +
+
+ +
+ + +
+
+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+
+ + + ))} +
+
+ ); const { data: userListData, isLoading: userListLoading } = useQuery({ queryKey: ["facilityUsers", facilityId, qParams], queryFn: query.debounced(routes.facility.getUsers, { @@ -45,34 +140,8 @@ export default function FacilityUsers(props: { facilityId: string }) { }); if (userListLoading || !userListData) { - usersList = ( -
-
- {Array.from({ length: 6 }).map((_, i) => ( - - -
- -
-
-
- - -
- -
-
- - -
-
-
- - - ))} -
-
- ); + usersList = + activeTab === "card" ? : ; } else { usersList = (
diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index 48e80e8aa80..19fdc11189e 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -1,16 +1,15 @@ import { navigate } from "raviger"; import { useTranslation } from "react-i18next"; -import Card from "@/CAREUI/display/Card"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { Badge } from "@/components/ui/badge"; +import { Card, CardContent } from "@/components/ui/card"; import { Avatar } from "@/components/Common/Avatar"; import useAuthUser from "@/hooks/useAuthUser"; import useSlug from "@/hooks/useSlug"; -import useWindowDimensions from "@/hooks/useWindowDimensions"; import { formatName, @@ -23,12 +22,13 @@ import { UserBase } from "@/types/user/user"; const GetDetailsButton = (username: string) => { const { t } = useTranslation(); const facilityId = useSlug("facility"); + return (
); }; -const getNameAndStatusCard = (user: UserBase, showDetailsButton = false) => { - return ( -
-
-
-
-

- {formatName(user)} -

- -
- - {user.username} - -
-
{showDetailsButton && GetDetailsButton(user.username)}
-
-
- ); -}; export const UserStatusIndicator = ({ user, @@ -100,62 +77,53 @@ export const UserStatusIndicator = ({ ); }; const UserCard = ({ user }: { user: UserBase }) => { - const { width } = useWindowDimensions(); - const mediumScreenBreakpoint = 640; - const isMediumScreen = width <= mediumScreenBreakpoint; - const isLessThanXLargeScreen = width <= 1280; const { t } = useTranslation(); return ( - -
-
-
-
- - {isMediumScreen && getNameAndStatusCard(user, false)} -
-
- {!isMediumScreen && - getNameAndStatusCard(user, !isLessThanXLargeScreen)} -
-
-
{t("role")}
-
- {user.user_type ?? "-"} -
-
-
-
{t("contact_number")}
-
- {user.phone_number - ? formatPhoneNumber(user.phone_number) - : "-"} -
+ + +
+
+ +
+
+

+ {user.first_name} {user.last_name} +

+
+ + {user.username} + +
+ +
+
+
{t("role")}
+
{user.user_type}
+
+
+
{t("phone_number")}
+
{user.phone_number}
+
+
+
{GetDetailsButton(user.username)}
- {isLessThanXLargeScreen && ( -
{GetDetailsButton(user.username)}
- )} -
+ ); }; export const UserGrid = ({ users }: { users?: UserBase[] }) => ( -
+
{users?.map((user) => )}
); From 4bf5ff4e501426d9b865799abf176a73aab1c26f Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 20:39:30 +0530 Subject: [PATCH 06/12] descriptive name --- src/components/Facility/FacilityUsers.tsx | 4 ++-- src/components/Users/UserListAndCard.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 90018e24e48..a6c5da222c7 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -11,7 +11,7 @@ import { Skeleton } from "@/components/ui/skeleton"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import Page from "@/components/Common/Page"; -import UserListView from "@/components/Users/UserListAndCard"; +import UserListAndCardView from "@/components/Users/UserListAndCard"; import useFilters from "@/hooks/useFilters"; @@ -145,7 +145,7 @@ export default function FacilityUsers(props: { facilityId: string }) { } else { usersList = (
- diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index 19fdc11189e..b1c272ba498 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -209,12 +209,15 @@ export const UserList = ({ users }: { users?: UserBase[] }) => {
); }; -interface UserListViewProps { +interface UserListAndCardViewProps { users: UserBase[]; activeTab: "card" | "list"; } -export default function UserListView({ users, activeTab }: UserListViewProps) { +export default function UserListAndCardView({ + users, + activeTab, +}: UserListAndCardViewProps) { const { t } = useTranslation(); return ( From e3a0c5d5b4003ffa49a81d0630af4b247bf617ae Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 20:45:43 +0530 Subject: [PATCH 07/12] nitpick sugg --- src/components/Facility/FacilityUsers.tsx | 2 +- src/components/Users/UserListAndCard.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index a6c5da222c7..11ce48aa826 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -55,7 +55,7 @@ export default function FacilityUsers(props: { facilityId: string }) { {/* Body Skeleton */} - {Array.from({ length: 7 }).map((_, i) => ( + {Array.from({ length: 6 }).map((_, i) => (
diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index b1c272ba498..21c343fc376 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -112,7 +112,9 @@ const UserCard = ({ user }: { user: UserBase }) => {
{user.user_type}
-
{t("phone_number")}
+
+ {formatPhoneNumber(user.phone_number)} +
{user.phone_number}
From 8744d7c2f41dda1bed5d6a8f34d7748ef806aab3 Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 23:41:55 +0530 Subject: [PATCH 08/12] coderabbit suggestion --- public/locale/en.json | 2 ++ src/components/Facility/FacilityUsers.tsx | 2 +- src/components/Users/UserListAndCard.tsx | 8 +++++--- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/public/locale/en.json b/public/locale/en.json index e6e866f1b76..b4a17ee4b1b 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -2097,6 +2097,8 @@ "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", diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 11ce48aa826..611aeb70265 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -160,7 +160,7 @@ export default function FacilityUsers(props: { facilityId: string }) { className="bg-purple-50 text-purple-700 ml-2 text-sm font-medium rounded-xl px-3 m-3" variant="outline" > - {`${userListData ? userListData.count : ""} ${t("users")}`} + {t("user_count", { count: userListData?.count ?? 0 })}
diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index 21c343fc376..c20be98783b 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -109,13 +109,15 @@ const UserCard = ({ user }: { user: UserBase }) => {
{t("role")}
-
{user.user_type}
+
+ {user.user_type ?? "-"} +
+
{t("phone_number")}
- {formatPhoneNumber(user.phone_number)} + {user.phone_number ?? "-"}
-
{user.phone_number}
{GetDetailsButton(user.username)}
From 77324c599c1c3d84fe742f159c5ab83f1d245ed0 Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Tue, 14 Jan 2025 23:50:20 +0530 Subject: [PATCH 09/12] coderabbit suggestion --- src/components/Users/UserListAndCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx index c20be98783b..a55eefd35ba 100644 --- a/src/components/Users/UserListAndCard.tsx +++ b/src/components/Users/UserListAndCard.tsx @@ -116,7 +116,7 @@ const UserCard = ({ user }: { user: UserBase }) => {
{t("phone_number")}
- {user.phone_number ?? "-"} + {formatPhoneNumber(user.phone_number) ?? "-"}
From a8dfcca892afbfc4afee79e8cef642fe84577143 Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Wed, 15 Jan 2025 10:26:47 +0530 Subject: [PATCH 10/12] minor changes sugg by jeevan --- src/components/Facility/FacilityUsers.tsx | 19 ++++++++++++------- src/components/Users/UserListAndCard.tsx | 2 +- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 611aeb70265..3113f3ac06d 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -30,6 +30,7 @@ export default function FacilityUsers(props: { facilityId: string }) { const { facilityId } = props; let usersList: JSX.Element = <>; + const UserListSkeleton = () => (
@@ -155,13 +156,17 @@ export default function FacilityUsers(props: { facilityId: string }) { } return ( - - - {t("user_count", { count: userListData?.count ?? 0 })} - + + {t("user_count", { count: userListData?.count ?? 0 })} + + } + >
{ ); }; export const UserGrid = ({ users }: { users?: UserBase[] }) => ( -
+
{users?.map((user) => )}
); From 090bd1cb7193445d35b52517d1eba271d25c3802 Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Thu, 16 Jan 2025 09:29:15 +0530 Subject: [PATCH 11/12] inline fix --- src/components/Facility/FacilityUsers.tsx | 193 +++++++++++----------- 1 file changed, 97 insertions(+), 96 deletions(-) diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 3113f3ac06d..087b9659289 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -20,6 +20,103 @@ import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants"; import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; +const UserCardSkeleton = () => ( +
+
+ {Array.from({ length: 6 }).map((_, i) => ( + + +
+
+ +
+
+ +
+ + +
+
+
+
+ +
+
+ + +
+
+ + +
+
+ +
+ +
+
+ + + ))} +
+
+); + +const UserListSkeleton = () => ( +
+
+ {/* Header Skeleton */} + + + + + + + + + + {/* Body Skeleton */} + + {Array.from({ length: 7 }).map((_, i) => ( + + + + + + + + ))} + +
+ + + + + + + + + +
+
+ +
+ + +
+
+ 		+ + + + + + + +
+
+); + export default function FacilityUsers(props: { facilityId: string }) { const { t } = useTranslation(); const { qParams, updateQuery, Pagination } = useFilters({ @@ -31,102 +128,6 @@ export default function FacilityUsers(props: { facilityId: string }) { let usersList: JSX.Element = <>; - const UserListSkeleton = () => ( -
- - {/* Header Skeleton */} - - - - - - - - - - {/* Body Skeleton */} - - {Array.from({ length: 6 }).map((_, i) => ( - - - - - - - - ))} - -
- - - - - - - - - -
-
- -
- - -
-
- 		- - - - - - - -
-
- ); - - const UserCardSkeleton = () => ( -
-
- {Array.from({ length: 6 }).map((_, i) => ( - - -
-
- -
-
- -
- - -
-
-
-
- -
-
- - -
-
- - -
-
- -
- -
-
- - - ))} -
-
- ); const { data: userListData, isLoading: userListLoading } = useQuery({ queryKey: ["facilityUsers", facilityId, qParams], queryFn: query.debounced(routes.facility.getUsers, { From c79b9153387eb7baa36376cec1dcc361b6dbc78f Mon Sep 17 00:00:00 2001 From: AdityaJ2305 Date: Thu, 16 Jan 2025 10:28:38 +0530 Subject: [PATCH 12/12] changed to 15 limit --- src/components/Facility/FacilityUsers.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 087b9659289..696e1d06b9b 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/src/components/Facility/FacilityUsers.tsx @@ -15,8 +15,6 @@ import UserListAndCardView from "@/components/Users/UserListAndCard"; import useFilters from "@/hooks/useFilters"; -import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants"; - import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; @@ -120,7 +118,7 @@ const UserListSkeleton = () => ( export default function FacilityUsers(props: { facilityId: string }) { const { t } = useTranslation(); const { qParams, updateQuery, Pagination } = useFilters({ - limit: RESULTS_PER_PAGE_LIMIT, + limit: 15, cacheBlacklist: ["username"], }); const [activeTab, setActiveTab] = useState<"card" | "list">("card");