Optimize Pagination | Switch to TanStackQuery in ResourcesList | Prevent API calls | Fix Translation

public/locale/en.json

@@ -577,6 +577,7 @@
   "confirm_transfer_complete": "Confirm Transfer Complete!",
   "confirm_unavailability": "Confirm Unavailability",
   "confirmed": "Confirmed",
+  "consent__status": "Consent Status",
   "consult": "Consult",
   "consultation_history": "Consultation History",
   "consultation_missing_warning": "You have not created a consultation for the patient in",
@@ -923,6 +924,7 @@
   "error_fetching_slots_data": "Error while fetching slots data",
   "error_fetching_user_data": "Error while fetching user data",
   "error_fetching_user_details": "Error while fetching user details: ",
+  "error_fetching_users_data": "Error fetching users data",
   "error_loading_questionnaire_response": "Error loading questionnaire response",
   "error_sending_otp": "Error while sending OTP, Please try again later",
   "error_updating_encounter": "Error to Updating Encounter",

src/CAREUI/misc/PaginatedList.tsx

@@ -77,7 +77,7 @@
     if (queryCB) {
       queryCB(query);
     }
   }, [query]);
 
   return (
     <context.Provider
@@ -154,7 +154,7 @@
 const Items = <TItem extends object>(props: ItemsProps<TItem>) => {
   const { loading, items } = useContextualized<TItem>();
 
-  if (loading || items.length === 0) {
+  if (items.length === 0) {
     return null;
   }
 
@@ -182,16 +182,8 @@
   hideIfSinglePage?: boolean;
 }
 
-const Paginator = <TItem extends object>({
-  className,
-  hideIfSinglePage,
-}: PaginatorProps) => {
+const Paginator = ({ className, hideIfSinglePage }: PaginatorProps) => {
   const { data, perPage, currentPage, setPage } = useContextualized<object>();
-  const { loading } = useContextualized<TItem>();
-
-  if (loading) {
-    return null;
-  }
 
   if (hideIfSinglePage && (data?.count ?? 0) <= perPage) {
     return null;

src/Utils/request/useQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useMemo, useRef } from "react";
 
 import request from "@/Utils/request/request";
@@ -39,6 +39,7 @@ export default function useTanStackQueryInstead<TData, TBody = unknown>(
     },
     enabled: options?.prefetch ?? true,
     refetchOnWindowFocus: false,
+    placeholderData: keepPreviousData,
   });
 
   return {

src/components/Facility/FacilityUsers.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -43,6 +43,8 @@ export default function FacilityUsers(props: { facilityId: string }) {
       },
     }),
     enabled: !!facilityId,
+    placeholderData: keepPreviousData,
+    staleTime: 1000 * 60,
   });
 
   if (userListFetching || !userListData) {

src/components/Files/FilesTab.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -108,6 +108,9 @@ export const FilesTab = (props: FilesTabProps) => {
         //file_category: qParams.file_category,
       },
     }),
