Introduce patient chart store for handling patient chart related state

packages/esm-patient-chart-app/src/patient-chart/patient-chart.component.tsx

@@ -17,6 +17,7 @@ import Loader from '../loader/loader.component';
 import styles from './patient-chart.scss';
 import VisitHeader from '../visit-header/visit-header.component';
 import SideMenuPanel from '../side-nav/side-menu.component';
+import { getPatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 const PatientChart: React.FC = () => {
   const { patientUuid, view: encodedView } = useParams();
@@ -41,6 +42,17 @@ const PatientChart: React.FC = () => {
     };
   }, [patientUuid]);
 
+  useEffect(() => {
+    getPatientChartStore().setState({
+      patientUuid,
+    });
+    return () => {
+      getPatientChartStore().setState({
+        patientUuid: null,
+      });
+    };
+  }, [patientUuid]);
+
   const leftNavBasePath = useMemo(() => spaBasePath.replace(':patientUuid', patientUuid), [patientUuid]);
   useEffect(() => {
     setLeftNav({ name: 'patient-chart-dashboard-slot', basePath: leftNavBasePath });

packages/esm-patient-common-lib/src/get-patient-uuid-from-url.ts

@@ -1,4 +1,7 @@
+import { getPatientChartStore } from './store/patient-chart-store';
+
 export function getPatientUuidFromUrl(): string {
   const match = /\/patient\/([a-zA-Z0-9\-]+)\/?/.exec(location.pathname);
-  return match && match[1];
+  const patientUuidFromUrl = match && match[1];
+  return patientUuidFromUrl || getPatientChartStore().getState().patientUuid;
 }

packages/esm-patient-common-lib/src/index.ts

@@ -20,3 +20,4 @@ export * from './types';
 export * from './useAllowedFileExtensions';
 export * from './useSystemVisitSetting';
 export * from './workspaces';
+export * from './store/patient-chart-store';

packages/esm-patient-common-lib/src/store/patient-chart-store.ts

@@ -0,0 +1,19 @@
+import { createGlobalStore, useStore } from '@openmrs/esm-framework';
+
+export interface PatientChartStore {
+  patientUuid: string;
+}
+
+const patientChartStoreName = 'patient-chart-global-store';
+
+const patientChartStore = createGlobalStore<PatientChartStore>(patientChartStoreName, {
+  patientUuid: '',
+});
+
+export function getPatientChartStore() {
+  return patientChartStore;
+}
+
+export function usePatientChartStore() {
+  return useStore(patientChartStore);
+}

packages/esm-patient-common-lib/src/workspaces.ts

@@ -9,6 +9,7 @@ import { useSystemVisitSetting } from './useSystemVisitSetting';
 import { useVisitOrOfflineVisit } from './offline/visit';
 import { useCallback } from 'react';
 import { launchStartVisitPrompt } from './launchStartVisitPrompt';
+import { usePatientChartStore } from './store/patient-chart-store';
 
 export interface DefaultPatientWorkspaceProps extends DefaultWorkspaceProps {
   patientUuid: string;
@@ -42,7 +43,7 @@ export function launchPatientChartWithWorkspaceOpen({
 }
 
 export function useLaunchWorkspaceRequiringVisit<T extends object>(workspaceName: string) {
-  const { patientUuid } = usePatient();
+  const { patientUuid } = usePatientChartStore();
   const { systemVisitEnabled } = useSystemVisitSetting();
   const { currentVisit } = useVisitOrOfflineVisit(patientUuid);
 

packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx

@@ -51,6 +51,7 @@ import type {
 } from '../types';
 import { useRequireOutpatientQuantity } from '../api';
 import styles from './drug-order-form.scss';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 export interface DrugOrderFormProps {
   initialOrderBasketItem: DrugOrderBasketItem;
@@ -354,7 +355,8 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
   }, []);
 
   const [showStickyMedicationHeader, setShowMedicationHeader] = useState(false);
-  const { patient, isLoading: isLoadingPatientDetails } = usePatient();
+  const { patientUuid } = usePatientChartStore();
+  const { patient, isLoading: isLoadingPatientDetails } = usePatient(patientUuid);
   const patientName = patient ? getPatientName(patient) : '';
   const { maxDispenseDurationInDays } = useConfig<ConfigObject>();
 

packages/esm-patient-medications-app/src/add-drug-order/drug-search/order-basket-search-results.component.tsx

@@ -24,6 +24,7 @@ import {
 } from './drug-search.resource';
 import type { DrugOrderBasketItem } from '../../types';
 import styles from './order-basket-search-results.scss';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 export interface OrderBasketSearchResultsProps {
   searchTerm: string;
@@ -114,8 +115,8 @@ export default function OrderBasketSearchResults({
 const DrugSearchResultItem: React.FC<DrugSearchResultItemProps> = ({ drug, openOrderForm }) => {
   const isTablet = useLayoutType() === 'tablet';
   const { orders, setOrders } = useOrderBasket<DrugOrderBasketItem>('medications', prepMedicationOrderPostData);
-  const patient = usePatient();
-  const { data: activeOrders, isLoading: isLoadingActiveOrders } = usePatientOrders(patient.patientUuid, 'ACTIVE');
+  const { patientUuid } = usePatientChartStore();
+  const { data: activeOrders, isLoading: isLoadingActiveOrders } = usePatientOrders(patientUuid, 'ACTIVE');
   const drugAlreadyInBasket = useMemo(
     () => orders?.some((order) => ordersEqual(order, getTemplateOrderBasketItem(drug))),
     [orders, drug],

packages/esm-patient-tests-app/src/lab-orders/add-lab-order/add-lab-order.workspace.tsx

@@ -17,6 +17,7 @@ import {
   type OrderBasketItem,
   type LabOrderBasketItem,
   launchPatientWorkspace,
+  usePatientChartStore,
 } from '@openmrs/esm-patient-common-lib';
 import { LabOrderForm } from './lab-order-form.component';
 import { TestTypeSearch } from './test-type-search.component';
@@ -37,7 +38,8 @@ export default function AddLabOrderWorkspace({
 }: AddLabOrderWorkspace) {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
-  const { patient, isLoading: isLoadingPatient, patientUuid } = usePatient();
+  const { patientUuid } = usePatientChartStore();
+  const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
   const [currentLabOrder, setCurrentLabOrder] = useState(initialOrder as LabOrderBasketItem);
 
   const patientName = patient ? getPatientName(patient) : '';

packages/esm-patient-tests-app/src/test-results/grouped-timeline/useObstreeData.ts

@@ -3,6 +3,7 @@ import useSWR from 'swr';
 import useSWRInfinite from 'swr/infinite';
 import { usePatient, openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
 import { assessValue, exist } from '../loadPatientTestData/helpers';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 export const getName = (prefix: string | undefined, name: string) => {
   return prefix ? `${prefix}-${name}` : name;
@@ -43,7 +44,7 @@ const augmentObstreeData = (node: ObsTreeNode, prefix: string | undefined) => {
 };
 
 const useGetObstreeData = (conceptUuid: string) => {
-  const { patientUuid } = usePatient();
+  const { patientUuid } = usePatientChartStore();
   const response = useSWR<FetchResponse<ObsTreeNode>, Error>(
     `${restBaseUrl}/obstree?patient=${patientUuid}&concept=${conceptUuid}`,
     openmrsFetch,
@@ -65,7 +66,7 @@ const useGetObstreeData = (conceptUuid: string) => {
 };
 
 const useGetManyObstreeData = (uuidArray: Array<string>) => {
-  const { patientUuid } = usePatient();
+  const { patientUuid } = usePatientChartStore();
   const getObstreeUrl = (index: number) => {
     if (index < uuidArray.length && patientUuid) {
       return `${restBaseUrl}/obstree?patient=${patientUuid}&concept=${uuidArray[index]}`;