Migration to useQuery: Removed PaginatedList.tsx and Update Dependent Components

src/CAREUI/misc/PaginatedList.tsx

@@ -1,3 +1,4 @@
+import { UseQueryResult, useQuery } from "@tanstack/react-query";
 import { createContext, useContext, useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -6,21 +7,22 @@
 
 import Pagination from "@/components/Common/Pagination";
 
-import { ApiRoute, PaginatedResponse } from "@/Utils/request/types";
-import useTanStackQueryInstead, {
-  QueryOptions,
-} from "@/Utils/request/useQuery";
+import apiQuery from "@/Utils/request/query";
+import {
+  ApiRoute,
+  PaginatedResponse,
+  QueryParams,
+} from "@/Utils/request/types";
 import { classNames } from "@/Utils/utils";
 
 const DEFAULT_PER_PAGE_LIMIT = 14;
 
-interface PaginatedListContext<TItem>
-  extends ReturnType<typeof useTanStackQueryInstead<PaginatedResponse<TItem>>> {
+type PaginatedListContext<TItem> = UseQueryResult<PaginatedResponse<TItem>> & {
   items: TItem[];
   perPage: number;
   currentPage: number;
   setPage: (page: number) => void;
-}
+};
 
 const context = createContext<PaginatedListContext<object> | null>(null);
 
@@ -34,41 +36,52 @@
   return ctx as PaginatedListContext<TItem>;
 }
 