+    enabled: !!type,
+    placeholderData: keepPreviousData,
+    staleTime: 1000 * 60,
   });
 
   const fileManager = useFileManager({

src/components/Resource/ResourceCommentSection.tsx

@@ -8,7 +8,6 @@ import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 
 import { Avatar } from "@/components/Common/Avatar";
-import CircularProgress from "@/components/Common/CircularProgress";
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
@@ -65,9 +64,6 @@ const CommentSection = (props: { id: string }) => {
               <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
                 <span>{t("no_comments_available")}</span>
               </PaginatedList.WhenEmpty>
-              <PaginatedList.WhenLoading>
-                <CircularProgress className="h-12 w-12" />
-              </PaginatedList.WhenLoading>
               <PaginatedList.Items<CommentModel>>
                 {(item) => <Comment {...item} />}
               </PaginatedList.Items>

src/components/Resource/ResourceList.tsx

@@ -1,3 +1,4 @@
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
@@ -18,8 +19,7 @@ import ListFilter from "@/components/Resource/ResourceFilter";
 import useFilters from "@/hooks/useFilters";
 
 import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import { useView } from "@/Utils/useView";
 import { formatDateTime } from "@/Utils/utils";
 import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
@@ -39,16 +39,32 @@ export default function ListView() {
 
   const appliedFilters = formatFilter(qParams);
 
-  const { loading, data, refetch } = useTanStackQueryInstead(
-    routes.listResourceRequests,
-    {
-      query: formatFilter({
+  const {
+    data: resourcesList,
+    isLoading: loading,
+    refetch: refetchResources,
+  } = useQuery({
+    queryKey: [routes.listResourceRequests.path, qParams],
+    queryFn: query.debounced(routes.listResourceRequests, {
+      queryParams: formatFilter({
         ...qParams,
         limit: resultsPerPage,
         offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
       }),
-    },
-  );
+    }),
+    placeholderData: keepPreviousData,
+    staleTime: 1000 * 60 * 2,
+  });
+
+  const { data: csvFile } = useQuery({
+    queryKey: [
+      routes.downloadResourceRequests.path,
+      { ...appliedFilters, csv: true },
+    ],
+    queryFn: query(routes.downloadResourceRequests, {
+      queryParams: { ...appliedFilters, csv: true },
+    }),
+  });
 
   const showResourceCardList = (data: ResourceRequest[]) => {
     if (data && !data.length) {
@@ -197,12 +213,7 @@ export default function ListView() {
         <ExportButton
           variant="secondary"
           className="ml-4 bg-transparent shadow-none text-black rounded-full"
-          action={async () => {
-            const { data } = await request(routes.downloadResourceRequests, {
-              query: { ...appliedFilters, csv: true },
-            });
-            return data ?? null;
-          }}
+          action={async () => csvFile ?? null}
           filenamePrefix="resource_requests"
         />
       }
@@ -241,7 +252,7 @@ export default function ListView() {
             <div className="-mb-4 mr-2 mt-4 flex justify-end">
               <button
                 className="text-xs hover:text-blue-800"
-                onClick={() => refetch()}
+                onClick={() => refetchResources()}
               >
                 <CareIcon
                   icon="l-refresh"
@@ -268,9 +279,9 @@ export default function ListView() {
                 {t("LOG_UPDATE_FIELD_LABEL__action")}
               </div>
             </div>
-            <div>{showResourceCardList(data?.results || [])}</div>
+            <div>{showResourceCardList(resourcesList?.results || [])}</div>
             <div>
-              <Pagination totalCount={data?.count || 0} />
+              <Pagination totalCount={resourcesList?.count || 0} />
             </div>
           </div>
         )}

src/pages/Encounters/EncounterList.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
 import { Link } from "raviger";
 import { useCallback } from "react";
@@ -169,6 +169,8 @@ export function EncounterList({
       },
     }),
     enabled: !propEncounters && !encounter_id,
+    placeholderData: keepPreviousData,
+    staleTime: 60 * 1000,
   });
 
   const { data: queryEncounter } = useQuery<Encounter>({

src/pages/Facility/FacilitiesPage.tsx

@@ -1,5 +1,5 @@
 import careConfig from "@careConfig";
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -59,6 +59,8 @@ export function FacilitiesPage() {
       },
     }),
     enabled: !!qParams.organization,
+    placeholderData: keepPreviousData,
+    staleTime: 60 * 1000,
   });
 
   return (

src/pages/Facility/FacilityDetailsPage.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
@@ -49,6 +49,8 @@ export function FacilityDetailsPage({ id }: Props) {
       pathParams: { facility_id: id },
       silent: true,
     }),
+    placeholderData: keepPreviousData,
+    staleTime: 60 * 1000,
   });
 
   if (docError) {

src/pages/Organization/OrganizationFacilities.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
@@ -36,7 +36,11 @@ export default function OrganizationFacilities({
   const { qParams, Pagination, advancedFilter, resultsPerPage, updateQuery } =
     useFilters({ limit: 15, cacheBlacklist: ["name"] });
 
-  const { data: facilities, isFetching } = useQuery({
+  const {
+    data: facilities,
+    isFetching,
+    isLoading,
+  } = useQuery({
     queryKey: ["organizationFacilities", id, qParams],
     queryFn: query.debounced(routes.facility.list, {
       queryParams: {
@@ -49,6 +53,8 @@ export default function OrganizationFacilities({
       },
     }),
     enabled: !!id,
+    placeholderData: keepPreviousData,
+    staleTime: 60 * 1000,
   });
 
   if (!id) {
@@ -90,7 +96,7 @@ export default function OrganizationFacilities({
           className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"
           data-cy="facility-cards"
         >
-          {isFetching ? (
+          {isLoading ? (
             <CardGridSkeleton count={6} />
           ) : facilities?.results?.length === 0 ? (
             <Card className="col-span-full">

src/pages/Organization/OrganizationPatients.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -71,7 +71,11 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
     });
   };
 
-  const { data: patients, isFetching } = useQuery({
+  const {
+    data: patients,
+    isFetching,
+    isLoading,
+  } = useQuery({
     queryKey: ["organizationPatients", id, qParams],
     queryFn: query.debounced(organizationApi.listPatients, {
       pathParams: { id },
@@ -84,6 +88,8 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
       },
     }),
     enabled: !!id && !!organization,
+    placeholderData: keepPreviousData,
+    staleTime: 60 * 1000,
   });
 
   if (!id) {
@@ -118,9 +124,8 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
           onSearch={handleSearch}
           onFieldChange={handleFieldChange}
         />
-
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {isFetching ? (
+          {isLoading ? (
             <CardGridSkeleton count={6} />
           ) : patients?.results?.length === 0 ? (
             <Card className="col-span-full">

src/pages/Organization/OrganizationUsers.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -37,7 +37,11 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
   const openAddUserSheet = qParams.sheet === "add";
   const openLinkUserSheet = qParams.sheet === "link";
 
-  const { data: users, isFetching: isFetchingUsers } = useQuery({
+  const {
+    data: users,
+    isFetching: isFetchingUsers,
+    isLoading,
+  } = useQuery({
     queryKey: ["organizationUsers", id, qParams.search, qParams.page],
     queryFn: query.debounced(organizationApi.listUsers, {
       pathParams: { id },
@@ -48,6 +52,8 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
       },
     }),
     enabled: !!id,
+    placeholderData: keepPreviousData,
+    staleTime: 1000 * 60,
   });
 
   if (!id) {
@@ -101,7 +107,7 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
             data-cy="search-user"
           />
         </div>
-        {isFetchingUsers ? (
+        {isLoading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             <CardGridSkeleton count={6} />
           </div>

src/pages/Organization/OrganizationView.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -32,7 +32,11 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
   const [searchQuery, setSearchQuery] = useState("");
   const limit = 12; // 3x4 grid
 
-  const { data: children, isFetching } = useQuery({
+  const {
+    data: children,
+    isFetching,
+    isLoading,
+  } = useQuery({
     queryKey: ["organization", id, "children", page, limit, searchQuery],
     queryFn: query.debounced(organizationApi.list, {
       queryParams: {
@@ -42,6 +46,8 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
         name: searchQuery || undefined,
       },
     }),
+    placeholderData: keepPreviousData,
+    staleTime: 1000 * 60,
   });
 
   // Hack for the sidebar to work
@@ -74,7 +80,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
           </div>
         </div>
 
-        {isFetching ? (
+        {isLoading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             <CardGridSkeleton count={6} />
           </div>