openmrs · donaldkibet · Feb 8, 2024 · Feb 7, 2024
diff --git a/packages/esm-patient-chart-app/src/config-schema.ts b/packages/esm-patient-chart-app/src/config-schema.ts
@@ -118,6 +118,11 @@ export const esmPatientChartSchema = {
       "Whether the visit location field in the Start Visit form should be view-only. If so, the visit location will always be set to the user's login location.",
     _default: false,
   },
+  numberOfVisitsToLoad: {
+    _type: Type.Number,
+    _description: 'The number of visits to load initially in the Visits Summary tab. Defaults to 5',
+    _default: 5,
+  },
 };
 export interface ChartConfig {
   offlineVisitTypeUuid: string;
@@ -140,4 +145,5 @@ export interface ChartConfig {
     name: string;
   };
   disableChangingVisitLocation: boolean;
+  numberOfVisitsToLoad: number;
 }
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.component.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.component.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { InlineLoading, Tab, Tabs, TabList, TabPanel, TabPanels } from '@carbon/react';
+import { Button, InlineLoading, Tab, Tabs, TabList, TabPanel, TabPanels } from '@carbon/react';
 import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { formatDatetime, parseDate, useConfig, ExtensionSlot } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import type { ChartConfig } from '../../config-schema';
-import { mapEncounters, useVisits } from './visit.resource';
+import { mapEncounters, useInfiniteVisits } from './visit.resource';
 import VisitsTable from './past-visits-components/visits-table';
 import VisitSummary from './past-visits-components/visit-summary.component';
 import styles from './visit-detail-overview.scss';
