Fixed : User Search Bar

src/components/Facility/FacilityUsers.tsx

@@ -11,27 +11,17 @@ import useFilters from "@/hooks/useFilters";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
 
 export default function FacilityUsers(props: { facilityId: number }) {
   const { t } = useTranslation();
-  const { qParams, updateQuery, Pagination } = useFilters({
+  const { Pagination } = useFilters({
     limit: 18,
     cacheBlacklist: ["username"],
   });
+  const [searchTerm, setSearchTerm] = useState("");
   const [activeTab, setActiveTab] = useState(0);
   const { facilityId } = props;
 
-  const { data: facilityData } = useTanStackQueryInstead(
-    routes.getAnyFacility,
-    {
-      pathParams: {
-        id: facilityId,
-      },
-      prefetch: facilityId !== undefined,
-    },
-  );
-
   const { data: userListData, isLoading: userListLoading } = useQuery({
     queryKey: ["facilityUsers", facilityId],
     queryFn: query(routes.facility.getUsers, {
@@ -43,16 +33,23 @@ export default function FacilityUsers(props: { facilityId: number }) {
   if (userListLoading) {
     return <div>Loading...</div>;
   }
-  if (!userListData) {
-    return <div>No users found</div>;
+  if (!userListData?.results?.length) {
+    return <div>{t("no_users_found")}</div>;
   }
 
+  const filteredUsers = searchTerm
+    ? userListData.results.filter((user) => {
+        const searchString = searchTerm.toLowerCase();
+        return (
+          user.username?.toLowerCase().includes(searchString) ||
+          user.first_name?.toLowerCase().includes(searchString) ||
+          user.last_name?.toLowerCase().includes(searchString)
+        );
+      })
+    : userListData.results;
+
   return (
-    <Page
-      title={`${t("users")} - ${facilityData?.name}`}
-      hideBack={true}
-      breadcrumbs={false}
-    >
+    <Page title={`${t("users")}`} hideBack={true} breadcrumbs={false}>
       <CountBlock
         text={t("total_users")}
         count={userListData.count}
@@ -62,9 +59,9 @@ export default function FacilityUsers(props: { facilityId: number }) {
       />
 
       <UserListView
-        users={userListData?.results ?? []}
-        onSearch={(username) => updateQuery({ username })}
-        searchValue={qParams.username}
+        users={filteredUsers}
+        onSearch={(value) => setSearchTerm(value)}
+        searchValue={searchTerm}
         activeTab={activeTab}
         onTabChange={setActiveTab}
       />

src/components/Users/UserListAndCard.tsx

@@ -345,7 +345,7 @@ export default function UserListView({
       ) : (
         <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
           <div className="flex w-full items-center justify-center text-xl font-bold text-secondary-500">
-            No Users Found
+            {t("no_users_found")}
           </div>
         </div>
       )}