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

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

@@ -29,9 +29,14 @@ const expectedPatient = {
 let user: any
 let store: any
 
-const setup = (patient = expectedPatient, permissions = [Permissions.AddAllergy]) => {
+const setup = (
+  patient = expectedPatient,
+  permissions = [Permissions.AddAllergy],
+  route = '/patients/123/allergies',
+) => {
   user = { permissions }
   store = mockStore({ patient, user } as any)
+  history.push(route)
   const wrapper = mount(
     <Router history={history}>
       <Provider store={store}>

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,6 +1,7 @@
 import { Button, List, ListItem, Alert } from '@hospitalrun/components'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
+import { Route, Switch, useHistory } from 'react-router-dom'
 
 import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
 import useTranslator from '../../shared/hooks/useTranslator'
@@ -9,6 +10,7 @@ import Patient from '../../shared/model/Patient'
 import Permissions from '../../shared/model/Permissions'
 import { RootState } from '../../shared/store'
 import NewAllergyModal from './NewAllergyModal'
+import ViewAllergy from './viewAllergy'
 
 interface AllergiesProps {
   patient: Patient
@@ -19,6 +21,7 @@ const Allergies = (props: AllergiesProps) => {
   const { patient } = props
   const { permissions } = useSelector((state: RootState) => state.user)
   const [showNewAllergyModal, setShowNewAllergyModal] = useState(false)
+  const history = useHistory()
 
   const breadcrumbs = [
     {
@@ -46,18 +49,30 @@ const Allergies = (props: AllergiesProps) => {
         </div>
       </div>
       <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>
+        </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/viewAllergy.tsx

@@ -0,0 +1,41 @@
+import findLast from 'lodash/findLast'
+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 = findLast(patient.allergies, (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`}>