@@ -15,11 +15,13 @@ interface VisitOverviewComponentProps {
 
 function VisitDetailOverviewComponent({ patientUuid }: VisitOverviewComponentProps) {
   const { t } = useTranslation();
-  const { visits, isError, isLoading, mutateVisits } = useVisits(patientUuid);
+  const { visits, error, hasMore, isLoading, isValidating, mutateVisits, setSize, size } =
+    useInfiniteVisits(patientUuid);
   const { showAllEncountersTab } = useConfig<ChartConfig>();
+  const shouldLoadMore = size !== visits?.length;
 
   const visitsWithEncounters = visits
-    ?.filter((visit) => visit.encounters.length)
+    ?.filter((visit) => visit?.encounters?.length)
     ?.flatMap((visitWithEncounters) => {
       return mapEncounters(visitWithEncounters);
     });
@@ -43,38 +45,54 @@ function VisitDetailOverviewComponent({ patientUuid }: VisitOverviewComponentPro
           <TabPanel>
             {isLoading ? (
               <InlineLoading description={`${t('loading', 'Loading')} ...`} role="progressbar" />
-            ) : isError ? (
-              <ErrorState headerTitle={t('visits', 'visits')} error={isError} />
+            ) : error ? (
+              <ErrorState headerTitle={t('visits', 'visits')} error={error} />
             ) : visits?.length ? (
-              visits.map((visit, i) => (
-                <div className={styles.container} key={i}>
-                  <div className={styles.header}>
-                    <div className={styles.visitInfo}>
-                      <div>
-                        <h4 className={styles.visitType}>{visit?.visitType?.display}</h4>
-                        <div className={styles.displayFlex}>
-                          <h6 className={styles.dateLabel}>{t('start', 'Start')}:</h6>
-                          <span className={styles.date}>{formatDatetime(parseDate(visit?.startDatetime))}</span>
-                          {visit?.stopDatetime ? (
-                            <>
-                              <h6 className={styles.dateLabel}>{t('end', 'End')}:</h6>
-                              <span className={styles.date}>{formatDatetime(parseDate(visit?.stopDatetime))}</span>
-                            </>
-                          ) : null}
+              <>
+                {visits.map((visit, i) => (
+                  <div className={styles.container} key={i}>
+                    <div className={styles.header}>
+                      <div className={styles.visitInfo}>
+                        <div>
+                          <h4 className={styles.visitType}>{visit?.visitType?.display}</h4>
+                          <div className={styles.displayFlex}>
+                            <h6 className={styles.dateLabel}>{t('start', 'Start')}:</h6>
+                            <span className={styles.date}>{formatDatetime(parseDate(visit?.startDatetime))}</span>
+                            {visit?.stopDatetime ? (
+                              <>
+                                <h6 className={styles.dateLabel}>{t('end', 'End')}:</h6>
+                                <span className={styles.date}>{formatDatetime(parseDate(visit?.stopDatetime))}</span>
+                              </>
+                            ) : null}
+                          </div>
+                        </div>
+                        <div>
+                          <ExtensionSlot
+                            name="visit-detail-overview-actions"
+                            className={styles.visitDetailOverviewActions}
+                            state={{ patientUuid, visit }}
+                          />
                         </div>
-                      </div>
-                      <div>
-                        <ExtensionSlot
-                          name="visit-detail-overview-actions"
-                          className={styles.visitDetailOverviewActions}
-                          state={{ patientUuid, visit }}
-                        />
                       </div>
                     </div>
+                    <VisitSummary visit={visit} patientUuid={patientUuid} />
                   </div>
-                  <VisitSummary visit={visit} patientUuid={patientUuid} />
-                </div>
-              ))
+                ))}
+
+                {hasMore ? (
+                  <Button
+                    className={styles.loadMoreButton}
+                    disabled={isValidating && shouldLoadMore}
+                    onClick={() => setSize(size + 1)}
+                  >
+                    {isValidating && shouldLoadMore ? (
+                      <InlineLoading description={`${t('loading', 'Loading')} ...`} role="progressbar" />
+                    ) : (
+                      t('loadMore', 'Load more')
+                    )}
+                  </Button>
+                ) : null}
+              </>
             ) : (
               <EmptyState headerTitle={t('visits', 'visits')} displayText={t('Visits', 'Visits')} />
             )}
@@ -83,8 +101,8 @@ function VisitDetailOverviewComponent({ patientUuid }: VisitOverviewComponentPro
             <TabPanel>
               {isLoading ? (
                 <InlineLoading description={`${t('loading', 'Loading')} ...`} role="progressbar" />
-              ) : isError ? (
-                <ErrorState headerTitle={t('visits', 'visits')} error={isError} />
+              ) : error ? (
+                <ErrorState headerTitle={t('visits', 'visits')} error={error} />
               ) : visits?.length ? (
                 <VisitsTable
                   mutateVisits={mutateVisits}

diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.scss b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.scss
@@ -189,6 +189,16 @@
   align-items: center;
 }
 
+.loadMoreButton {
+  :global(.cds--inline-loading) {
+    min-height: 1rem !important;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset !important;
+  }
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .header {
@@ -199,4 +209,3 @@ html[dir='rtl'] {
     }
   }
 }
-
diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.test.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/visit-detail-overview.test.tsx
@@ -22,7 +22,7 @@ jest.mock('@openmrs/esm-framework', () => {
     getVisitsForPatient: jest.fn(),
     createErrorHandler: jest.fn(),
     useLayoutType: jest.fn(),
-    // useConfig: jest.fn().mockImplementation(() => ({ showAllEncountersTab: true })),
+    useConfig: jest.fn().mockImplementation(() => ({ numberOfVisitsToLoad: 5 })),
     userHasAccess: jest.fn().mockImplementation((privilege, _) => (privilege ? false : true)),
     ExtensionSlot: jest.fn().mockImplementation((ext) => ext.name),
     useConnectedExtensions: jest.fn(() => []),

diff --git a/packages/esm-patient-chart-app/src/visit/visits-widget/visit.resource.tsx b/packages/esm-patient-chart-app/src/visit/visits-widget/visit.resource.tsx
@@ -1,5 +1,46 @@
 import useSWR from 'swr';
-import { openmrsFetch, type OpenmrsResource, type Privilege, type Visit } from '@openmrs/esm-framework';
+import useSWRInfinite from 'swr/infinite';
+import { openmrsFetch, useConfig, type OpenmrsResource, type Privilege, type Visit } from '@openmrs/esm-framework';
+import { type ChartConfig } from '../../config-schema';
+
+export function useInfiniteVisits(patientUuid: string) {
+  const config = useConfig<ChartConfig>();
+  const customRepresentation =
+    'custom:(uuid,encounters:(uuid,diagnoses:(uuid,display,rank,diagnosis),form:(uuid,display),encounterDatetime,orders:full,obs:full,encounterType:(uuid,display,viewPrivilege,editPrivilege),encounterProviders:(uuid,display,encounterRole:(uuid,display),provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime,stopDatetime,patient,attributes:(attributeType:ref,display,uuid,value)';
+
+  const getKey = (pageIndex, previousPageData) => {
+    const pageSize = config.numberOfVisitsToLoad;
+
+    if (previousPageData && !previousPageData?.data?.links.some((link) => link.rel === 'next')) {
+      return null;
+    }
+
+    let url = `/ws/rest/v1/visit?patient=${patientUuid}&v=${customRepresentation}&limit=${pageSize}`;
+
+    if (pageIndex) {
+      url += `&startIndex=${pageIndex * pageSize}`;
+    }
+
+    return url;
+  };
+
+  const { data, error, isLoading, isValidating, mutate, size, setSize } = useSWRInfinite(
+    patientUuid ? getKey : null,
+    openmrsFetch,
+    { parallel: true },
+  );
+
+  return {
+    visits: data ? [].concat(data?.flatMap((page) => page.data.results)) : null,
+    error,
+    hasMore: data?.length ? !!data[data.length - 1].data?.links?.some((link) => link.rel === 'next') : false,
+    isLoading,
+    isValidating,
+    mutateVisits: mutate,
+    setSize,
+    size,
+  };
+}
 
 export function useVisits(patientUuid: string) {
   const customRepresentation =
@@ -11,12 +52,13 @@ export function useVisits(patientUuid: string) {
   );
   return {
     visits: data ? data?.data?.results : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
     mutateVisits: mutate,
   };
 }
+
 export function useEncounters(patientUuid: string) {
   const endpointUrl = '/ws/rest/v1/encounter';
   // setting this up to make it more generic and usable later
@@ -244,6 +286,7 @@ export interface OrderItem {
     role: string;
   };
 }
+
 export interface Diagnosis {
   certainty: string;
   display: string;

diff --git a/packages/esm-patient-chart-app/translations/en.json b/packages/esm-patient-chart-app/translations/en.json
@@ -80,6 +80,7 @@
   "invalidVisitStopDate": "Visit stop date time cannot be on or before visit start date time",
   "loading": "Loading",
   "loadingVisit": "Loading current visit...",
+  "loadMore": "Load more",
   "location": "Location",
   "male": "Male",
   "markAlive": "Mark alive",