@kenyaemr/esm-patient-list-management-app 8.1.1-pre.114 → 8.1.1-pre.116

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"patient-lists-dashboard-link","component":"patientListDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"patient-lists","slot":"patient-lists-dashboard-slot","title":"Patient lists"}},{"component":"root","name":"patient-lists-dashboard","slot":"patient-lists-dashboard-slot"},{"name":"list-details-table","component":"listDetailsTable"},{"name":"add-patient-to-patient-list-modal","component":"addPatientToListModal"},{"name":"add-patient-to-patient-list-button","slot":"patient-actions-slot","component":"addPatientToPatientListMenuItem"}],"version":"8.1.1-pre.114"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"patient-lists-dashboard-link","component":"patientListDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"patient-lists","slot":"patient-lists-dashboard-slot","title":"Patient lists"}},{"component":"root","name":"patient-lists-dashboard","slot":"patient-lists-dashboard-slot"},{"name":"list-details-table","component":"listDetailsTable"},{"name":"add-patient-to-patient-list-button","slot":"patient-actions-slot","component":"addPatientToPatientListMenuItem"}],"modals":[{"name":"add-patient-to-patient-list-modal","component":"addPatientToListModal"}],"version":"8.1.1-pre.116"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-list-management-app",
-  "version": "8.1.1-pre.114",
+  "version": "8.1.1-pre.116",
   "description": "Microfrontend for managing patient lists in O3",
   "browser": "dist/kenyaemr-esm-patient-list-management-app.js",
   "main": "src/index.ts",

package/src/add-patient/add-patient.component.tsx

@@ -1,21 +1,11 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
+import { mutate } from 'swr';
 import { useTranslation } from 'react-i18next';
