fix(patients): current patient can no longer be related person (#1959)

src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx

@@ -3,20 +3,51 @@ import React from 'react'
 import { ReactWrapper, mount } from 'enzyme'
 import { Modal, Alert, Typeahead } from '@hospitalrun/components'
 import { act } from '@testing-library/react'
-import AddRelatedPersonModal from '../../../patients/related-persons/AddRelatedPersonModal'
+import { Provider } from 'react-redux'
+import thunk from 'redux-thunk'
+import configureMockStore, { MockStore } from 'redux-mock-store'
+import Patient from 'model/Patient'
 import TextInputWithLabelFormGroup from '../../../components/input/TextInputWithLabelFormGroup'
+import AddRelatedPersonModal from '../../../patients/related-persons/AddRelatedPersonModal'
+
+const mockStore = configureMockStore([thunk])
 
 describe('Add Related Person Modal', () => {
+  const patient = {
+    id: '123',
+    prefix: 'prefix',
+    givenName: 'givenName',
+    familyName: 'familyName',
+    suffix: 'suffix',
+    sex: 'male',
+    type: 'charity',
+    occupation: 'occupation',
+    preferredLanguage: 'preferredLanguage',
+    phoneNumber: 'phoneNumber',
+    email: 'email@email.com',
+    address: 'address',
+    code: 'P00001',
+    dateOfBirth: new Date().toISOString(),
+  } as Patient
+
+  let store: MockStore
+
   describe('layout', () => {
     let wrapper: ReactWrapper
+
+    store = mockStore({
+      patient: { patient },
+    })
     beforeEach(() => {
       wrapper = mount(
-        <AddRelatedPersonModal
-          show
-          onSave={jest.fn()}
-          onCloseButtonClick={jest.fn()}
-          toggle={jest.fn()}
-        />,
+        <Provider store={store}>
+          <AddRelatedPersonModal
+            show
+            onSave={jest.fn()}
+            onCloseButtonClick={jest.fn()}
+            toggle={jest.fn()}
+          />
+        </Provider>,
       )
     })
 
@@ -65,12 +96,14 @@ describe('Add Related Person Modal', () => {
     beforeEach(() => {
       onSaveSpy = jest.fn()
       wrapper = mount(
-        <AddRelatedPersonModal
-          show
-          onSave={onSaveSpy}
-          onCloseButtonClick={jest.fn()}
-          toggle={jest.fn()}
-        />,
+        <Provider store={store}>
+          <AddRelatedPersonModal
+            show
+            onSave={onSaveSpy}
+            onCloseButtonClick={jest.fn()}
+            toggle={jest.fn()}
+          />
+        </Provider>,
       )
     })
 

src/patients/related-persons/AddRelatedPersonModal.tsx

@@ -5,6 +5,8 @@ import TextInputWithLabelFormGroup from 'components/input/TextInputWithLabelForm
 import RelatedPerson from 'model/RelatedPerson'
 import PatientRepository from 'clients/db/PatientRepository'
 import Patient from 'model/Patient'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
 
 interface Props {
   show: boolean
@@ -21,6 +23,9 @@ const AddRelatedPersonModal = (props: Props) => {
     patientId: '',
     type: '',
   })
+  const { patient } = useSelector((state: RootState) => state.patient)
+
+  const patientId = () => patient.id
 
   const onFieldChange = (key: string, value: string) => {
     setRelatedPerson({
@@ -33,8 +38,8 @@ const AddRelatedPersonModal = (props: Props) => {
     onFieldChange(fieldName, event.target.value)
   }
 
-  const onPatientSelect = (patient: Patient[]) => {
-    setRelatedPerson({ ...relatedPerson, patientId: patient[0].id })
+  const onPatientSelect = (p: Patient[]) => {
+    setRelatedPerson({ ...relatedPerson, patientId: p[0].id })
   }
 
   const body = (
@@ -50,9 +55,13 @@ const AddRelatedPersonModal = (props: Props) => {
               placeholder={t('patient.relatedPerson')}
               onChange={onPatientSelect}
               onSearch={async (query: string) => PatientRepository.search(query)}
-              renderMenuItemChildren={(patient: Patient) => (
-                <div>{`${patient.fullName} (${patient.code})`}</div>
-              )}
+              renderMenuItemChildren={(p: Patient) => {
+                if (patientId() === p.id) {
+                  return <div />
+                }
+
+                return <div>{`${p.fullName} (${p.code})`}</div>
+              }}
             />
           </div>
         </div>