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

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

@@ -1,5 +1,7 @@
 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,6 +20,8 @@ const mockStore = createMockStore([thunk])
 
 describe('Related Persons Tab', () => {
   let wrapper: ReactWrapper
+  let history = createMemoryHistory()
+  history = createMemoryHistory()
 
   describe('Add New Related Person', () => {
     let patient: any
@@ -32,11 +36,15 @@ describe('Related Persons Tab', () => {
       user = {
         permissions: [Permissions.WritePatients, Permissions.ReadPatients],
       }
-      wrapper = mount(
-        <Provider store={mockStore({ patient, user })}>
-          <RelatedPersonTab patient={patient} />
-        </Provider>,
-      )
+      act(() => {
+        wrapper = mount(
+          <Router history={history}>
+            <Provider store={mockStore({ patient, user })}>
+              <RelatedPersonTab patient={patient} />
+            </Provider>
+          </Router>,
+        )
+      })
     })
 
     it('should render a New Related Person button', () => {
@@ -48,12 +56,15 @@ describe('Related Persons Tab', () => {
 
     it('should not render a New Related Person button if the user does not have write privileges for a patient', () => {
       user = { permissions: [Permissions.ReadPatients] }
-      wrapper = mount(
-        <Provider store={mockStore({ patient, user })}>
-          <RelatedPersonTab patient={patient} />
-        </Provider>,
-      )
-
+      act(() => {
+        wrapper = mount(
+          <Router history={history}>
+            <Provider store={mockStore({ patient, user })}>
+              <RelatedPersonTab patient={patient} />
+            </Provider>
+          </Router>,
+        )
+      })
       const newRelatedPersonButton = wrapper.find(Button)
       expect(newRelatedPersonButton).toHaveLength(0)
     })
@@ -86,22 +97,27 @@ describe('Related Persons Tab', () => {
         ...patient,
         relatedPersons: [expectedRelatedPerson],
       }
-
+      act(() => {
+        wrapper = mount(
+          <Router history={history}>
+            <Provider store={mockStore({ patient, user })}>
+              <RelatedPersonTab patient={patient} />
+            </Provider>
+          </Router>,
+        )
+      })
       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)
@@ -143,26 +159,39 @@ describe('Related Persons Tab', () => {
 
     beforeEach(async () => {
       jest.spyOn(PatientRepository, 'find')
-      mocked(PatientRepository.find).mockResolvedValue({ fullName: 'test test' } as Patient)
+      mocked(PatientRepository.find).mockResolvedValue({
+        fullName: 'test test',
+        id: '123001',
+      } as Patient)
 
       await act(async () => {
         wrapper = await mount(
-          <Provider store={mockStore({ patient, user })}>
-            <RelatedPersonTab patient={patient} />
-          </Provider>,
+          <Router history={history}>
+            <Provider store={mockStore({ patient, user })}>
+              <RelatedPersonTab patient={patient} />
+            </Provider>
+          </Router>,
         )
       })
-
       wrapper.update()
     })
 
-    it('should render a list of of related persons with their full name being displayed', () => {
+    it('should render a list of related persons with their full name being displayed', () => {
       const list = wrapper.find(List)
       const listItems = wrapper.find(ListItem)
-
       expect(list).toHaveLength(1)
       expect(listItems).toHaveLength(1)
       expect(listItems.at(0).text()).toEqual('test test')
     })
+    it('should navigate to related person patient profile on related person click', () => {
+      const list = wrapper.find(List)
+      const listItems = wrapper.find(ListItem)
+      act(() => {
+        ;(listItems.at(0).prop('onClick') as any)()
+      })
+      expect(list).toHaveLength(1)
+      expect(listItems).toHaveLength(1)
+      expect(history.location.pathname).toEqual('/patients/123001')
+    })
   })
 })

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'

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 action key={r.id} onClick={() => onRelatedPersonClick(r.id)}>
+                    {r.fullName}
+                  </ListItem>
                 ))}
               </List>
             ) : (