fix subscribe to store updates

openmrs · Jul 18, 2024 · d9525e4 · d9525e4
1 parent c688dee
commit d9525e4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/packages/esm-ward-app/src/store.ts b/packages/esm-ward-app/src/store.ts
@@ -1,9 +1,9 @@
 import { createGlobalStore, getGlobalStore } from '@openmrs/esm-framework';
 import { type WardPatientCardProps } from './types';
 
-type ActiveBedSelection = WardPatientCardProps;
+export type ActiveBedSelection = WardPatientCardProps;
 
-interface WardStoreState {
+export interface WardStoreState {
   activeBedSelection: ActiveBedSelection | null;
 }
 

diff --git a/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.scss b/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.scss
@@ -45,7 +45,15 @@
 }
 
 .activeWardPatientCardButton {
-  outline: 2px solid $interactive-01;
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    cursor: pointer;
+    border: 2px solid $interactive-01;
+    transition: border-color 200ms;
+  }
 }
 
 .wardPatientCardRow {

diff --git a/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.tsx b/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.tsx
@@ -1,19 +1,26 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { type WardPatientCardProps } from '../types';
 import { usePatientCardRows } from './ward-patient-card-row.resources';
 import styles from './ward-patient-card.scss';
 import { getPatientName, launchWorkspace } from '@openmrs/esm-framework';
-import { getWardStore } from '../store';
+import { type ActiveBedSelection, getWardStore, type WardStoreState } from '../store';
 import classNames from 'classnames';
 
-const spaRoot = window['getOpenmrsSpaBase'];
-
 const WardPatientCard: React.FC<WardPatientCardProps> = (props) => {
   const wardStore = getWardStore();
-  const activeBedSelection = wardStore.getState().activeBedSelection;
   const { locationUuid } = useParams();
   const patientCardRows = usePatientCardRows(locationUuid);
+  const [activeBedSelection, setActiveBedSelection] = useState<ActiveBedSelection | null>(null);
+
+  const updateActiveBedSelection = useCallback((state: WardStoreState) => {
+    setActiveBedSelection(state.activeBedSelection);
+  }, []);
+
+  useEffect(() => {
+    updateActiveBedSelection(getWardStore().getState());
+    getWardStore().subscribe(updateActiveBedSelection);
+  }, [updateActiveBedSelection]);
 
   return (
     <div className={styles.wardPatientCard}>
@@ -22,8 +29,8 @@ const WardPatientCard: React.FC<WardPatientCardProps> = (props) => {
       ))}
       <button
         className={classNames(styles.wardPatientCardButton, {
-          // []: activeBedSelection?.bed.uuid !== props.bed.uuid,
-          [styles.activeWardPatientCard]: activeBedSelection?.bed.uuid === props.bed.uuid,
+          [styles.activeWardPatientCardButton]:
+            activeBedSelection?.bed.uuid === props.bed.uuid && activeBedSelection?.patient.uuid === props.patient.uuid,
         })}
         onClick={() => {
           wardStore.setState({ activeBedSelection: { ...props } });