feat(navigation): navigate to patients profile on related person click

fix #1763
HospitalRun · Feb 5, 2020 · c6acecc · c6acecc
1 parent f15c238
commit c6acecc
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 40 deletions.
diff --git a/src/__tests__/patients/related-persons/RelatedPersons.test.tsx b/src/__tests__/patients/related-persons/RelatedPersons.test.tsx
@@ -1,5 +1,9 @@
 import '../../../__mocks__/matchMediaMock'
 import React from 'react'
+import { Router } from 'react-router'
+
+import { createMemoryHistory } from 'history'
+
 import { mount, ReactWrapper } from 'enzyme'
 import RelatedPersonTab from 'patients/related-persons/RelatedPersonTab'
 import { Button, List, ListItem } from '@hospitalrun/components'
@@ -18,12 +22,23 @@ const mockStore = createMockStore([thunk])
 
 describe('Related Persons Tab', () => {
   let wrapper: ReactWrapper
-
+  let history = createMemoryHistory()
+  const setup = async (location: string, patient: Patient, user: any) => {
+    history = createMemoryHistory()
+    history.push(location)
+    return mount(
+      <Router history={history}>
+        <Provider store={mockStore({ patient, user })}>
+          <RelatedPersonTab patient={patient} />
+        </Provider>
+      </Router>,
+    )
+  }
   describe('Add New Related Person', () => {
     let patient: any
     let user: any
 
-    beforeEach(() => {
+    beforeEach(async () => {
       patient = {
         id: '123',
         rev: '123',
@@ -32,11 +47,8 @@ describe('Related Persons Tab', () => {
       user = {
         permissions: [Permissions.WritePatients, Permissions.ReadPatients],
       }
-      wrapper = mount(
-        <Provider store={mockStore({ patient, user })}>
-          <RelatedPersonTab patient={patient} />
-        </Provider>,
-      )
+      // general test wrapper
+      wrapper = await setup('/', patient, user)
     })
 
     it('should render a New Related Person button', () => {
@@ -46,14 +58,10 @@ describe('Related Persons Tab', () => {
       expect(newRelatedPersonButton.text().trim()).toEqual('patient.relatedPersons.new')
     })
 
-    it('should not render a New Related Person button if the user does not have write privileges for a patient', () => {
+    it('should not render a New Related Person button if the user does not have write privileges for a patient', async () => {
       user = { permissions: [Permissions.ReadPatients] }
-      wrapper = mount(
-        <Provider store={mockStore({ patient, user })}>
-          <RelatedPersonTab patient={patient} />
-        </Provider>,
-      )
 
+      wrapper = await setup('/', patient, user)
       const newRelatedPersonButton = wrapper.find(Button)
       expect(newRelatedPersonButton).toHaveLength(0)
     })
@@ -78,34 +86,36 @@ describe('Related Persons Tab', () => {
       expect(newRelatedPersonModal.prop('show')).toBeTruthy()
     })
 
-    it('should call update patient with the data from the modal', () => {
+    it('should call update patient with the data from the modal', async () => {
       jest.spyOn(patientSlice, 'updatePatient')
       jest.spyOn(PatientRepository, 'saveOrUpdate')
       const expectedRelatedPerson = { patientId: '123', type: 'type' }
       const expectedPatient = {
         ...patient,
         relatedPersons: [expectedRelatedPerson],
       }
-
-      act(() => {
-        const newRelatedPersonButton = wrapper.find(Button)
-        const onClick = newRelatedPersonButton.prop('onClick') as any
-        onClick()
-      })
-
-      wrapper.update()
-
-      act(() => {
-        const newRelatedPersonModal = wrapper.find(NewRelatedPersonModal)
-
-        const onSave = newRelatedPersonModal.prop('onSave') as any
-        onSave(expectedRelatedPerson)
+      await act(async () => {
+        wrapper = await setup('/', patient, user)
+      }).then(() => {
+        act(() => {
+          const newRelatedPersonButton = wrapper.find(Button)
+          const onClick = newRelatedPersonButton.prop('onClick') as any
+          onClick()
+        })
+
+        wrapper.update()
+
+        act(() => {
+          const newRelatedPersonModal = wrapper.find(NewRelatedPersonModal)
+          const onSave = newRelatedPersonModal.prop('onSave') as any
+          onSave(expectedRelatedPerson)
+        })
+
+        wrapper.update()
+
+        expect(patientSlice.updatePatient).toHaveBeenCalledTimes(1)
+        expect(patientSlice.updatePatient).toHaveBeenCalledWith(expectedPatient)
       })
-
-      wrapper.update()
-
-      expect(patientSlice.updatePatient).toHaveBeenCalledTimes(1)
-      expect(patientSlice.updatePatient).toHaveBeenCalledWith(expectedPatient)
     })
 
     it('should close the modal when the save button is clicked', () => {
@@ -146,11 +156,7 @@ describe('Related Persons Tab', () => {
       mocked(PatientRepository.find).mockResolvedValue({ fullName: 'test test' } as Patient)
 
       await act(async () => {
-        wrapper = await mount(
-          <Provider store={mockStore({ patient, user })}>
-            <RelatedPersonTab patient={patient} />
-          </Provider>,
-        )
+        wrapper = await setup('/', patient, user)
       })
 
       wrapper.update()

diff --git a/src/patients/list/Patients.tsx b/src/patients/list/Patients.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { Spinner, TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
 import { RootState } from '../../store'

diff --git a/src/patients/related-persons/RelatedPersonTab.tsx b/src/patients/related-persons/RelatedPersonTab.tsx
@@ -3,6 +3,7 @@ import { Button, Panel, List, ListItem } from '@hospitalrun/components'
 import NewRelatedPersonModal from 'patients/related-persons/NewRelatedPersonModal'
 import RelatedPerson from 'model/RelatedPerson'
 import { useTranslation } from 'react-i18next'
+import { useHistory } from 'react-router'
 import Patient from 'model/Patient'
 import { updatePatient } from 'patients/patient-slice'
 import { useDispatch, useSelector } from 'react-redux'
@@ -16,6 +17,11 @@ interface Props {
 
 const RelatedPersonTab = (props: Props) => {
   const dispatch = useDispatch()
+  const history = useHistory()
+
+  const navigateTo = (location: string) => {
+    history.push(location)
+  }
   const { patient } = props
   const { t } = useTranslation()
   const { permissions } = useSelector((state: RootState) => state.user)
@@ -44,6 +50,9 @@ const RelatedPersonTab = (props: Props) => {
     setShowRelatedPersonModal(true)
   }
 
+  const onRelatedPersonClick = (id: string) => {
+    navigateTo(`/patients/${id}`)
+  }
   const closeNewRelatedPersonModal = () => {
     setShowRelatedPersonModal(false)
   }
@@ -90,7 +99,9 @@ const RelatedPersonTab = (props: Props) => {
             {relatedPersons ? (
               <List>
                 {relatedPersons.map((r) => (
-                  <ListItem key={r.id}>{r.fullName}</ListItem>
+                  <ListItem key={r.id} onClick={() => onRelatedPersonClick(r.id)}>
+                    {r.fullName}
+                  </ListItem>
                 ))}
               </List>
             ) : (