-import type { TFunction } from 'i18next';
-import useSWR from 'swr';
-import { Button, Checkbox, Pagination, Search, CheckboxSkeleton } from '@carbon/react';
-import {
-  getDynamicOfflineDataEntries,
-  putDynamicOfflineData,
-  syncDynamicOfflineData,
-  showSnackbar,
-  toOmrsIsoString,
-  usePagination,
-  navigate,
-  useConfig,
-} from '@openmrs/esm-framework';
-import { addPatientToList, getAllPatientLists, getPatientListIdsForPatient } from '../api/api-remote';
-import { type ConfigSchema } from '../config-schema';
+import { Button, Checkbox, CheckboxSkeleton, Pagination, Search, Tile } from '@carbon/react';
+import { navigate, restBaseUrl, showSnackbar, usePagination } from '@openmrs/esm-framework';
+import { type AddablePatientListViewModel } from '../api/types';
+import { useAddablePatientLists } from '../api/api-remote';
 import styles from './add-patient.scss';
 
 interface AddPatientProps {
@@ -23,26 +13,19 @@ interface AddPatientProps {
   patientUuid: string;
 }
 
-interface AddablePatientListViewModel {
-  addPatient(): Promise<void>;
-  displayName: string;
-  checked?: boolean;
-  id: string;
-}
-
 const AddPatient: React.FC<AddPatientProps> = ({ closeModal, patientUuid }) => {
   const { t } = useTranslation();
+  const { data, isLoading } = useAddablePatientLists(patientUuid);
   const [searchValue, setSearchValue] = useState('');
   const [selected, setSelected] = useState<Array<string>>([]);
-  const { data, isLoading } = useAddablePatientLists(patientUuid);
 
-  const handleCreateNewList = () => {
+  const handleCreateNewList = useCallback(() => {
     navigate({
       to: window.getOpenmrsSpaBase() + 'home/patient-lists?new_cohort=true',
     });
 
     closeModal();
-  };
+  }, [closeModal]);
 
   const handleSelectionChanged = useCallback((patientListId: string, listSelected: boolean) => {
     if (listSelected) {
@@ -52,34 +35,39 @@ const AddPatient: React.FC<AddPatientProps> = ({ closeModal, patientUuid }) => {
     }
   }, []);
 
-  const handleSubmit = useCallback(() => {
-    for (const selectedId of selected) {
-      const patientList = data.find((list) => list.id === selectedId);
-      if (!patientList) {
-        continue;
-      }
+  const mutateCohortMembers = useCallback(() => {
+    const key = `${restBaseUrl}/cohortm/cohortmember?patient=${patientUuid}&v=custom:(uuid,patient:ref,cohort:(uuid,name,startDate,endDate))`;
 
-      patientList
-        .addPatient()
-        .then(() =>
-          showSnackbar({
-            title: t('successfullyAdded', 'Successfully added'),
-            kind: 'success',
-            isLowContrast: true,
-            subtitle: `${t('successAddPatientToList', 'Patient added to list')}: ${patientList.displayName}`,
-          }),
-        )
-        .catch(() =>
-          showSnackbar({
-            title: t('error', 'Error'),
-            kind: 'error',
-            subtitle: `${t('errorAddPatientToList', 'Patient not added to list')}: ${patientList.displayName}`,
-          }),
-        );
-    }
+    return mutate((k) => typeof k === 'string' && k === key);
+  }, []);
 
-    closeModal();
-  }, [data, selected, closeModal, t]);
+  const handleSubmit = useCallback(() => {
+    Promise.all(
+      selected.map((selectedId) => {
+        const patientList = data.find((list) => list.id === selectedId);
+        if (!patientList) return Promise.resolve();
+
+        return patientList
+          .addPatient()
+          .then(async () => {
+            await mutateCohortMembers();
+            showSnackbar({
+              title: t('successfullyAdded', 'Successfully added'),
+              kind: 'success',
+              isLowContrast: true,
+              subtitle: `${t('successAddPatientToList', 'Patient added to list')}: ${patientList.displayName}`,
+            });
+          })
+          .catch(() => {
+            showSnackbar({
+              title: t('error', 'Error'),
+              kind: 'error',
+              subtitle: `${t('errorAddPatientToList', 'Patient not added to list')}: ${patientList.displayName}`,
+            });
+          });
+      }),
+    ).finally(closeModal);
+  }, [data, selected, closeModal, t, patientUuid]);
 
   const searchResults = useMemo(() => {
     if (!data) {
@@ -94,7 +82,7 @@ const AddPatient: React.FC<AddPatientProps> = ({ closeModal, patientUuid }) => {
     return data;
   }, [searchValue, data]);
 
-  const { results, goTo, currentPage, paginated } = usePagination(searchResults, 5);
+  const { results, goTo, currentPage, paginated } = usePagination<AddablePatientListViewModel>(searchResults, 5);
 
   useEffect(() => {
     if (currentPage !== 1) {
@@ -105,41 +93,54 @@ const AddPatient: React.FC<AddPatientProps> = ({ closeModal, patientUuid }) => {
   return (
     <div className={styles.modalContent}>
       <div className={styles.modalHeader}>
-        <h1 className={styles.productiveHeading03}>{t('addPatientToList', 'Add patient to list')}</h1>
-        <h3 className={styles.bodyLong01} style={{ margin: '1rem 0' }}>
+        <h1 className={styles.header}>{t('addPatientToList', 'Add patient to list')}</h1>
+        <h3 className={styles.subheader}>
           {t('searchForAListToAddThisPatientTo', 'Search for a list to add this patient to.')}
         </h3>
       </div>
-      <div style={{ marginBottom: '0.875rem' }}>
-        <Search
-          style={{ backgroundColor: 'white', borderBottom: '1px solid #e0e0e0' }}
-          labelText={t('searchForList', 'Search for a list')}
-          placeholder="Filter list"
-          onChange={({ target }) => {
-            setSearchValue(target.value);
-          }}
-          value={searchValue}
-        />
-      </div>
+      <Search
+        className={styles.search}
+        labelText={t('searchForList', 'Search for a list')}
+        placeholder={t('searchForList', 'Search for a list')}
+        onChange={({ target }) => {
+          setSearchValue(target.value);
+        }}
+        value={searchValue}
+      />
       <div className={styles.patientListList}>
         <fieldset className="cds--fieldset">
-          <p className="cds--label">{t('patientLists', 'Patient lists')}</p>
           {!isLoading && results ? (
             results.length > 0 ? (
-              results.map((patientList) => (
-                <div key={patientList.id} className={styles.checkbox}>
-                  <Checkbox
-                    key={patientList.id}
-                    onChange={(e) => handleSelectionChanged(patientList.id, e.target.checked)}
-                    checked={patientList.checked || selected.includes(patientList.id)}
-                    disabled={patientList.checked}
-                    labelText={patientList.displayName}
-                    id={patientList.id}
-                  />
-                </div>
-              ))
+              <>
+                <p className="cds--label">{t('patientLists', 'Patient lists')}</p>
+                {results.map((patientList) => (
+                  <div key={patientList.id} className={styles.checkbox}>
+                    <Checkbox
+                      key={patientList.id}
+                      onChange={(e) => handleSelectionChanged(patientList.id, e.target.checked)}
+                      checked={patientList.checked || selected.includes(patientList.id)}
+                      disabled={patientList.checked}
+                      labelText={patientList.displayName}
+                      id={patientList.id}
+                    />
+                  </div>
+                ))}
+              </>
             ) : (
-              <p className={styles.bodyLong01}>{t('noPatientListFound', 'No patient list found')}</p>
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>{t('noMatchingListsFound', 'No matching lists found')}</p>
+                    <p className={styles.actionText}>
+                      <span>{t('trySearchingForADifferentList', 'Try searching for a different list')}</span>
+                      <span>&mdash; or &mdash;</span>
+                      <Button kind="ghost" size="sm" onClick={handleCreateNewList}>
+                        {t('createNewPatientList', 'Create new patient list')}
+                      </Button>
+                    </p>
+                  </div>
+                </Tile>
+              </div>
             )
           ) : (
             <>
@@ -180,7 +181,7 @@ const AddPatient: React.FC<AddPatientProps> = ({ closeModal, patientUuid }) => {
         </div>
       )}
       <div className={styles.buttonSet}>
-        <Button kind="ghost" size="xl" onClick={handleCreateNewList}>
+        <Button className={styles.createButton} kind="ghost" size="xl" onClick={handleCreateNewList}>
           {t('createNewPatientList', 'Create new patient list')}
         </Button>
         <div>
@@ -196,76 +197,4 @@ const AddPatient: React.FC<AddPatientProps> = ({ closeModal, patientUuid }) => {
   );
 };
 
-// This entire modal is a little bit special since it not only displays the "real" patient lists (i.e. data from
-// the cohorts/backend), but also a fake patient list which doesn't really exist in the backend:
-// The offline patient list.
-// When a patient is added to the offline list, that patient should become available offline, i.e.
-// a dynamic offline data entry must be created.
-// This is why the following abstracts away the differences between the real and the fake patient lists.
-// The component doesn't really care about which is which - the only thing that matters is that the
-// data can be fetched and that there is an "add patient" function.
-
-export function useAddablePatientLists(patientUuid: string) {
-  const { t } = useTranslation();
-  const config = useConfig() as ConfigSchema;
-  return useSWR(['addablePatientLists', patientUuid], async () => {
-    // Using Promise.allSettled instead of Promise.all here because some distros might not have the
-    // cohort module installed, leading to the real patient list call failing.
-    // In that case we still want to show fake lists and *not* error out here.
-    const [fakeLists, realLists] = await Promise.allSettled([
-      findFakePatientListsWithoutPatient(patientUuid, t),
-      findRealPatientListsWithoutPatient(patientUuid, config.myListCohortTypeUUID, config.systemListCohortTypeUUID),
-    ]);
-
-    return [
-      ...(fakeLists.status === 'fulfilled' ? fakeLists.value : []),
-      ...(realLists.status === 'fulfilled' ? realLists.value : []),
-    ];
-  });
-}
-
-async function findRealPatientListsWithoutPatient(
-  patientUuid: string,
-  myListCohortUUID,
-  systemListCohortType,
-): Promise<Array<AddablePatientListViewModel>> {
-  const [allLists, listsIdsOfThisPatient] = await Promise.all([
-    getAllPatientLists({}, myListCohortUUID, systemListCohortType),
-    getPatientListIdsForPatient(patientUuid),
-  ]);
-
-  return allLists.map((list) => ({
-    id: list.id,
-    displayName: list.display,
-    checked: listsIdsOfThisPatient.includes(list.id),
-    async addPatient() {
-      await addPatientToList({
-        cohort: list.id,
-        patient: patientUuid,
-        startDate: toOmrsIsoString(new Date()),
-      });
-    },
-  }));
-}
-
-async function findFakePatientListsWithoutPatient(
-  patientUuid: string,
-  t: TFunction,
-): Promise<Array<AddablePatientListViewModel>> {
-  const offlinePatients = await getDynamicOfflineDataEntries('patient');
-  const isPatientOnOfflineList = offlinePatients.some((x) => x.identifier === patientUuid);
-  return isPatientOnOfflineList
-    ? []
-    : [
-        {
-          id: 'fake-offline-patient-list',
-          displayName: t('offlinePatients', 'Offline patients'),
-          async addPatient() {
-            await putDynamicOfflineData('patient', patientUuid);
-            await syncDynamicOfflineData('patient', patientUuid);
-          },
-        },
-      ];
-}
-
 export default AddPatient;

package/src/add-patient/add-patient.scss

@@ -1,9 +1,11 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .modalContent {
   width: 100%;
-  background-color: #f4f4f4;
+  background-color: $ui-02;
 }
 
 .modalHeader {
@@ -18,6 +20,16 @@
   padding-bottom: 0.875rem;
 }
 
+.header {
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-05 0;
+}
+
+.subheader {
+  @include type.type-style('body-01');
+  margin: layout.$spacing-05 0;
+}
+
 .pagination {
   width: 100%;
   overflow: hidden;
@@ -30,6 +42,11 @@
   position: relative;
 }
 
+.search {
+  background-color: colors.$white;
+  margin-bottom: 0.875rem;
+}
+
 .itemsCountDisplay {
   position: absolute;
   top: 0;
@@ -37,7 +54,7 @@
   height: layout.$spacing-09;
   display: flex;
   align-items: center;
-  color: #525252;
+  color: colors.$gray-70;
 }
 
 .pagination > div:first-child {
@@ -47,8 +64,22 @@
 
 .buttonSet {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  .createButton {
+    flex: 2;
+  }
+
+  div {
+    flex: 1;
+    display: flex;
+
+    > button {
+      flex: 1;
+    }
+  }
 }
 
 .productiveHeading03 {
@@ -58,3 +89,41 @@
 .bodyLong01 {
   @include type.type-style('body-01');
 }
+
+.tileContainer {
+  background-color: $ui-02;
+  padding: layout.$spacing-09 0;
+  margin-bottom: layout.$spacing-05;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.actionText {
+  @include type.type-style('body-01');
+  color: $text-02;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: layout.$spacing-05;
+}

package/src/add-patient/add-patient.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { navigate } from '@openmrs/esm-framework';
+import { useAddablePatientLists } from '../api/api-remote';
+import { mockPatient } from '__mocks__';
+import AddPatient from './add-patient.component';
+
+const mockNavigate = jest.mocked(navigate);
+const mockUseAddablePatientLists = jest.mocked(useAddablePatientLists);
+const mockCloseModal = jest.fn();
+
+jest.mock('../api/api-remote', () => ({
+  useAddablePatientLists: jest.fn(),
+}));
+
+describe('AddPatient', () => {
+  beforeEach(() => {
+    mockUseAddablePatientLists.mockReturnValue({
+      data: [
+        { id: 'list1', displayName: 'List 1', addPatient: jest.fn() },
+        { id: 'list2', displayName: 'List 2', addPatient: jest.fn() },
+      ],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+      isValidating: false,
+    });
+  });
+
+  it('renders the Add Patient to List modal', () => {
+    render(<AddPatient closeModal={mockCloseModal} patientUuid={mockPatient.uuid} />);
+
+    expect(screen.getByRole('heading', { name: /add patient to list/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /search for a list to add this patient to/i })).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: /search for a list/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /clear search input/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /create new patient list/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add to list/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /list 1/i })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /list 2/i })).toBeInTheDocument();
+  });
+
+  it('allows selecting and deselecting patient lists', async () => {
+    const user = userEvent.setup();
+    render(<AddPatient closeModal={mockCloseModal} patientUuid={mockPatient.uuid} />);
+
+    const checkbox1 = screen.getByLabelText('List 1');
+    const checkbox2 = screen.getByLabelText('List 2');
+
+    await user.click(checkbox1);
+    expect(checkbox1).toBeChecked();
+
+    await user.click(checkbox2);
+    expect(checkbox2).toBeChecked();
+
+    await user.click(checkbox1);
+    expect(checkbox1).not.toBeChecked();
+  });
+
+  it('filters patient lists based on search input', async () => {
+    const user = userEvent.setup();
+    render(<AddPatient closeModal={mockCloseModal} patientUuid={mockPatient.uuid} />);
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a list/i });
+    await user.type(searchInput, 'Bananarama');
+    expect(screen.getByText(/no matching lists found/i)).toBeInTheDocument();
+    expect(screen.getByText(/try searching for a different list/i)).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { name: /create new patient list/i })).toHaveLength(2);
+
+    await user.clear(searchInput);
+    await user.type(searchInput, 'List 1');
+
+    expect(screen.getByText('List 1')).toBeInTheDocument();
+    expect(screen.queryByText('List 2')).not.toBeInTheDocument();
+  });
+
+  it('clicking the "Create new list" button opens the create list form', async () => {
+    const user = userEvent.setup();
+    render(<AddPatient closeModal={mockCloseModal} patientUuid={mockPatient.uuid} />);
+
+    const createNewListButton = screen.getByRole('button', { name: /create new patient list/i });
+    await user.click(createNewListButton);
+
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: window.getOpenmrsSpaBase() + 'home/patient-lists?new_cohort=true',
+    });
+  });
+
+  it('clicking the "Cancel" button closes the modal', async () => {
+    const user = userEvent.setup();
+    render(<AddPatient closeModal={mockCloseModal} patientUuid={mockPatient.uuid} />);
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+
+    expect(mockCloseModal).toHaveBeenCalled();
+  });
+});

package/src/add-patient-to-patient-list-menu-item.component.tsx

@@ -22,6 +22,7 @@ const AddPatientToPatientListMenuItem: React.FC<AddPastVisitOverflowMenuItemProp
     const dispose = showModal('add-patient-to-patient-list-modal', {
       closeModal: () => dispose(),
       patientUuid,
+      size: 'sm',
     });
     closeOverflowMenu();
   }, [patientUuid]);

