Ensure proper handling of pagination for Billable Services

src/billable-services/billable-service.resource.ts

@@ -1,7 +1,8 @@
 import useSWR from 'swr';
-import { type OpenmrsResource, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { type OpenmrsResource, openmrsFetch, restBaseUrl, useOpenmrsFetchAll, useConfig } from '@openmrs/esm-framework';
 import { type ServiceConcept } from '../types';
 import { apiBasePath } from '../constants';
+import { type BillableService } from '../types/index';
 
 type ResponseObject = {
   results: Array<OpenmrsResource>;
@@ -10,10 +11,10 @@ type ResponseObject = {
 export const useBillableServices = () => {
   const url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(display),servicePrices:(uuid,name,price))`;
 
-  const { data, isLoading, isValidating, error, mutate } = useSWR<{ data: ResponseObject }>(url, openmrsFetch);
+  const { data, isLoading, isValidating, error, mutate } = useOpenmrsFetchAll<BillableService[]>(url);
 
   return {
-    billableServices: data?.data.results ?? [],
+    billableServices: data ?? [],
     isLoading,
     isValidating,
     error,

src/billable-services/billable-services.component.tsx

@@ -22,6 +22,7 @@ import { useLayoutType, isDesktop, useConfig, usePagination, ErrorState, navigat
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
 import { useBillableServices } from './billable-service.resource';
 import styles from './billable-services.scss';
+import { type BillableService } from '../types/index';
 
 const BillableServices = () => {
   const { t } = useTranslation();
@@ -68,21 +69,23 @@ const BillableServices = () => {
     navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
   }, []);
 
-  const searchResults = useMemo(() => {
-    if (billableServices !== undefined && billableServices.length > 0) {
+  const searchResults: BillableService[] = useMemo(() => {
+    const flatBillableServices = Array.isArray(billableServices) ? billableServices.flat() : billableServices;
+
+    if (flatBillableServices !== undefined && flatBillableServices.length > 0) {
       if (searchString && searchString.trim() !== '') {
         const search = searchString.toLowerCase();
-        return billableServices?.filter((service) =>
+        return flatBillableServices.filter((service: BillableService) =>
           Object.entries(service).some(([header, value]) => {
             return header === 'uuid' ? false : `${value}`.toLowerCase().includes(search);
           }),
         );
       }
     }
-    return billableServices;
+    return flatBillableServices;
   }, [searchString, billableServices]);
 
-  const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
+  const { paginated, goTo, results, currentPage } = usePagination<BillableService>(searchResults, pageSize);
 
   let rowData = [];
   if (results) {

src/types/index.ts

@@ -179,3 +179,17 @@ export type ServicePrice = {
   price: string;
   uuid: string;
 };
+
+export interface BillableService {
+  uuid: string;
+  name: string;
+  shortName: string;
+  serviceStatus: string;
+  serviceType?: {
+    display: string;
+  };
+  servicePrices: Array<{
+    name: string;
+    price: number;
+  }>;
+}