@openmrs/esm-patient-programs-app 3.0.0-pre.65 → 3.0.0-pre.656

package/src/programs/programs-form.scss

@@ -0,0 +1,20 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.alreadyEnrolledText {
+  @include carbon--type-style("body-short-01");
+  color: $text-02;
+  min-height: 1rem;
+}
+
+.selectContainer {
+  display: flex;
+  align-items: center;
+}
+
+.loading {
+  margin-left: 1rem;
+  width: 2rem;
+  min-height: 2.5rem;
+}

package/src/programs/programs-form.test.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { of } from 'rxjs/internal/observable/of';
+import { throwError } from 'rxjs';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { createErrorHandler, detach, showNotification, showToast } from '@openmrs/esm-framework';
+import { mockPatient } from '../../../../__mocks__/patient.mock';
+import {
+  mockCareProgramsResponse,
+  mockEnrolledProgramsResponse,
+  mockLocationsResponse,
+} from '../../../../__mocks__/programs.mock';
+import {
+  createProgramEnrollment,
+  fetchAvailablePrograms,
+  fetchEnrolledPrograms,
+  fetchLocations,
+} from './programs.resource';
+import ProgramsForm from './programs-form.component';
+
+const testProps = {
+  patientUuid: mockPatient.id,
+  isTablet: false,
+};
+
+const mockCreateErrorHandler = createErrorHandler as jest.Mock;
+const mockCreateProgramEnrollment = createProgramEnrollment as jest.Mock;
+const mockDetach = detach as jest.Mock;
+const mockFetchAvailablePrograms = fetchAvailablePrograms as jest.Mock;
+const mockFetchEnrolledPrograms = fetchEnrolledPrograms as jest.Mock;
+const mockFetchLocations = fetchLocations as jest.Mock;
+const mockShowNotification = showNotification as jest.Mock;
+const mockShowToast = showToast as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    createErrorHandler: jest.fn(),
+    detach: jest.fn(),
+    showNotification: jest.fn(),
+    showToast: jest.fn(),
+  };
+});
+
+jest.mock('./programs.resource', () => ({
+  createProgramEnrollment: jest.fn(),
+  fetchAvailablePrograms: jest.fn(),
+  fetchEnrolledPrograms: jest.fn(),
+  fetchLocations: jest.fn(),
+}));
+
+describe('ProgramsForm: ', () => {
+  beforeEach(() => {
+    mockFetchAvailablePrograms.mockReturnValue(of(mockCareProgramsResponse));
+    mockFetchEnrolledPrograms.mockReturnValue(of(mockEnrolledProgramsResponse));
+    mockFetchLocations.mockReturnValue(of(mockLocationsResponse));
+  });
+
+  it('renders the programs form with all the relevant fields and values', async () => {
+    renderProgramsForm();
+
+    expect(screen.getByRole('group', { name: /Program/i })).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: /Date enrolled/i })).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: /Date completed/i })).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: /Enrollment location/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Choose a program/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Oncology Screening and Diagnosis/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Choose a location/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Amani Hospital/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Inpatient Ward/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Isolation Ward/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /Laboratory/i })).toBeInTheDocument();
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    const enrollButton = screen.getByRole('button', { name: /enroll/i });
+    expect(cancelButton).toBeInTheDocument();
+    expect(enrollButton).toBeInTheDocument();
+    expect(enrollButton).toBeDisabled();
+  });
+
+  it('closes the form and the workspace when the cancel button is clicked', () => {
+    renderProgramsForm();
+
+    const cancelButton = screen.getByRole('button', { name: /Cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(mockDetach).toHaveBeenCalledTimes(1);
+    expect(mockDetach).toHaveBeenCalledWith('patient-chart-workspace-slot', 'programs-form-workspace');
+  });
+
+  it('renders a light background for date inputs in the tablet viewport ', () => {
+    testProps.isTablet = true;
+
+    renderProgramsForm();
+
+    expect(screen.getAllByPlaceholderText('dd/mm/yyyy')[0]).toHaveClass('bx--date-picker--light', { exact: false });
+    expect(screen.getAllByPlaceholderText('dd/mm/yyyy')[1]).toHaveClass('bx--date-picker--light', { exact: false });
+  });
+
+  describe('Form submission: ', () => {
+    let cancelButton: HTMLElement;
+    let enrollButton: HTMLElement;
+    let enrollmentDateInput: HTMLElement;
+    let selectLocationInput: HTMLElement;
+    let selectProgramInput: HTMLElement;
+    const inpatientWardUuid = 'b1a8b05e-3542-4037-bbd3-998ee9c40574';
+    const oncologyScreeningProgramUuid = '11b129ca-a5e7-4025-84bf-b92a173e20de';
+
+    beforeEach(() => {
+      renderProgramsForm();
+
+      cancelButton = screen.getByRole('button', { name: /cancel/i });
+      enrollButton = screen.getByRole('button', { name: /enroll/i });
+      enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
+      selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
+      selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
+    });
+
+    it('renders a success toast notification upon successfully recording a program enrollment', () => {
+      mockCreateProgramEnrollment.mockReturnValueOnce(of({ status: 201, statusText: 'Created' }));
+
+      fireEvent.change(selectProgramInput, {
+        target: { value: oncologyScreeningProgramUuid },
+      });
+      expect(screen.getByDisplayValue('Oncology Screening and Diagnosis')).toBeInTheDocument();
+
+      fireEvent.change(enrollmentDateInput, { target: { value: '2020-05-05' } });
+      expect(screen.getByDisplayValue(renderDate('2020-05-05'))).toBeInTheDocument();
+
+      fireEvent.change(selectLocationInput, {
+        target: { value: inpatientWardUuid },
+      });
+      expect(screen.getByDisplayValue('Inpatient Ward')).toBeInTheDocument();
+
+      expect(enrollButton).not.toBeDisabled();
+      fireEvent.click(enrollButton);
+
+      expect(mockCreateProgramEnrollment).toHaveBeenCalledTimes(1);
+      expect(mockCreateProgramEnrollment).toHaveBeenCalledWith(
+        expect.objectContaining({
+          dateCompleted: null,
+          // dateEnrolled: '2020-05-05',
+          location: inpatientWardUuid,
+          patient: mockPatient.id,
+          program: oncologyScreeningProgramUuid,
+        }),
+        new AbortController(),
+      );
+
+      expect(mockShowToast).toHaveBeenCalledTimes(1);
+      expect(mockShowToast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          description: 'Program enrollment saved successfully',
+          kind: 'success',
+        }),
+      );
+    });
+
+    it('renders an error notification if there was a problem recording a program enrollment', async () => {
+      const error = {
+        message: 'Internal Server Error',
+        response: {
+          status: 500,
+          statusText: 'Internal Server Error',
+        },
+      };
+
+      mockCreateProgramEnrollment.mockReturnValueOnce(throwError(error));
+
+      fireEvent.change(selectProgramInput, {
+        target: { value: oncologyScreeningProgramUuid },
+      });
+      expect(screen.getByDisplayValue('Oncology Screening and Diagnosis')).toBeInTheDocument();
+
+      fireEvent.change(enrollmentDateInput, { target: { value: '2020-05-05' } });
+      expect(screen.getByDisplayValue(renderDate('2020-05-05'))).toBeInTheDocument();
+
+      fireEvent.change(selectLocationInput, {
+        target: { value: inpatientWardUuid },
+      });
+      expect(screen.getByDisplayValue('Inpatient Ward')).toBeInTheDocument();
+
+      expect(enrollButton).not.toBeDisabled();
+      fireEvent.click(enrollButton);
+
+      expect(mockCreateErrorHandler).toHaveBeenCalledTimes(1);
+      expect(mockShowNotification).toHaveBeenCalledTimes(1);
+      expect(mockShowNotification).toHaveBeenCalledWith({
+        critical: true,
+        description: 'Internal Server Error',
+        kind: 'error',
+        title: 'Error saving program enrollment',
+      });
+    });
+  });
+});
+
+function renderProgramsForm() {
+  render(<ProgramsForm {...testProps} />);
+}
+
+function renderDate(time: string) {
+  return dayjs(time).format('YYYY-MM-DD');
+}

