Fixes: Reset Input box on changing Organization

src/pages/Organization/OrganizationView.tsx

@@ -1,18 +1,19 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
-import { useState } from "react";
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 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";
 
-import Pagination from "@/components/Common/Pagination";
+import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
+import useFilters from "@/hooks/useFilters";
+
 import query from "@/Utils/request/query";
 import { Organization, getOrgLabel } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
@@ -28,20 +29,54 @@ interface Props {
 export default function OrganizationView({ id, navOrganizationId }: Props) {
   const { t } = useTranslation();
 
-  const [page, setPage] = useState(1);
-  const [searchQuery, setSearchQuery] = useState("");
-  const limit = 12; // 3x4 grid
+  const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
+    limit: 12, // 3x4 grid
+    cacheBlacklist: ["name"],
+  });
+
+  const searchOptions = [
+    {
+      key: "name",
+      type: "text" as const,
+      placeholder: "Search by name",
+      value: qParams.name || "",
+    },
+  ];
+
+  const handleSearch = useCallback(
+    (key: string, value: string) => {
+      const searchParams = {
+        name: key === "name" ? value : "",
+      };
+      updateQuery(searchParams);
+    },
+    [updateQuery],
+  );
+
+  const handleFieldChange = useCallback(() => {
+    updateQuery({
+      name: undefined,
+    });
+  }, [updateQuery]);
 
   const { data: children, isFetching } = useQuery({
-    queryKey: ["organization", id, "children", page, limit, searchQuery],
+    queryKey: [
+      "organization",
+      id,
+      "children",
+      qParams.page,
+      resultsPerPage,
+      qParams.name,
+    ],
     queryFn: query.debounced(organizationApi.list, {
       queryParams: {
         parent: id,
-        offset: (page - 1) * limit,
-        limit,
-        name: searchQuery || undefined,
+        offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
+        limit: resultsPerPage,
+        name: qParams.name || undefined,
       },
     }),
+    enabled: !!id,
   });
 
   // Hack for the sidebar to work
@@ -62,13 +97,13 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
             />
           </div>
           <div className="w-72">
-            <Input
-              placeholder="Search by name..."
-              value={searchQuery}
-              onChange={(e) => {
-                setSearchQuery(e.target.value);
-                setPage(1); // Reset to first page on search
-              }}
+            <SearchByMultipleFields
+              id="organization-search"
+              key={id}
+              options={searchOptions}
+              initialOptionIndex={0}
+              onSearch={handleSearch}
+              onFieldChange={handleFieldChange}
               className="w-full"
             />
           </div>
@@ -127,21 +162,16 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
               ) : (
                 <Card className="col-span-full">
                   <CardContent className="p-6 text-center text-gray-500">
-                    {searchQuery
+                    {qParams.name
                       ? t("no_organizations_found")
                       : t("no_sub_organizations_found")}
                   </CardContent>
                 </Card>
               )}
             </div>
-            {children && children.count > limit && (
+            {children && children.count > 0 && (
               <div className="flex justify-center">
-                <Pagination
-                  data={{ totalCount: children.count }}
-                  onChange={(page, _) => setPage(page)}
-                  defaultPerPage={limit}
-                  cPage={page}
-                />
+                <Pagination totalCount={children.count || 0} />
               </div>
             )}
           </div>