-interface Props<TItem> extends QueryOptions<PaginatedResponse<TItem>> {
+interface Props<TItem> {
   route: ApiRoute<PaginatedResponse<TItem>>;
   perPage?: number;
   initialPage?: number;
   onPageChange?: (page: number) => void;
-  queryCB?: (
-    query: ReturnType<typeof useTanStackQueryInstead<PaginatedResponse<TItem>>>,
-  ) => void;
+  queryCB?: (query: UseQueryResult<PaginatedResponse<TItem>>) => void;
+  pathParams?: Record<string, string>;
+  queryParams?: QueryParams;
+  silent?: boolean | ((response: Response) => boolean);
+  signal?: AbortSignal;
+  headers?: HeadersInit;
   children: (
     ctx: PaginatedListContext<TItem>,
-    query: ReturnType<typeof useTanStackQueryInstead<PaginatedResponse<TItem>>>,
+    query: UseQueryResult<PaginatedResponse<TItem>>,
   ) => JSX.Element | JSX.Element[];
 }
 
 export default function PaginatedList<TItem extends object>({
   children,
   route,
   perPage = DEFAULT_PER_PAGE_LIMIT,
+  onPageChange,
+  initialPage,
+  pathParams,
+  queryParams,
   queryCB,
-  ...queryOptions
+  ...apiCallOptions
 }: Props<TItem>) {
-  const [currentPage, _setPage] = useState(queryOptions.initialPage ?? 1);
+  const [currentPage, _setPage] = useState(initialPage ?? 1);
 
   const setPage = (page: number) => {
     _setPage(page);
-    queryOptions.onPageChange?.(page);
+    onPageChange?.(page);
   };
 
-  const query = useTanStackQueryInstead(route, {
-    ...queryOptions,
-    query: {
-      ...queryOptions.query,
-      limit: perPage,
-      offset: (currentPage - 1) * perPage,
-    },
+  const query = useQuery({
+    queryKey: [route.path, currentPage, perPage, queryParams],
+    queryFn: apiQuery(route, {
+      queryParams: {
+        limit: perPage,
+        offset: (currentPage - 1) * perPage,
+        ...queryParams,
+      },
+      pathParams,
+      ...apiCallOptions,
+    }),
   });
 
   const items = query.data?.results ?? [];
@@ -77,7 +90,7 @@
     if (queryCB) {
       queryCB(query);
     }
   }, [query]);
 
   return (
     <context.Provider
@@ -96,9 +109,9 @@
 }
 
 const WhenEmpty = <TItem extends object>(props: WhenEmptyProps) => {
-  const { items, loading } = useContextualized<TItem>();
+  const { items, isLoading } = useContextualized<TItem>();
 
-  if (loading || items.length > 0) {
+  if (isLoading || items.length > 0) {
     return null;
   }
 
@@ -108,9 +121,9 @@
 PaginatedList.WhenEmpty = WhenEmpty;
 
 const WhenLoading = <TItem extends object>(props: WhenEmptyProps) => {
-  const { loading } = useContextualized<TItem>();
+  const { isLoading } = useContextualized<TItem>();
 
-  if (!loading) {
+  if (!isLoading) {
     return null;
   }
 
@@ -124,18 +137,18 @@
 }
 
 const Refresh = ({ label = "Refresh", ...props }: CommonButtonProps) => {
-  const { loading, refetch } = useContextualized<object>();
+  const { isLoading, refetch } = useContextualized<object>();
 
   return (
     <Button
       variant="secondary"
       {...props}
       onClick={() => refetch()}
-      disabled={loading}
+      disabled={isLoading}
     >
       <CareIcon
         icon="l-sync"
-        className={classNames("text-lg", loading && "animate-spin")}
+        className={classNames("text-lg", isLoading && "animate-spin")}
       />
       <span>{label}</span>
     </Button>
@@ -152,15 +165,15 @@
 }
 
 const Items = <TItem extends object>(props: ItemsProps<TItem>) => {
-  const { loading, items } = useContextualized<TItem>();
+  const { isLoading, items } = useContextualized<TItem>();
 
-  if (loading || items.length === 0) {
+  if (isLoading || items.length === 0) {
     return null;
   }
 
   return (
     <ul className={props.className}>
-      {loading && props.shimmer
+      {isLoading && props.shimmer
         ? Array.from({ length: props.shimmerCount ?? 8 }).map((_, i) => (
             <li key={i} className="w-full">
               {props.shimmer}
@@ -187,9 +200,9 @@
   hideIfSinglePage,
 }: PaginatorProps) => {
   const { data, perPage, currentPage, setPage } = useContextualized<object>();
-  const { loading } = useContextualized<TItem>();
+  const { isLoading } = useContextualized<TItem>();
 
-  if (loading) {
+  if (isLoading) {
     return null;
   }
 

src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx

@@ -1,15 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useTranslation } from "react-i18next";
 
-import PaginatedList from "@/CAREUI/misc/PaginatedList";
-
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 
 import { CardListSkeleton } from "@/components/Common/SkeletonLoading";
 
+import useFilters from "@/hooks/useFilters";
+
 import routes from "@/Utils/request/api";
+import query from "@/Utils/request/query";
 import { formatDateTime, properCase } from "@/Utils/utils";
 import { AllergyIntoleranceRequest } from "@/types/emr/allergyIntolerance/allergyIntolerance";
 import { DiagnosisRequest } from "@/types/emr/diagnosis/diagnosis";
@@ -276,43 +278,57 @@ export default function QuestionnaireResponsesList({
 }: Props) {
   const { t } = useTranslation();
 
+  const { qParams, Pagination, resultsPerPage } = useFilters({
+    limit: 15,
+    cacheBlacklist: ["questionnaire"],
+  });
+
+  const {
+    data: responseData,
+    isFetching: isFetchingResponses,
+    isLoading,
+  } = useQuery({
+    queryKey: ["questionnaireResponses", patientId, qParams, encounter?.id],
+    queryFn: query.debounced(routes.getQuestionnaireResponses, {
+      pathParams: { patientId },
+      queryParams: {
+        encounter: encounter?.id,
+        limit: resultsPerPage,
+        offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
+      },
+    }),
+  });
+
   return (
-    <PaginatedList
-      route={routes.getQuestionnaireResponses}
-      pathParams={{
-        patientId: patientId,
-      }}
-      query={{
-        ...(encounter && { encounter: encounter.id }),
-      }}
-    >
-      {() => (
-        <div className="mt-4 flex w-full flex-col gap-4">
+    <div className="mt-4 gap-4">
+      <div className="max-w-full">
+        {isLoading ? (
+          <div className="grid gap-5">
+            <CardListSkeleton count={3} />
+          </div>
+        ) : (
           <div>
-            <PaginatedList.WhenEmpty>
+            {!isFetchingResponses && responseData?.results?.length === 0 ? (
               <Card className="p-6">
                 <div className="text-lg font-medium text-gray-500">
                   {t("no_questionnaire_responses")}
                 </div>
               </Card>
-            </PaginatedList.WhenEmpty>
-
-            <PaginatedList.WhenLoading>
-              <div className="grid gap-5">
-                <CardListSkeleton count={3} />
-              </div>
-            </PaginatedList.WhenLoading>
-
-            <PaginatedList.Items<QuestionnaireResponse> className="grid gap-4">
-              {(item) => <ResponseCard key={item.id} item={item} />}
-            </PaginatedList.Items>
-
-            <div className="flex w-full items-center justify-center mt-4">
-              <PaginatedList.Paginator hideIfSinglePage />
-            </div>
+            ) : (
+              <ul className="grid gap-4">
+                {responseData?.results?.map((item: QuestionnaireResponse) => (
+                  <li key={item.id} className="w-full">
+                    <ResponseCard key={item.id} item={item} />
+                  </li>
+                ))}
+                <div className="flex w-full items-center justify-center mt-4">
+                  <Pagination totalCount={responseData?.count || 0} />
+                </div>
+              </ul>
+            )}
           </div>
-        </div>
-      )}
-    </PaginatedList>
+        )}
+      </div>
+    </div>
   );
 }

src/components/Patient/PatientDetailsTab/EncounterHistory.tsx

@@ -21,7 +21,7 @@ const EncounterHistory = (props: PatientProps) => {
   return (
     <PaginatedList
       route={routes.encounter.list}
-      query={{ patient: patientId }}
+      queryParams={{ patient: patientId }}
       perPage={5}
     >
       {() => (