package/src/programs/programs-overview.component.tsx

@@ -1,13 +1,13 @@
-import React from "react";
-import dayjs from "dayjs";
-import ProgramsForm from "./programs-form.component";
-import EmptyState from "./empty-state/empty-state.component";
-import ErrorState from "./error-state/error-state.component";
-import Add16 from "@carbon/icons-react/es/add/16";
-import Button from "carbon-components-react/es/components/Button";
-import Pagination from "carbon-components-react/es/components/Pagination";
-import DataTableSkeleton from "carbon-components-react/es/components/DataTableSkeleton";
-import DataTable, {
+import React from 'react';
+import dayjs from 'dayjs';
+import Add16 from '@carbon/icons-react/es/add/16';
+import styles from './programs-overview.scss';
+import { attach } from '@openmrs/esm-framework';
+import {
+  DataTable,
+  Pagination,
+  DataTableSkeleton,
+  Button,
   Table,
   TableCell,
   TableContainer,
@@ -15,13 +15,11 @@ import DataTable, {
   TableHead,
   TableHeader,
   TableRow,
-} from "carbon-components-react/es/components/DataTable";
-import styles from "./programs-overview.scss";
-import { useTranslation } from "react-i18next";
-import { createErrorHandler } from "@openmrs/esm-framework";
-import { fetchActiveEnrollments } from "./programs.resource";
-import { openWorkspaceTab } from "./openWorkspaceTab";
-import { PatientProgram } from "../types";
+} from 'carbon-components-react';
+import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { useTranslation } from 'react-i18next';
+import { fetchActiveEnrollments } from './programs.resource';
+import { PatientProgram } from '../types';
 
 interface ProgramsOverviewProps {
   basePath: string;
@@ -36,78 +34,59 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ patientUuid }) => {
   const [firstRowIndex, setFirstRowIndex] = React.useState(0);
   const [currentPageSize, setCurrentPageSize] = React.useState(5);
 
-  const displayText = t("programs", "program enrollments");
-  const headerTitle = t("carePrograms", "Care Programs");
-  const previousPage = t("previousPage", "Previous page");
-  const nextPage = t("nextPage", "Next Page");
-  const itemPerPage = t("itemPerPage", "Item per page");
+  const displayText = t('programs', 'Program enrollments');
+  const headerTitle = t('carePrograms', 'Care Programs');
+  const previousPage = t('previousPage', 'Previous page');
+  const nextPage = t('nextPage', 'Next Page');
+  const itemsPerPage = t('itemsPerPage', 'Items per page');
 
   React.useEffect(() => {
     if (patientUuid) {
-      const sub = fetchActiveEnrollments(patientUuid).subscribe(
-        (programs) => setPrograms(programs),
-        (error) => {
-          setError(error);
-          createErrorHandler();
-        }
-      );
+      const sub = fetchActiveEnrollments(patientUuid).subscribe((programs) => setPrograms(programs), setError);
 
       return () => sub.unsubscribe();
     }
   }, [patientUuid]);
 
-  const launchProgramsForm = () => {
-    openWorkspaceTab(ProgramsForm, t("programsForm", "Programs form"));
-  };
+  const launchProgramsForm = React.useCallback(
+    () => attach('patient-chart-workspace-slot', 'programs-form-workspace'),
+    [],
+  );
 
   const headers = [
     {
-      key: "display",
-      header: t("activePrograms", "Active programs"),
+      key: 'display',
+      header: t('activePrograms', 'Active programs'),
     },
     {
-      key: "dateEnrolled",
-      header: t("dateEnrolled", "Date enrolled"),
+      key: 'dateEnrolled',
+      header: t('dateEnrolled', 'Date enrolled'),
     },
   ];
 
   const getRowItems = (rows: Array<PatientProgram>) => {
-    return rows
-      .slice(firstRowIndex, firstRowIndex + currentPageSize)
-      .map((row) => ({
-        id: row.uuid,
-        display: row.display,
-        dateEnrolled: dayjs(row.dateEnrolled).format("MMM-YYYY"),
-      }));
+    return rows.slice(firstRowIndex, firstRowIndex + currentPageSize).map((row) => ({
+      id: row.uuid,
+      display: row.display,
+      dateEnrolled: dayjs(row.dateEnrolled).format('MMM-YYYY'),
+    }));
   };
 
   const RenderPrograms = () => {
     if (programs.length) {
       const rows = getRowItems(programs);
       return (
-        <div>
+        <div className={styles.widgetCard}>
           <div className={styles.programsHeader}>
-            <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>
-              {headerTitle}
-            </h4>
-            <Button
-              kind="ghost"
-              renderIcon={Add16}
-              iconDescription="Add programs"
-              onClick={launchProgramsForm}
-            >
-              {t("add", "Add")}
+            <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+            <Button kind="ghost" renderIcon={Add16} iconDescription="Add programs" onClick={launchProgramsForm}>
+              {t('add', 'Add')}
             </Button>
           </div>
           <TableContainer>
-            <DataTable
-              rows={rows}
-              headers={headers}
-              isSortable={true}
-              size="short"
-            >
+            <DataTable rows={rows} headers={headers} isSortable={true} size="short">
               {({ rows, headers, getHeaderProps, getTableProps }) => (
-                <Table {...getTableProps()}>
+                <Table {...getTableProps()} useZebraStyles>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (
@@ -116,8 +95,7 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ patientUuid }) => {
                           {...getHeaderProps({
                             header,
                             isSortable: header.isSortable,
-                          })}
-                        >
+                          })}>
                           {header.header?.content ?? header.header}
                         </TableHeader>
                       ))}
