Added debouncing for APIs

src/pages/FacilityOrganization/FacilityOrganizationView.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -11,6 +11,8 @@ import { Input } from "@/components/ui/input";
 
 import Pagination from "@/components/Common/Pagination";
 
+import useDebouncedState from "@/hooks/useDebouncedState";
+
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 
@@ -26,6 +28,14 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
   const [page, setPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
   const limit = 12; // 3x4 grid
+  const [debouncedParams, setDebouncedParams] = useDebouncedState(
+    searchQuery,
+    500,
+  );
+
+  useEffect(() => {
+    setDebouncedParams(searchQuery);
+  }, [searchQuery]);
 
   const { data: children, isLoading } = useQuery({
     queryKey: [
@@ -35,15 +45,15 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
       id,
       page,
       limit,
-      searchQuery,
+      debouncedParams,
     ],
     queryFn: query(routes.facilityOrganization.list, {
       pathParams: { facilityId, organizationId: id },
       queryParams: {
         parent: id,
         offset: (page - 1) * limit,
         limit,
-        name: searchQuery || undefined,
+        name: debouncedParams || undefined,
       },
     }),
   });

src/pages/Organization/OrganizationFacilities.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
+import { useEffect } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -9,6 +10,7 @@ import { Input } from "@/components/ui/input";
 
 import { Avatar } from "@/components/Common/Avatar";
 
+import useDebouncedState from "@/hooks/useDebouncedState";
 import useFilters from "@/hooks/useFilters";
 
 import routes from "@/Utils/request/api";
@@ -30,15 +32,21 @@ export default function OrganizationFacilities({
   const { qParams, Pagination, advancedFilter, resultsPerPage, updateQuery } =
     useFilters({ limit: 14, cacheBlacklist: ["facility"] });
 
+  const [debouncedParams, setDebouncedParams] = useDebouncedState(qParams, 500);
+
+  useEffect(() => {
+    setDebouncedParams(qParams);
+  }, [qParams]);
+
   const { data: facilities, isLoading } = useQuery({
-    queryKey: ["organizationFacilities", id, qParams],
+    queryKey: ["organizationFacilities", id, debouncedParams],
     queryFn: query(routes.facility.list, {
       queryParams: {
-        page: qParams.page,
+        page: debouncedParams.page,
         limit: resultsPerPage,
-        offset: (qParams.page - 1) * resultsPerPage,
+        offset: (debouncedParams.page - 1) * resultsPerPage,
         organization: id,
-        name: qParams.name,
+        name: debouncedParams.name,
         ...advancedFilter.filter,
       },
     }),

src/pages/Organization/OrganizationView.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -11,6 +11,8 @@ import { Input } from "@/components/ui/input";
 
 import Pagination from "@/components/Common/Pagination";
 
+import useDebouncedState from "@/hooks/useDebouncedState";
+
 import query from "@/Utils/request/query";
 import { Organization, getOrgLabel } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
@@ -25,16 +27,26 @@ interface Props {
 export default function OrganizationView({ id, navOrganizationId }: Props) {
   const [page, setPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
+
+  const [debouncedParams, setDebouncedParams] = useDebouncedState(
+    searchQuery,
+    500,
+  );
+
+  useEffect(() => {
+    setDebouncedParams(searchQuery);
+  }, [searchQuery]);
+
   const limit = 12; // 3x4 grid
 
   const { data: children, isLoading } = useQuery({
-    queryKey: ["organization", id, "children", page, limit, searchQuery],
+    queryKey: ["organization", id, "children", page, limit, debouncedParams],
     queryFn: query(organizationApi.list, {
       queryParams: {
         parent: id,
         offset: (page - 1) * limit,
         limit,
-        name: searchQuery || undefined,
+        name: debouncedParams || undefined,
       },
     }),
   });

src/types/notes/messages.ts

@@ -7,4 +7,3 @@ export interface Message {
   created_by: UserBase;
   updated_by: UserBase;
 }
-