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

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,12 +26,15 @@ const expectedPatient = {
   ],
 } as Patient
 
-let user: any
 let store: any
 
-const setup = (patient = expectedPatient, permissions = [Permissions.AddAllergy]) => {
-  user = { permissions }
-  store = mockStore({ patient, user } as any)
+const setup = (
+  patient = expectedPatient,
+  permissions = [Permissions.AddAllergy],
+  route = '/patients/123/allergies',
+) => {
+  store = mockStore({ patient: { patient }, user: { permissions } } as any)
+  history.push(route)
   const wrapper = mount(
     <Router history={history}>
       <Provider store={store}>
@@ -81,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

@@ -0,0 +1,46 @@
+import { mount } from 'enzyme'
+import { createMemoryHistory } from 'history'
+import React from 'react'
+import { Provider } from 'react-redux'
+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 TextInputWithLabelFormGroup from '../../../shared/components/input/TextInputWithLabelFormGroup'
+import Patient from '../../../shared/model/Patient'
+import { RootState } from '../../../shared/store'
+
+const mockStore = createMockStore<RootState, any>([thunk])
+
+describe('View Care Plan', () => {
+  const patient = {
+    id: 'patientId',
+    allergies: [{ id: '123', name: 'some name' }],
+  } as Patient
+
+  const setup = () => {
+    const store = mockStore({ patient: { patient }, user: { user: { id: '123' } } } as any)
+    const history = createMemoryHistory()
+    history.push(`/patients/${patient.id}/allergies/${patient.allergies![0].id}`)
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <Route path="/patients/:id/allergies/:allergyId">
+            <ViewAllergy />
+          </Route>
+        </Router>
+      </Provider>,
+    )
+
+    return { wrapper }
+  }
+
+  it('should render a allergy input with the correct data', () => {
+    const { wrapper } = setup()
+
+    const allergyName = wrapper.find(TextInputWithLabelFormGroup)
+    expect(allergyName).toHaveLength(1)
+    expect(allergyName.prop('value')).toEqual(patient.allergies![0].name)
+  })
+})

src/patients/allergies/Allergies.tsx

@@ -1,14 +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 } 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'
 
 interface AllergiesProps {
   patient: Patient
@@ -46,18 +48,21 @@ const Allergies = (props: AllergiesProps) => {
         </div>
       </div>
       <br />
+      <Switch>
+        <Route exact path="/patients/:id/allergies">
+          <AllergiesList />
+        </Route>
+        <Route exact path="/patients/:id/allergies/:allergyId">
+          <ViewAllergy />
+        </Route>
+      </Switch>
       {(!patient.allergies || patient.allergies.length === 0) && (
         <Alert
           color="warning"
           title={t('patient.allergies.warning.noAllergies')}
           message={t('patient.allergies.addAllergyAbove')}
         />
       )}
-      <List>
-        {patient.allergies?.map((a: Allergy) => (
-          <ListItem key={a.id}>{a.name}</ListItem>
-        ))}
-      </List>
       <NewAllergyModal
         show={showNewAllergyModal}
         onCloseButtonClick={() => setShowNewAllergyModal(false)}

src/patients/allergies/AllergiesList.tsx

@@ -0,0 +1,28 @@
+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)
+
+  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

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { useParams } from 'react-router-dom'
+
+import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
+import useTranslator from '../../shared/hooks/useTranslator'
+import Allergy from '../../shared/model/Allergy'
+import { RootState } from '../../shared/store'
+
+const ViewAllergy = () => {
+  const { t } = useTranslator()
+  const { patient } = useSelector((root: RootState) => root.patient)
+  const { allergyId } = useParams()
+
+  const [allergy, setAllergy] = useState<Allergy | undefined>()
+
+  useEffect(() => {
+    if (patient && allergyId) {
+      const currentAllergy = patient.allergies?.find((a: Allergy) => a.id === allergyId)
+      setAllergy(currentAllergy)
+    }
+  }, [setAllergy, allergyId, patient])
+
+  if (allergy) {
+    return (
+      <>
+        <TextInputWithLabelFormGroup
+          name="name"
+          label={t('patient.allergies.allergyName')}
+          isEditable={false}
+          placeholder={t('patient.allergies.allergyName')}
+          value={allergy.name}
+        />
+      </>
+    )
+  }
+  return <></>
+}
+
+export default ViewAllergy

src/patients/view/ViewPatient.tsx

@@ -144,7 +144,7 @@ const ViewPatient = () => {
         <Route exact path={`${path}/appointments`}>
           <AppointmentsList patientId={patient.id} />
         </Route>
-        <Route exact path={`${path}/allergies`}>
+        <Route path={`${path}/allergies`}>
           <Allergies patient={patient} />
         </Route>
         <Route exact path={`${path}/diagnoses`}>