package/src/add-patient-to-patient-list-menu-item.test.tsx

@@ -26,6 +26,10 @@ describe('AddPatientToPatientListMenuItem', () => {
 
     await user.click(button);
 
-    expect(mockShowModal).toHaveBeenCalledWith('add-patient-to-patient-list-modal', expect.any(Object));
+    expect(mockShowModal).toHaveBeenCalledWith('add-patient-to-patient-list-modal', {
+      closeModal: expect.any(Function),
+      size: 'sm',
+      patientUuid: mockPatient.uuid,
+    });
   });
 });

package/src/api/api-remote.ts

@@ -1,6 +1,22 @@
-import { type LoggedInUser, openmrsFetch, refetchCurrentUser, restBaseUrl, fhirBaseUrl } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { type TFunction } from 'i18next';
+import useSWR from 'swr';
+import {
+  type LoggedInUser,
+  openmrsFetch,
+  refetchCurrentUser,
+  restBaseUrl,
+  fhirBaseUrl,
+  getDynamicOfflineDataEntries,
+  syncDynamicOfflineData,
+  putDynamicOfflineData,
+  toOmrsIsoString,
+  useConfig,
+} from '@openmrs/esm-framework';
+import { type ConfigSchema } from '../config-schema';
 import {
   type AddPatientData,
+  type AddablePatientListViewModel,
   type CohortResponse,
   type NewCohortData,
   type NewCohortDataPayload,
@@ -9,8 +25,8 @@ import {
   type OpenmrsCohortRef,
   type PatientListFilter,
   type PatientListMember,
-  PatientListType,
   type PatientListUpdate,
+  PatientListType,
 } from './types';
 
 export const cohortUrl = `${restBaseUrl}/cohortm`;
@@ -209,3 +225,75 @@ export async function getPatientListName(patientListUuid: string) {
     console.error('Error resolving patient list name: ', error);
   }
 }
