diff --git a/.env b/.env index 55743104f8f..760297564d2 100644 --- a/.env +++ b/.env @@ -14,4 +14,4 @@ ESLINT_NO_DEV_ERRORS=true CARE_CDN_URL="https://egov-s3-facility-10bedicu.s3.amazonaws.com https://egov-s3-patient-data-10bedicu.s3.amazonaws.com http://localhost:4566" REACT_ALLOWED_LOCALES="en,hi,ta,ml,mr,kn" -REACT_ENABLED_APPS="" +REACT_ENABLED_APPS= "" diff --git a/package-lock.json b/package-lock.json index aae20921b8a..c1df2f9e3f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -146,8 +146,8 @@ "node": ">=22.8.0" }, "optionalDependencies": { - "@esbuild/linux-arm64": "*", - "@esbuild/linux-x64": "*", + "@esbuild/linux-arm64": "latest", + "@esbuild/linux-x64": "latest", "@rollup/rollup-linux-arm64-gnu": "4.29.1", "@rollup/rollup-linux-x64-gnu": "4.29.1" } diff --git a/src/pages/FacilityOrganization/FacilityOrganizationView.tsx b/src/pages/FacilityOrganization/FacilityOrganizationView.tsx index 8a362cf21cb..c7c63ff150e 100644 --- a/src/pages/FacilityOrganization/FacilityOrganizationView.tsx +++ b/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 useDebounce from "@/hooks/useDebounce"; + import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; @@ -25,8 +27,15 @@ interface Props { export default function FacilityOrganizationView({ id, facilityId }: Props) { const [page, setPage] = useState(1); const [searchQuery, setSearchQuery] = useState(""); + const [debouncedQuery, setDebouncedQuery] = useState(""); const limit = 12; // 3x4 grid + const debounceQuery = useDebounce((newParams) => { + setDebouncedQuery(newParams); + }, 500); + useEffect(() => { + debounceQuery(searchQuery); + }, [searchQuery]); const { data: children, isLoading } = useQuery({ queryKey: [ "facilityOrganization", @@ -35,7 +44,7 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) { id, page, limit, - searchQuery, + debouncedQuery, ], queryFn: query(routes.facilityOrganization.list, { pathParams: { facilityId, organizationId: id }, @@ -43,7 +52,7 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) { parent: id, offset: (page - 1) * limit, limit, - name: searchQuery || undefined, + name: debouncedQuery || undefined, }, }), }); diff --git a/src/pages/Organization/OrganizationFacilities.tsx b/src/pages/Organization/OrganizationFacilities.tsx index 0717e682921..4b4468b6cf7 100644 --- a/src/pages/Organization/OrganizationFacilities.tsx +++ b/src/pages/Organization/OrganizationFacilities.tsx @@ -1,5 +1,6 @@ import { useQuery } from "@tanstack/react-query"; import { Link } from "raviger"; +import { useEffect, useState } 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 useDebounce from "@/hooks/useDebounce"; import useFilters from "@/hooks/useFilters"; import routes from "@/Utils/request/api"; @@ -30,15 +32,25 @@ export default function OrganizationFacilities({ const { qParams, Pagination, advancedFilter, resultsPerPage, updateQuery } = useFilters({ limit: 14, cacheBlacklist: ["facility"] }); + const [debouncedParams, setDebouncedParams] = useState(qParams); + + const debounceParams = useDebounce((newParams) => { + setDebouncedParams(newParams); + }, 500); + + useEffect(() => { + debounceParams(qParams); + }, [JSON.stringify(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, }, }), diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx index cd2c1b492a4..428688a9890 100644 --- a/src/pages/Organization/OrganizationView.tsx +++ b/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 useDebounce from "@/hooks/useDebounce"; + import query from "@/Utils/request/query"; import { Organization, getOrgLabel } from "@/types/organization/organization"; import organizationApi from "@/types/organization/organizationApi"; @@ -25,16 +27,24 @@ interface Props { export default function OrganizationView({ id, navOrganizationId }: Props) { const [page, setPage] = useState(1); const [searchQuery, setSearchQuery] = useState(""); - const limit = 12; // 3x4 grid + const [debouncedQuery, setDebouncedQuery] = useState(""); + + const limit = 12; // 3x4 grid + const debounceQuery = useDebounce((newParams) => { + setDebouncedQuery(newParams); + }, 500); + useEffect(() => { + debounceQuery(searchQuery); + }, [searchQuery]); const { data: children, isLoading } = useQuery({ - queryKey: ["organization", id, "children", page, limit, searchQuery], + queryKey: ["organization", id, "children", page, limit], queryFn: query(organizationApi.list, { queryParams: { parent: id, offset: (page - 1) * limit, limit, - name: searchQuery || undefined, + name: debouncedQuery || undefined, }, }), });