@@ -127,9 +105,7 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ patientUuid }) => {
                     {rows.map((row) => (
                       <TableRow key={row.id}>
                         {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>
-                            {cell.value?.content ?? cell.value}
-                          </TableCell>
+                          <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                         ))}
                       </TableRow>
                     ))}
@@ -145,7 +121,7 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ patientUuid }) => {
               forwardText={nextPage}
               pageSize={currentPageSize}
               pageSizes={[5, 10, 15, 25]}
-              itemsPerPageText={itemPerPage}
+              itemsPerPageText={itemsPerPage}
               onChange={({ page, pageSize }) => {
                 if (pageSize !== currentPageSize) {
                   setCurrentPageSize(pageSize);
@@ -157,13 +133,7 @@ const ProgramsOverview: React.FC<ProgramsOverviewProps> = ({ patientUuid }) => {
         </div>
       );
     }
-    return (
-      <EmptyState
-        displayText={displayText}
-        headerTitle={headerTitle}
-        launchForm={launchProgramsForm}
-      />
-    );
+    return <EmptyState displayText={displayText} headerTitle={headerTitle} launchForm={launchProgramsForm} />;
   };
 
   return (

package/src/programs/programs-overview.scss

@@ -2,6 +2,10 @@
 @import "~carbon-components/src/globals/scss/vars";
 @import "~carbon-components/src/globals/scss/mixins";
 
+.widgetCard {
+  border: 1px solid $ui-03;
+}
+
 .programsHeader {
   display: flex;
   justify-content: space-between;

package/src/programs/programs-overview.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import ProgramsOverview from './programs-overview.component';
+import { of } from 'rxjs/internal/observable/of';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { mockEnrolledProgramsResponse } from '../../../../__mocks__/programs.mock';
+import * as mockProgramResource from './programs.resource';
+import { mockPatient } from '../../../../__mocks__/patient.mock';
+import { attach } from '@openmrs/esm-framework';
+import { throwError } from 'rxjs';
+
+const mockAttach = attach as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework/mock'),
+  attach: jest.fn(),
+}));
+
+describe('<ProgramsOverview />', () => {
+  const renderProgramOverview = () => {
+    spyOn(mockProgramResource, 'fetchActiveEnrollments').and.returnValue(of(mockEnrolledProgramsResponse));
+    render(<ProgramsOverview patientUuid={mockPatient.id} basePath={'/'} />);
+  };
+
+  const renderEmptyStateProgramOverview = () => {
+    spyOn(mockProgramResource, 'fetchActiveEnrollments').and.returnValue(of([]));
+    render(<ProgramsOverview patientUuid={mockPatient.id} basePath={'/'} />);
+  };
+
+  const renderErrorStateProgramOverview = () => {
+    spyOn(mockProgramResource, 'fetchActiveEnrollments').and.returnValue(throwError('loading error'));
+    render(<ProgramsOverview patientUuid={mockPatient.id} basePath={'/'} />);
+  };
+
+  it("should display the patient's program enrollments", async () => {
+    renderProgramOverview();
+    await screen.findByRole('heading', { name: /Care Programs/i });
+
+    expect(screen.getByText(/Care Programs/i)).toBeInTheDocument();
+    const addBtn = screen.getByRole('button', { name: 'Add' });
+    expect(addBtn).toBeInTheDocument();
+    expect(screen.getAllByText(/Active Programs/i)[0]).toBeInTheDocument();
+    expect(screen.getAllByText(/Date enrolled/i)[0]).toBeInTheDocument();
+    expect(screen.getAllByText(/HIV Care and Treatment/i)[0]).toBeInTheDocument();
+
+    // Clicking "Add" launches form tab
+    fireEvent.click(addBtn);
+    expect(mockAttach).toHaveBeenCalledWith('patient-chart-workspace-slot', 'programs-form-workspace');
+  });
+
+  it('renders an empty state view when conditions data is absent', async () => {
+    renderEmptyStateProgramOverview();
+
+    await screen.findByRole('heading', { name: /Care Programs/i });
+
+    expect(screen.getByText(/Care Programs/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no program enrollments to display for this patient/)).toBeInTheDocument();
+    expect(screen.getByText(/Record program enrollments/)).toBeInTheDocument();
+  });
+
+  it('render an error state when an error occurrs', () => {
+    renderErrorStateProgramOverview();
+    expect(screen.getByText(/Care Programs/i)).toBeInTheDocument();
+
+    expect(
+      screen.getByText(
+        /Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above./,
+      ),
+    ).toBeInTheDocument();
+  });
+});

package/src/programs/programs.component.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import Programs from './programs.component';
+import { mockPatient } from '../../../../__mocks__/patient.mock';
+
+describe('<ProgramsComponent />', () => {
+  it('renders without dying', () => {
+    render(
+      <BrowserRouter>
+        <Programs
+          patient={mockPatient}
+          patientUuid={mockPatient.id}
+          basePath={'patient/8673ee4f-e2ab-4077-ba55-4980f408773e/chart'}
+        />
+      </BrowserRouter>,
+    );
+
+    expect(screen.getByRole('heading', { name: /Care Programs/i })).toBeInTheDocument();
+  });
+});

package/src/programs/programs.component.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import ProgramsDetailedSummary from "./programs-detailed-summary.component";
-import ProgramRecord from "./program-record.component";
-import { Switch, Route, BrowserRouter } from "react-router-dom";
-import { ProgramsContext } from "./programs.context";
+import React from 'react';
+import ProgramsDetailedSummary from './programs-detailed-summary.component';
+import ProgramRecord from './program-record.component';
+import { Switch, Route, BrowserRouter } from 'react-router-dom';
+import { ProgramsContext } from './programs.context';
 
 interface ProgramsProps {
   basePath: string;
@@ -10,11 +10,7 @@ interface ProgramsProps {
   patientUuid: string;
 }
 
-export default function Programs({
-  basePath,
-  patient,
-  patientUuid,
-}: ProgramsProps) {
+export default function Programs({ basePath, patient, patientUuid }: ProgramsProps) {
   return (
     <ProgramsContext.Provider value={{ patientUuid, patient }}>
       <BrowserRouter basename={`${window.spaBase}${basePath}/programs`}>

package/src/programs/programs.context.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext } from 'react';
 
 export interface ProgramsContextShape {
   patientUuid: string;

package/src/programs/programs.resource.tsx

@@ -1,33 +1,39 @@
-import { openmrsObservableFetch, openmrsFetch } from "@openmrs/esm-framework";
-import { map } from "rxjs/operators";
-import { PatientProgram, Program, LocationData, SessionData } from "../types";
+import { openmrsObservableFetch } from '@openmrs/esm-framework';
+import { map } from 'rxjs/operators';
+import { LocationData, PatientProgram, Program } from '../types';
 
-export function fetchEnrolledPrograms(patientID: string) {
-  return openmrsObservableFetch<PatientProgram>(
-    `/ws/rest/v1/programenrollment?patient=${patientID}`
+export function fetchActiveEnrollments(patientID: string) {
+  return openmrsObservableFetch<{ results: Array<PatientProgram> }>(
+    `/ws/rest/v1/programenrollment?patient=${patientID}`,
   ).pipe(
     map(({ data }) =>
-      data["results"].sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1))
-    )
+      data.results.filter((res) => !res.dateCompleted).sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1)),
+    ),
   );
 }
 
-export function fetchActiveEnrollments(patientID: string) {
-  return openmrsObservableFetch<Array<PatientProgram>>(
-    `/ws/rest/v1/programenrollment?patient=${patientID}`
-  ).pipe(
-    map(({ data }) =>
-      data["results"]
-        .filter((res) => !res.dateCompleted)
-        .sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1))
-    )
-  );
+export function fetchAvailablePrograms() {
+  return openmrsObservableFetch<{ results: Array<Program> }>(
+    `/ws/rest/v1/program?v=custom:(uuid,display,allWorkflows,concept:(uuid,display))`,
+  ).pipe(map(({ data }) => data.results));
+}
+
+export function fetchEnrolledPrograms(patientID: string) {
+  return openmrsObservableFetch<{ results: Array<PatientProgram> }>(
+    `/ws/rest/v1/programenrollment?patient=${patientID}`,
+  ).pipe(map(({ data }) => data.results.sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1))));
 }
 
 export function getPatientProgramByUuid(programUuid: string) {
-  return openmrsObservableFetch<PatientProgram>(
-    `/ws/rest/v1/programenrollment/${programUuid}`
-  ).pipe(map(({ data }) => data));
+  return openmrsObservableFetch<PatientProgram>(`/ws/rest/v1/programenrollment/${programUuid}`).pipe(
+    map(({ data }) => data),
+  );
+}
+
+export function fetchLocations() {
+  return openmrsObservableFetch<{ results: Array<LocationData> }>(`/ws/rest/v1/location?v=custom:(uuid,display)`).pipe(
+    map(({ data }) => data.results),
+  );
 }
 
 export function createProgramEnrollment(payload, abortController) {
@@ -36,9 +42,9 @@ export function createProgramEnrollment(payload, abortController) {
   }
   const { program, patient, dateEnrolled, dateCompleted, location } = payload;
   return openmrsObservableFetch(`/ws/rest/v1/programenrollment`, {
-    method: "POST",
+    method: 'POST',
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
     body: { program, patient, dateEnrolled, dateCompleted, location },
     signal: abortController.signal,
@@ -51,29 +57,11 @@ export function updateProgramEnrollment(payload, abortController) {
   }
   const { program, dateEnrolled, dateCompleted, location } = payload;
   return openmrsObservableFetch(`/ws/rest/v1/programenrollment/${program}`, {
-    method: "POST",
+    method: 'POST',
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
     body: { dateEnrolled, dateCompleted, location },
     signal: abortController.signal,
   });
 }
-
-export function fetchPrograms() {
-  return openmrsObservableFetch<Array<Program>>(
-    `/ws/rest/v1/program?v=custom:(uuid,display,allWorkflows,concept:(uuid,display))`
-  ).pipe(map(({ data }) => data["results"]));
-}
-
-export function fetchLocations() {
-  return openmrsObservableFetch<Array<LocationData>>(
-    `/ws/rest/v1/location?v=custom:(uuid,display)`
-  ).pipe(map(({ data }) => data["results"]));
-}
-
-export function getSession(abortController: AbortController) {
-  return openmrsFetch<SessionData>(`/ws/rest/v1/appui/session`, {
-    signal: abortController.signal,
-  });
-}