adds support for search in OrganizationSelector

ohcnetwork · Dec 31, 2024 · c317874 · c317874
1 parent 48039f4
commit c317874
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/ui/autocomplete.tsx b/src/components/ui/autocomplete.tsx
@@ -27,6 +27,7 @@ interface AutocompleteProps {
   options: AutoCompleteOption[];
   value: string;
   onChange: (value: string) => void;
+  onSearch?: (value: string) => void;
   placeholder?: string;
   noOptionsMessage?: string;
   disabled?: boolean;
@@ -36,6 +37,7 @@ export default function Autocomplete({
   options,
   value,
   onChange,
+  onSearch,
   placeholder = "Select...",
   noOptionsMessage = "No options found",
   disabled,
@@ -70,6 +72,7 @@ export default function Autocomplete({
           <CommandInput
             placeholder="Search option..."
             disabled={disabled}
+            onValueChange={onSearch}
             className="outline-none border-none ring-0 shadow-none"
           />
           <CommandList>

diff --git a/src/pages/Organization/components/OrganizationSelector.tsx b/src/pages/Organization/components/OrganizationSelector.tsx
@@ -7,6 +7,8 @@ import Autocomplete from "@/components/ui/autocomplete";
 import { Button } from "@/components/ui/button";
 import InputWithError from "@/components/ui/input-with-error";
 
+import useDebouncedState from "@/hooks/useDebouncedState";
+
 import { ORGANIZATION_LEVELS } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
@@ -32,6 +34,7 @@ interface AutoCompleteOption {
 export default function OrganizationSelector(props: OrganizationSelectorProps) {
   const { onChange, required } = props;
   const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+  const [searchQuery, setSearchQuery] = useDebouncedState("", 500);
 
   const headers = props.authToken
     ? {
@@ -42,11 +45,12 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
     : {};
 
   const { data: getAllOrganizations } = useQuery<OrganizationResponse>({
-    queryKey: ["organizations-root"],
+    queryKey: ["organizations-root", searchQuery],
     queryFn: query(routes.organization.list, {
       queryParams: {
         org_type: "govt",
         parent: "",
+        name: searchQuery || undefined,
       },
       ...headers,
     }),
@@ -58,11 +62,13 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
     queryKey: [
       "organizations-current",
       selectedLevels[selectedLevels.length - 1]?.id,
+      searchQuery,
     ],
     queryFn: query(routes.organization.list, {
       queryParams: {
         parent: selectedLevels[selectedLevels.length - 1]?.id,
         org_type: "govt",
+        name: searchQuery || undefined,
       },
       ...headers,
     }),
@@ -153,6 +159,7 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
               onChange={(value: string) =>
                 handleLevelChange(value, selectedLevels.length)
               }
+              onSearch={setSearchQuery}
             />
           </InputWithError>
         </div>