feat(new): warn about potential duplicate patient (#2187) #2240

janmarkusmilan · 2020-07-17T19:16:24Z

Fixes #2187

Changes proposed in this pull request:

A modal appears when a patient with matching name, sex and date of birth is created
The modal outputs the message "Potential duplicate of: [Patient Name](link to patient record). Are you sure you want to create this patient?"
Clicking on the patient name will redirect to the patient view
Clicking on the cancel button will close the modal
Clicking on the continue button will dispatch create patient, redirect to the new patient view and output a success message
Added a new test file for the modal

No new dependency added

…cess (HospitalRun#2187)

jsf-clabot · 2020-07-17T19:16:26Z

All committers have signed the CLA.

gitpod-io · 2020-07-17T19:16:28Z

vercel · 2020-07-18T04:15:21Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hospitalrun/hospitalrun-frontend/dqbxrat2q
✅ Preview: https://hospitalrun-fro-git-fork-janmarkusmilan-duplicate-patien-bed13f.hospitalrun.vercel.app

jackcmeyer · 2020-07-18T04:38:30Z

src/patients/new/NewPatient.tsx

+        loggedPatient.givenName === patient.givenName &&
+        loggedPatient.familyName === patient.familyName &&
+        loggedPatient.sex === patient.sex &&
+        loggedPatient.dateOfBirth === patient.dateOfBirth


I think that we should extra this to a helper util file called is-possible-duplicate-patient.ts. The file can then export one function isPossibleDuplicatePatient(newPatient, existingPatient).

With this, we can then unit test that capability independently, plus reuse if necessary.

jackcmeyer · 2020-07-18T04:43:18Z

src/patients/new/DuplicateNewPatientModal.tsx

+        <p>
+          Possible duplicate of:{' '}
+          {duplicatePatient !== undefined && (
+            <Link to={`/patients/${duplicatePatient.id}`}>{duplicatePatient.fullName}</Link>
+          )}
+        </p>
+        <p>Are you sure you want to create this patient?</p>


I think maybe this could go in a warning alert to bring more attention to the warning we are providing.

jackcmeyer · 2020-07-18T04:43:48Z

src/patients/new/DuplicateNewPatientModal.tsx

+        <p>
+          Possible duplicate of:{' '}
+          {duplicatePatient !== undefined && (
+            <Link to={`/patients/${duplicatePatient.id}`}>{duplicatePatient.fullName}</Link>
+          )}
+        </p>
+        <p>Are you sure you want to create this patient?</p>


All text should be provided through the internationalization process.

Just for clarification, do you mean using the translator? For example:

<Alert color="danger" message={t('addTheTextToBeInternationalizedHere')} />

jackcmeyer · 2020-07-18T04:44:06Z

src/patients/new/DuplicateNewPatientModal.tsx

+    <div className="row">
+      <div className="col-md-12">
+        <p>
+          Possible duplicate of:{' '}


Needs to be internationalized.

jackcmeyer · 2020-07-18T04:46:49Z

src/patients/new/NewPatient.tsx


  const [patient, setPatient] = useState({} as Patient)
+  const [duplicatePatient, setDuplicatePatient] = useState({} as Patient)


I think it makes more sense to represent this state as

useState<Patient | undefiend>(undefined). I think more clearly represents the presence/absence of a duplicate patient.

jackcmeyer · 2020-07-18T04:50:54Z

src/patients/new/NewPatient.tsx

@@ -21,8 +22,11 @@ const NewPatient = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  const { createError } = useSelector((state: RootState) => state.patient)
+  const { patients } = Object(useSelector((state: RootState) => state.patients))


This line can be simplified to:

const { patients } = useSelector((state: RootState) => state.patients)

I originally had that line, but the tests would always fail. The message is:

TypeError: Cannot destructure property 'patients' of '(0 , _reactRedux.useSelector)(...)' as it is undefined.

The only solution I found was adding the Object(...) at the beginning. I can't seem to get it working without it.

jackcmeyer · 2020-07-18T04:57:15Z

src/patients/new/NewPatient.tsx


  const [patient, setPatient] = useState({} as Patient)
+  const [duplicatePatient, setDuplicatePatient] = useState({} as Patient)


After thinking about this functionality some more and seeing it action. I think it make sense to support possibly finding multiple duplicates?

If there were already two other patients named "Test User" born on 7/16/2000 and are male. I think all of the should appear in the warning.

jackcmeyer · 2020-07-18T05:03:38Z

src/patients/new/NewPatient.tsx

  const onSave = () => {
-    dispatch(createPatient(patient, onSuccessfulSave))
+    let isDuplicatePatient = false
+    const patientsObj = {}
+    Object.assign(patientsObj, patients)
+    Object.keys(patientsObj).forEach((patientInfo: any) => {
+      const loggedPatient = patients[patientInfo]
+      if (
+        loggedPatient.givenName === patient.givenName &&
+        loggedPatient.familyName === patient.familyName &&
+        loggedPatient.sex === patient.sex &&
+        loggedPatient.dateOfBirth === patient.dateOfBirth
+      ) {
+        setShowDuplicateNewPatientModal(true)
+        setDuplicatePatient(loggedPatient as Patient)
+        isDuplicatePatient = true
+      }
+    })
+    if (!isDuplicatePatient) {
+      dispatch(createPatient(patient, onSuccessfulSave))
+    }
  }


After adding support for finding all possible duplicate patients, rather than just the first, this function would be a good candidate for Arrays.filter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter.

const onSave = () => { const duplicatePatients = patients.filter((existingPatient) => isPossibleDuplicatePatient(patient, existingPatient)); if(duplicatePatients.length > 0) { setShowDuplicateNewPatientModal(true) setDuplicatePatient(existingPatient) } else { dispatch(createPatient(patient, onSuccessfulSave)) } }

jackcmeyer · 2020-07-18T05:05:41Z

src/patients/new/NewPatient.tsx

@@ -10,6 +10,7 @@ import Patient from '../../shared/model/Patient'
 import { RootState } from '../../shared/store'
 import GeneralInformation from '../GeneralInformation'
 import { createPatient } from '../patient-slice'
+import DuplicateNewPatientModal from './DuplicateNewPatientModal'


There should be some tests to test this new workflow.

Basically, have an already existing patient in the redux store, try to create a new patient with the same information, and test to make sure that the new modal shows.

jackcmeyer · 2020-07-18T05:07:30Z

src/__tests__/patients/new/DuplicateNewPatientModal.test.tsx

+      const onContinueButtonClickSpy = jest.fn()
+      const store = mockStore({
+        patient: {
+          patient: {
+            id: '1234',
+          },
+        },
+      } as any)
+
+      const wrapper = mount(
+        <Provider store={store}>
+          <DuplicateNewPatientModal
+            show
+            toggle={jest.fn()}
+            onCloseButtonClick={jest.fn()}
+            onContinueButtonClick={onContinueButtonClickSpy}
+          />
+        </Provider>,
+      )
+      wrapper.update()


This code block is duplicated several times in this file. I think we can extract it to a setup function that looks like:

const setup = () => { const onContinueButtonClickSpy = jest.fn() const store = mockStore({ patient: { patient: { id: '1234', }, }, } as any) const wrapper = mount( <Provider store={store}> <DuplicateNewPatientModal show toggle={jest.fn()} onCloseButtonClick={jest.fn()} onContinueButtonClick={onContinueButtonClickSpy} /> </Provider>, ) wrapper.update() return { wrapper: wrapper as ReactWrapper } }

gitpod-io · 2020-07-20T03:25:21Z

janmarkusmilan · 2020-07-20T03:29:30Z

Sorry, I accidentally requested a merge to master (did not make the changes yet). I am making the changes now.

…into duplicate-patient-modal

janmarkusmilan · 2020-07-24T19:58:54Z

Recently Pushed Requested Changes

1. Helper util file (is-possible-duplicate-patient.ts)

Created helper util file to allow for reusability if necessary.

2. Support for finding multiple duplicate patients

NewPatient.tsx

DuplicateNewPatientModal.tsx

Used the Arrays.filter method and the newly created helper util file is-possible-duplicate-patient.ts to loop through the existing patients and determine if there are zero, one or multiple patients with the same information as the one being created. Also styled the look of the modal based on if there is one or multiple patients.

3. New alert and internationalized text

DuplicateNewPatientModal.tsx

Added an alert to bring more attention to the warning being provided. Also, all the text is internationalized (still missing english translation key in console).

Modal (Multiple Patients)

Modal (Single Patient)

4. Setup function in test file

DuplicateNewPatientModal.test.tsx

Using the setup function

Since this code block was duplicated multiple times, it was extracted to a setup function for easy reusability.

5. Test case for new modal

NewPatient.test.tsx

NewPatient.tsx

A test needed to be created in order to test the new modal feature. Given some existing patient in the redux store, if a newly created patient had the same information as the existing one, then the modal should render (or in this case return true).

Other Things

Changed const [duplicatePatient, setDuplicatePatient] = useState({} as Patient) to const [duplicatePatient, setDuplicatePatient] = useState<Patient | undefined>(undefined)
Had to keep const { patients } = Object(useSelector((state: RootState) => state.patients)) as it is, since removing the Object(...) results in errors when running the test cases for NewPatient.tsx

jackcmeyer

Few comments on the code! I really like the new functionality for the multiple duplicate patients!

jackcmeyer · 2020-07-28T03:37:06Z

src/patients/new/DuplicateNewPatientModal.tsx

+  const { duplicatePatient, show, toggle, onCloseButtonClick, onContinueButtonClick } = props
+
+  const alertMessage =
+    'Patient with matching information found in database. Are you sure you want to create this patient?'


this alert message needs to have the string internationalized.

jackcmeyer · 2020-07-28T03:37:47Z

src/patients/new/DuplicateNewPatientModal.tsx

+      <Alert color="danger" title={t('Warning!')} message={t(alertMessage)} />
+      <div className="row">
+        <div className="col-md-12">
+          {`${t('Possible duplicate patient')}: `}


The value passed to be a key that is defined in the locales folder.

jackcmeyer · 2020-07-28T03:38:05Z

src/patients/new/DuplicateNewPatientModal.tsx

+
+  const body = (
+    <>
+      <Alert color="danger" title={t('Warning!')} message={t(alertMessage)} />


Thoughts on having this as a warning color rather than danger?

I think it makes sense. It's more of a warning message than an error message, and it still stands out.

jackcmeyer · 2020-07-28T03:38:59Z

src/patients/util/is-possible-duplicate-patient.ts

@@ -0,0 +1,13 @@
+import Patient from '../../shared/model/Patient'
+
+export function isPossibleDuplicatePatient(newPatient: Patient, existingPatient: Patient) {


as trivial as it is, we should have a test around this functionality.

jackcmeyer · 2020-07-28T03:40:03Z

src/patients/util/is-possible-duplicate-patient.ts

@@ -0,0 +1,13 @@
+import Patient from '../../shared/model/Patient'
+
+export function isPossibleDuplicatePatient(newPatient: Patient, existingPatient: Patient) {


I would expect a function named isPossibleDuplicatePatient to return a boolean rather than a object.

I think this function can be simplified as:

export function isPossibleDuplicatePatient(newPatient: Patient, existingPatient: Patient) { return newPatient.givenName === existingPatient.givenName && newPatient.familyName === existingPatient.familyName && newPatient.sex === existingPatient.sex && newPatient.dateOfBirth === existingPatient.dateOfBirth }

jackcmeyer · 2020-07-28T03:42:15Z

src/patients/new/DuplicateNewPatientModal.tsx

+        <div className="col-md-12">
+          {`${t('Possible duplicate patient')}: `}
+          {duplicatePatient !== undefined &&
+            Object.entries(duplicatePatient).length === 1 &&
+            Object.entries(duplicatePatient).map(([key, patient]) => (
+              <Link key={key.toString()} to={`/patients/${patient.id}`}>
+                {patient.fullName}
+              </Link>
+            ))}
+          {duplicatePatient !== undefined &&
+            Object.entries(duplicatePatient).length > 1 &&
+            Object.entries(duplicatePatient).map(([key, patient]) => (
+              <li key={key.toString()}>
+                <Link to={`/patients/${patient.id}`}>{patient.fullName}</Link>
+              </li>
+            ))}
+        </div>


I think that it is ok if it always displays a list no matter the number of duplicate patients returned. If we do that, then we can simplify this code.

…into duplicate-patient-modal

…ospitalrun-frontend into duplicate-patient-modal

janmarkusmilan · 2020-07-30T13:25:45Z

Newly Pushed Changes

1. Changed alert color and internationalized text

I changed the color of the alert to "warning" instead of danger, and internationalized the text by adding them in the locales folder.

2. Changed `is-possible-duplicate-patient.ts` to return a boolean instead of an object, and created test file

I simplified the util file to return a boolean instead of an object, and created a test file for the function.

3. Set modal to display a list regardless of the amount of duplicate patients

I simplified the code by always rendering a list of duplicate patients in the modal.

feat(new): warn about potential duplicate patient during creation pro…

4a800af

…cess (HospitalRun#2187)

vercel bot deployed to Preview July 18, 2020 04:15 View deployment

jackcmeyer requested review from jackcmeyer, a user and fox1t and removed request for jackcmeyer July 18, 2020 04:15

jackcmeyer added patients issue/pull request that interacts with patients module 🚀enhancement an issue/pull request that adds a feature to the application labels Jul 18, 2020

jackcmeyer added this to the v2.0 milestone Jul 18, 2020

jackcmeyer suggested changes Jul 18, 2020

View reviewed changes

janmarkusmilan closed this Jul 20, 2020

janmarkusmilan reopened this Jul 20, 2020

janmarkusmilan added 5 commits July 20, 2020 16:16

Merge branch 'master' of github.com:HospitalRun/hospitalrun-frontend …

c340f7a

…into duplicate-patient-modal

feat(util): added helper util file to check duplicate patients

2f5db58

feat(new): added support for multiple duplicate patients

9c601fb

feat(modal): added support for multiple duplicate patients

13ff647

feat(test): created setup function for reusability

5c9ebff

vercel bot deployed to Preview July 23, 2020 16:48 View deployment

janmarkusmilan added 2 commits July 23, 2020 14:25

feat(modal): added alert and internationalized text

13954ae

fix(modal): reworked alert message and resolved console error

9d33ea8

vercel bot deployed to Preview July 24, 2020 07:25 View deployment

feat(test): created test case for the new modal feature

e56a6f0

Merge branch 'master' of github.com:HospitalRun/hospitalrun-frontend …

8ad58a0

…into duplicate-patient-modal

janmarkusmilan force-pushed the duplicate-patient-modal branch from 3b961c6 to 8ad58a0 Compare July 24, 2020 17:01

vercel bot deployed to Preview July 28, 2020 03:35 View deployment

jackcmeyer suggested changes Jul 28, 2020

View reviewed changes

Merge branch 'master' into duplicate-patient-modal

8e503da

vercel bot deployed to Preview July 28, 2020 08:54 View deployment

janmarkusmilan and others added 4 commits July 29, 2020 15:54

feat(modal): changed alert color and opted to always render list

73fb4c3

fix(util): simplified function to return boolean

58b069c

feat(modal): internationalized text and added keys in locales

732bdb4

Merge branch 'master' into duplicate-patient-modal

97a5dac

vercel bot deployed to Preview July 30, 2020 07:13 View deployment

janmarkusmilan added 3 commits July 30, 2020 09:03

feat(test): added test file for is-possible-duplicate-patient.ts

21a3f94

Merge branch 'master' of github.com:HospitalRun/hospitalrun-frontend …

d09c90d

…into duplicate-patient-modal

Merge branch 'duplicate-patient-modal' of github.com:janmarkusmilan/h…

924cf9d

…ospitalrun-frontend into duplicate-patient-modal

vercel bot temporarily deployed to Preview July 30, 2020 13:14 Inactive

matteovivona assigned jackcmeyer Jul 30, 2020

janmarkusmilan force-pushed the duplicate-patient-modal branch from 03250c9 to 924cf9d Compare July 30, 2020 13:15

matteovivona added the in progress indicates that issue/pull request is currently being worked on label Jul 30, 2020

vercel bot deployed to Preview July 30, 2020 20:17 View deployment

jackcmeyer approved these changes Jul 31, 2020

View reviewed changes

jackcmeyer merged commit f49831c into HospitalRun:master Jul 31, 2020

janmarkusmilan deleted the duplicate-patient-modal branch August 5, 2020 01:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(new): warn about potential duplicate patient (#2187) #2240

feat(new): warn about potential duplicate patient (#2187) #2240

janmarkusmilan commented Jul 17, 2020

jsf-clabot commented Jul 17, 2020 •

edited

Loading

gitpod-io bot commented Jul 17, 2020 •

edited

Loading

vercel bot commented Jul 18, 2020 •

edited

Loading

jackcmeyer Jul 18, 2020

jackcmeyer Jul 18, 2020

jackcmeyer Jul 18, 2020

janmarkusmilan Jul 23, 2020

jackcmeyer Jul 18, 2020

jackcmeyer Jul 18, 2020

jackcmeyer Jul 18, 2020

janmarkusmilan Jul 23, 2020 •

edited

Loading

jackcmeyer Jul 18, 2020

jackcmeyer Jul 18, 2020

jackcmeyer Jul 18, 2020

jackcmeyer Jul 18, 2020

gitpod-io bot commented Jul 20, 2020

janmarkusmilan commented Jul 20, 2020 •

edited

Loading

janmarkusmilan commented Jul 24, 2020 •

edited

Loading

jackcmeyer left a comment

jackcmeyer Jul 28, 2020

jackcmeyer Jul 28, 2020

jackcmeyer Jul 28, 2020

janmarkusmilan Jul 29, 2020

jackcmeyer Jul 28, 2020

jackcmeyer Jul 28, 2020

jackcmeyer Jul 28, 2020

janmarkusmilan commented Jul 30, 2020


		const [patient, setPatient] = useState({} as Patient)
		const [duplicatePatient, setDuplicatePatient] = useState({} as Patient)

		@@ -0,0 +1,13 @@
		import Patient from '../../shared/model/Patient'

		export function isPossibleDuplicatePatient(newPatient: Patient, existingPatient: Patient) {

feat(new): warn about potential duplicate patient (#2187) #2240

feat(new): warn about potential duplicate patient (#2187) #2240

Conversation

janmarkusmilan commented Jul 17, 2020

jsf-clabot commented Jul 17, 2020 • edited Loading

gitpod-io bot commented Jul 17, 2020 • edited Loading

vercel bot commented Jul 18, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

janmarkusmilan Jul 23, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gitpod-io bot commented Jul 20, 2020

janmarkusmilan commented Jul 20, 2020 • edited Loading

janmarkusmilan commented Jul 24, 2020 • edited Loading

Recently Pushed Requested Changes

1. Helper util file (is-possible-duplicate-patient.ts)

2. Support for finding multiple duplicate patients

NewPatient.tsx

DuplicateNewPatientModal.tsx

3. New alert and internationalized text

DuplicateNewPatientModal.tsx

Modal (Multiple Patients)

Modal (Single Patient)

4. Setup function in test file

DuplicateNewPatientModal.test.tsx

Using the setup function

5. Test case for new modal

NewPatient.test.tsx

NewPatient.tsx

Other Things

jackcmeyer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

janmarkusmilan commented Jul 30, 2020

Newly Pushed Changes

1. Changed alert color and internationalized text

2. Changed is-possible-duplicate-patient.ts to return a boolean instead of an object, and created test file

3. Set modal to display a list regardless of the amount of duplicate patients

jsf-clabot commented Jul 17, 2020 •

edited

Loading

gitpod-io bot commented Jul 17, 2020 •

edited

Loading

vercel bot commented Jul 18, 2020 •

edited

Loading

janmarkusmilan Jul 23, 2020 •

edited

Loading

janmarkusmilan commented Jul 20, 2020 •

edited

Loading

janmarkusmilan commented Jul 24, 2020 •

edited

Loading

2. Changed `is-possible-duplicate-patient.ts` to return a boolean instead of an object, and created test file