feat(allergies): ability to click on allergy and view an allergy

src/__tests__/patients/allergies/Allergies.test.tsx

@@ -9,8 +9,8 @@ import createMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 
 import Allergies from '../../../patients/allergies/Allergies'
+import AllergiesList from '../../../patients/allergies/AllergiesList'
 import PatientRepository from '../../../shared/db/PatientRepository'
-import Allergy from '../../../shared/model/Allergy'
 import Patient from '../../../shared/model/Patient'
 import Permissions from '../../../shared/model/Permissions'
 import { RootState } from '../../../shared/store'
@@ -26,16 +26,14 @@ const expectedPatient = {
   ],
 } as Patient
 
-let user: any
 let store: any
 
 const setup = (
   patient = expectedPatient,
   permissions = [Permissions.AddAllergy],
   route = '/patients/123/allergies',
 ) => {
-  user = { permissions }
-  store = mockStore({ patient, user } as any)
+  store = mockStore({ patient: { patient }, user: { permissions } } as any)
   history.push(route)
   const wrapper = mount(
     <Router history={history}>
@@ -86,15 +84,11 @@ describe('Allergies', () => {
   })
 
   describe('allergy list', () => {
-    it('should list the patients allergies', () => {
-      const allergies = expectedPatient.allergies as Allergy[]
+    it('should render allergies', () => {
       const wrapper = setup()
+      const allergiesList = wrapper.find(AllergiesList)
 
-      const list = wrapper.find(components.List)
-      const listItems = wrapper.find(components.ListItem)
-
-      expect(list).toHaveLength(1)
-      expect(listItems).toHaveLength(allergies.length)
+      expect(allergiesList).toHaveLength(1)
     })
 
     it('should render a warning message if the patient does not have any allergies', () => {

src/__tests__/patients/allergies/AllergiesList.test.tsx

@@ -0,0 +1,63 @@
+import { List, ListItem } from '@hospitalrun/components'
+import { mount, ReactWrapper } from 'enzyme'
+import { createMemoryHistory } from 'history'
+import React from 'react'
+import { act } from 'react-dom/test-utils'
+import { Provider } from 'react-redux'
+import { Router } from 'react-router-dom'
+import createMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+
+import AllergiesList from '../../../patients/allergies/AllergiesList'
+import Allergy from '../../../shared/model/Allergy'
+import Patient from '../../../shared/model/Patient'
+import { RootState } from '../../../shared/store'
+
+const mockStore = createMockStore<RootState, any>([thunk])
+
+describe('Allergies list', () => {
+  const allergy: Allergy = {
+    id: 'id',
+    name: 'name',
+  }
+  const patient = {
+    id: 'patientId',
+    diagnoses: [{ id: '123', name: 'some name', diagnosisDate: new Date().toISOString() }],
+    allergies: [allergy],
+  } as Patient
+
+  const setup = () => {
+    const store = mockStore({ patient: { patient } } as any)
+    const history = createMemoryHistory()
+    history.push(`/patients/${patient.id}/allergies/${patient.allergies![0].id}`)
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <AllergiesList />
+        </Router>
+      </Provider>,
+    )
+    return { wrapper: wrapper as ReactWrapper, history }
+  }
+
+  it('should render a list', () => {
+    const allergies = patient.allergies as Allergy[]
+    const { wrapper } = setup()
+    const list = wrapper.find(List)
+    const listItems = wrapper.find(ListItem)
+
+    expect(list).toHaveLength(1)
+    expect(listItems).toHaveLength(allergies.length)
+  })
+
+  it('should navigate to the allergy view when the allergy is clicked', () => {
+    const { wrapper, history } = setup()
+    const item = wrapper.find(ListItem)
+    act(() => {
+      const onClick = item.prop('onClick') as any
+      onClick({ stopPropagation: jest.fn() })
+    })
+
+    expect(history.location.pathname).toEqual(`/patients/${patient.id}/allergies/${allergy.id}`)
+  })
+})

src/__tests__/patients/allergies/ViewAllergy.test.tsx

@@ -6,7 +6,7 @@ import { Route, Router } from 'react-router-dom'
 import createMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 
-import ViewAllergy from '../../../patients/allergies/viewAllergy'
+import ViewAllergy from '../../../patients/allergies/ViewAllergy'
 import TextInputWithLabelFormGroup from '../../../shared/components/input/TextInputWithLabelFormGroup'
 import Patient from '../../../shared/model/Patient'
 import { RootState } from '../../../shared/store'

src/patients/allergies/Allergies.tsx

@@ -1,16 +1,16 @@
-import { Button, List, ListItem, Alert } from '@hospitalrun/components'
+import { Button, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
-import { Route, Switch, useHistory } from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTranslator from '../../shared/hooks/useTranslator'
-import Allergy from '../../shared/model/Allergy'
 import Patient from '../../shared/model/Patient'
 import Permissions from '../../shared/model/Permissions'
 import { RootState } from '../../shared/store'
+import AllergiesList from './AllergiesList'
 import NewAllergyModal from './NewAllergyModal'
-import ViewAllergy from './viewAllergy'
+import ViewAllergy from './ViewAllergy'
 
 interface AllergiesProps {
   patient: Patient
@@ -21,7 +21,6 @@ const Allergies = (props: AllergiesProps) => {
   const { patient } = props
   const { permissions } = useSelector((state: RootState) => state.user)
   const [showNewAllergyModal, setShowNewAllergyModal] = useState(false)
-  const history = useHistory()
 
   const breadcrumbs = [
     {
@@ -51,16 +50,7 @@ const Allergies = (props: AllergiesProps) => {
       <br />
       <Switch>
         <Route exact path="/patients/:id/allergies">
-          <List>
-            {patient.allergies?.map((a: Allergy) => (
-              <ListItem
-                key={a.id}
-                onClick={() => history.push(`/patients/${patient.id}/allergies/${a.id}`)}
-              >
-                {a.name}
-              </ListItem>
-            ))}
-          </List>
+          <AllergiesList />
         </Route>
         <Route exact path="/patients/:id/allergies/:allergyId">
           <ViewAllergy />

src/patients/allergies/AllergiesList.tsx

@@ -0,0 +1,29 @@
+import { List, ListItem } from '@hospitalrun/components'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+
+import Allergy from '../../shared/model/Allergy'
+import { RootState } from '../../shared/store'
+
+const AllergiesList = () => {
+  const history = useHistory()
+  const { patient } = useSelector((state: RootState) => state.patient)
+  //   console.log('===========================>')
+  //   console.log(patient)
+  return (
+    <List>
+      {patient.allergies?.map((a: Allergy) => (
+        <ListItem
+          action
+          key={a.id}
+          onClick={() => history.push(`/patients/${patient.id}/allergies/${a.id}`)}
+        >
+          {a.name}
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+export default AllergiesList

src/patients/allergies/viewAllergy.tsx → src/patients/allergies/ViewAllergy.tsx

@@ -1,4 +1,3 @@
-import findLast from 'lodash/findLast'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
@@ -17,7 +16,7 @@ const ViewAllergy = () => {
 
   useEffect(() => {
     if (patient && allergyId) {
-      const currentAllergy = findLast(patient.allergies, (a: Allergy) => a.id === allergyId)
+      const currentAllergy = patient.allergies?.find((a: Allergy) => a.id === allergyId)
       setAllergy(currentAllergy)
     }
   }, [setAllergy, allergyId, patient])