+
+export async function findRealPatientListsWithoutPatient(
+  patientUuid: string,
+  myListCohortUUID: string,
+  systemListCohortType: string,
+): Promise<Array<AddablePatientListViewModel>> {
+  const [allLists, listsIdsOfThisPatient] = await Promise.all([
+    getAllPatientLists({}, myListCohortUUID, systemListCohortType),
+    getPatientListIdsForPatient(patientUuid),
+  ]);
+
+  return allLists.map((list) => ({
+    id: list.id,
+    displayName: list.display,
+    checked: listsIdsOfThisPatient.includes(list.id),
+    async addPatient() {
+      await addPatientToList({
+        cohort: list.id,
+        patient: patientUuid,
+        startDate: toOmrsIsoString(new Date()),
+      });
+    },
+  }));
+}
+
+export async function findFakePatientListsWithoutPatient(
+  patientUuid: string,
+  t: TFunction,
+): Promise<Array<AddablePatientListViewModel>> {
+  const offlinePatients = await getDynamicOfflineDataEntries('patient');
+  const isPatientOnOfflineList = offlinePatients.some((x) => x.identifier === patientUuid);
+  return isPatientOnOfflineList
+    ? []
+    : [
+        {
+          id: 'fake-offline-patient-list',
+          displayName: t('offlinePatients', 'Offline patients'),
+          async addPatient() {
+            await putDynamicOfflineData('patient', patientUuid);
+            await syncDynamicOfflineData('patient', patientUuid);
+          },
+        },
+      ];
+}
+
+// This entire model is a little bit special since it not only displays the "real" patient lists (i.e. data from
+// the cohorts/backend), but also a fake patient list which doesn't really exist in the backend:
+// The offline patient list.
+// When a patient is added to the offline list, that patient should become available offline, i.e.
+// a dynamic offline data entry must be created.
+// This is why the following abstracts away the differences between the real and the fake patient lists.
+// The component doesn't really care about which is which - the only thing that matters is that the
+// data can be fetched and that there is an "add patient" function.
+
+export function useAddablePatientLists(patientUuid: string) {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigSchema>();
+  return useSWR(['addablePatientLists', patientUuid], async () => {
+    // Using Promise.allSettled instead of Promise.all here because some distros might not have the
+    // cohort module installed, leading to the real patient list call failing.
+    // In that case we still want to show fake lists and *not* error out here.
+    const [fakeLists, realLists] = await Promise.allSettled([
+      findFakePatientListsWithoutPatient(patientUuid, t),
+      findRealPatientListsWithoutPatient(patientUuid, config.myListCohortTypeUUID, config.systemListCohortTypeUUID),
+    ]);
+
+    return [
+      ...(fakeLists.status === 'fulfilled' ? fakeLists.value : []),
+      ...(realLists.status === 'fulfilled' ? realLists.value : []),
+    ];
+  });
+}

package/src/api/types.ts

@@ -7,6 +7,13 @@ export enum PatientListType {
   ALL = 'All',
 }
 
+export interface AddablePatientListViewModel {
+  addPatient(): Promise<void>;
+  displayName: string;
+  checked?: boolean;
+  id: string;
+}
+
 export interface PatientList {
   id: string;
   display: string;