feat(edit patient): moved buttons out of GeneralInformation

Instead of conditionally rendering buttons in GeneralInformation, render them in their parent
components (New/View/Edit Patient).

src/__tests__/patients/GeneralInformation.test.tsx

@@ -5,78 +5,9 @@ import { mount, ReactWrapper } from 'enzyme'
 import GeneralInformation from 'patients/GeneralInformation'
 import { createMemoryHistory } from 'history'
 import { Alert } from '@hospitalrun/components'
-import { render, act, fireEvent } from '@testing-library/react'
+import { act } from '@testing-library/react'
 import Patient from '../../model/Patient'
 
-describe('Save button', () => {
-  it('should call the onSave prop', () => {
-    const onSave = jest.fn()
-    const history = createMemoryHistory()
-    const generalInformationWrapper = render(
-      <Router history={history}>
-        <GeneralInformation
-          isEditable
-          patient={{} as Patient}
-          onCancel={jest.fn()}
-          onSave={onSave}
-        />
-      </Router>,
-    )
-
-    const saveButton = generalInformationWrapper.getByText('actions.save')
-
-    act(() => {
-      fireEvent.click(saveButton)
-    })
-
-    expect(onSave).toHaveBeenCalledTimes(1)
-  })
-})
-
-describe('Cancel button', () => {
-  it('should call the onCancel prop', () => {
-    const onCancel = jest.fn()
-    const history = createMemoryHistory()
-    const generalInformationWrapper = render(
-      <Router history={history}>
-        <GeneralInformation
-          isEditable
-          patient={{} as Patient}
-          onCancel={onCancel}
-          onSave={jest.fn()}
-        />
-      </Router>,
-    )
-
-    const cancelButton = generalInformationWrapper.getByText('actions.cancel')
-
-    act(() => {
-      fireEvent.click(cancelButton)
-    })
-
-    expect(onCancel).toHaveBeenCalledTimes(1)
-  })
-})
-
-describe('Edit button', () => {
-  it('should navigate to edit patient route when clicked', () => {
-    const history = createMemoryHistory()
-    const generalInformationWrapper = render(
-      <Router history={history}>
-        <GeneralInformation patient={{ id: '12345' } as Patient} />
-      </Router>,
-    )
-
-    const editButton = generalInformationWrapper.getByText('actions.edit')
-
-    act(() => {
-      fireEvent.click(editButton)
-    })
-
-    expect(history.location.pathname).toEqual('/patients/edit/12345')
-  })
-})
-
 describe('Error handling', () => {
   it('should display no given name error when errorMessage prop is non-empty string', () => {
     const history = createMemoryHistory()
@@ -85,8 +16,6 @@ describe('Error handling', () => {
         <GeneralInformation
           patient={{} as Patient}
           isEditable
-          onSave={jest.fn()}
-          onCancel={jest.fn()}
           errorMessage="patient.errors.patientGivenNameRequired"
         />
       </Router>,

src/__tests__/patients/edit/EditPatient.test.tsx

@@ -8,6 +8,7 @@ import { createMemoryHistory } from 'history'
 import { act } from 'react-dom/test-utils'
 import configureMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
+import { Button } from '@hospitalrun/components'
 import EditPatient from '../../../patients/edit/EditPatient'
 import GeneralInformation from '../../../patients/GeneralInformation'
 import Patient from '../../../model/Patient'
@@ -98,24 +99,34 @@ describe('Edit Patient', () => {
 
     wrapper.update()
 
-    const generalInformationForm = wrapper.find(GeneralInformation)
-    await generalInformationForm.prop('onSave')(patient)
+    const saveButton = wrapper.find(Button).at(0)
+    const onClick = saveButton.prop('onClick') as any
+    expect(saveButton.text().trim()).toEqual('actions.save')
+
+    act(() => {
+      onClick()
+    })
+
     expect(patientSlice.updatePatient).toHaveBeenCalledWith(patient, expect.anything())
   })
 
-  // should check that it's navigating to '/patients/:id' but can't figure out how to mock
-  // useParams to get the id
-  // it('should navigate to /patients when cancel is clicked', async () => {
-  //   let wrapper: any
-  //   await act(async () => {
-  //     wrapper = await setup()
-  //   })
-
-  //   act(() => {
-  //     wrapper.find(GeneralInformation).prop('onCancel')()
-  //   })
-
-  //   wrapper.update()
-  //   expect(history.location.pathname).toEqual('/patients')
-  // })
+  it('should navigate to /patients/:id when cancel is clicked', async () => {
+    let wrapper: any
+    await act(async () => {
+      wrapper = await setup()
+    })
+
+    wrapper.update()
+
+    const cancelButton = wrapper.find(Button).at(1)
+    const onClick = cancelButton.prop('onClick') as any
+    expect(cancelButton.text().trim()).toEqual('actions.cancel')
+
+    act(() => {
+      onClick()
+    })
+
+    wrapper.update()
+    expect(history.location.pathname).toEqual('/patients/123')
+  })
 })

src/__tests__/patients/new/NewPatient.test.tsx

@@ -6,6 +6,7 @@ import { Provider } from 'react-redux'
 import { mocked } from 'ts-jest/utils'
 import { createMemoryHistory } from 'history'
 import { act } from 'react-dom/test-utils'
+import { Button } from '@hospitalrun/components'
 
 import NewPatient from '../../../patients/new/NewPatient'
 import GeneralInformation from '../../../patients/GeneralInformation'
@@ -56,8 +57,12 @@ describe('New Patient', () => {
     const generalInformationForm = wrapper.find(GeneralInformation)
     expect(generalInformationForm.prop('errorMessage')).toBe('')
 
+    const saveButton = wrapper.find(Button).at(0)
+    const onClick = saveButton.prop('onClick') as any
+    expect(saveButton.text().trim()).toEqual('actions.save')
+
     act(() => {
-      generalInformationForm.prop('onSave')()
+      onClick()
     })
 
     wrapper.update()
@@ -91,7 +96,14 @@ describe('New Patient', () => {
     })
 
     wrapper.update()
-    wrapper.find(GeneralInformation).prop('onSave')()
+
+    const saveButton = wrapper.find(Button).at(0)
+    const onClick = saveButton.prop('onClick') as any
+    expect(saveButton.text().trim()).toEqual('actions.save')
+
+    act(() => {
+      onClick()
+    })
 
     expect(patientSlice.createPatient).toHaveBeenCalledWith(patient, expect.anything())
   })
@@ -106,8 +118,12 @@ describe('New Patient', () => {
       </Provider>,
     )
 
+    const cancelButton = wrapper.find(Button).at(1)
+    const onClick = cancelButton.prop('onClick') as any
+    expect(cancelButton.text().trim()).toEqual('actions.cancel')
+
     act(() => {
-      wrapper.find(GeneralInformation).prop('onCancel')()
+      onClick()
     })
 
     expect(history.location.pathname).toEqual('/patients')

src/__tests__/patients/view/ViewPatient.test.tsx

@@ -5,7 +5,7 @@ import { mount } from 'enzyme'
 import { mocked } from 'ts-jest/utils'
 import { act } from 'react-dom/test-utils'
 import { Route, Router } from 'react-router-dom'
-import { TabsHeader, Tab } from '@hospitalrun/components'
+import { TabsHeader, Tab, Button } from '@hospitalrun/components'
 import GeneralInformation from 'patients/GeneralInformation'
 import { createMemoryHistory } from 'history'
 import RelatedPersonTab from 'patients/related-persons/RelatedPersonTab'
@@ -65,6 +65,25 @@ describe('ViewPatient', () => {
     jest.restoreAllMocks()
   })
 
+  it('should navigate to /patients/edit/:id when edit is clicked', async () => {
+    let wrapper: any
+    await act(async () => {
+      wrapper = await setup()
+    })
+
+    wrapper.update()
+
+    const editButton = wrapper.find(Button).at(2)
+    const onClick = editButton.prop('onClick') as any
+    expect(editButton.text().trim()).toEqual('actions.edit')
+
+    act(() => {
+      onClick()
+    })
+
+    expect(history.location.pathname).toEqual('/patients/edit/123')
+  })
+
   it('should render a header with the patients given, family, and suffix', async () => {
     jest.spyOn(titleUtil, 'default')
     await act(async () => {

src/patients/GeneralInformation.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import { Panel, Button, Checkbox, Alert } from '@hospitalrun/components'
-
-import { useHistory } from 'react-router'
+import { Panel, Checkbox, Alert } from '@hospitalrun/components'
 import { useTranslation } from 'react-i18next'
 import { startOfDay, subYears, differenceInYears } from 'date-fns'
 
@@ -14,16 +12,13 @@ import DatePickerWithLabelFormGroup from '../components/input/DatePickerWithLabe
 interface Props {
   patient: Patient
   isEditable?: boolean
-  onCancel?: () => void
-  onSave?: () => void
-  onFieldChange?: (key: string, value: string | boolean) => void
   errorMessage?: string
+  onFieldChange?: (key: string, value: string | boolean) => void
 }
 
 const GeneralInformation = (props: Props) => {
   const { t } = useTranslation()
-  const { patient, isEditable, onCancel, onSave, onFieldChange, errorMessage } = props
-  const history = useHistory()
+  const { patient, isEditable, onFieldChange, errorMessage } = props
 
   const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>, fieldName: string) =>
     onFieldChange && onFieldChange(fieldName, event.target.value)
@@ -53,20 +48,6 @@ const GeneralInformation = (props: Props) => {
 
   return (
     <div>
-      {!isEditable && (
-        <div className="row">
-          <div className="col-md-12 d-flex justify-content-end">
-            <Button
-              color="success"
-              outlined
-              onClick={() => history.push(`/patients/edit/${patient.id}`)}
-            >
-              {t('actions.edit')}
-            </Button>
-          </div>
-        </div>
-      )}
-      <br />
       <Panel title={t('patient.basicInformation')} color="primary" collapsible>
         {errorMessage && <Alert className="alert" color="danger" message={errorMessage} />}
         <div className="row">
@@ -255,16 +236,6 @@ const GeneralInformation = (props: Props) => {
           </div>
         </div>
       </Panel>
-      {isEditable && (
-        <div className="row">
-          <div className="col-md-12 d-flex justify-content-start">
-            <Button onClick={() => onSave && onSave()}> {t('actions.save')}</Button>
-            <Button color="danger" onClick={onCancel && (() => onCancel())}>
-              {t('actions.cancel')}
-            </Button>
-          </div>
-        </div>
-      )}
     </div>
   )
 }

src/patients/edit/EditPatient.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { Spinner } from '@hospitalrun/components'
+import { Spinner, Button } from '@hospitalrun/components'
 
 import GeneralInformation from '../GeneralInformation'
 import useTitle from '../../page-header/useTitle'
@@ -46,7 +46,7 @@ const EditPatient = () => {
   }, [id, dispatch])
 
   const onCancel = () => {
-    history.push(`/patients/${id}`)
+    history.push(`/patients/${patient.id}`)
   }
 
   const onSave = () => {
@@ -77,14 +77,24 @@ const EditPatient = () => {
   }
 
   return (
-    <GeneralInformation
-      isEditable
-      patient={patient}
-      onCancel={onCancel}
-      onSave={onSave}
-      onFieldChange={onFieldChange}
-      errorMessage={errorMessage}
-    />
+    <div>
+      <GeneralInformation
+        isEditable
+        patient={patient}
+        onFieldChange={onFieldChange}
+        errorMessage={errorMessage}
+      />
+      <div className="row float-right">
+        <div className="btn-group btn-group-lg">
+          <Button className="mr-2" color="success" onClick={() => onSave()}>
+            {t('actions.save')}
+          </Button>
+          <Button color="danger" onClick={() => onCancel()}>
+            {t('actions.cancel')}
+          </Button>
+        </div>
+      </div>
+    </div>
   )
 }
 

src/patients/new/NewPatient.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
+import { Button } from '@hospitalrun/components'
 
 import GeneralInformation from '../GeneralInformation'
 import useTitle from '../../page-header/useTitle'
@@ -47,14 +48,24 @@ const NewPatient = () => {
   }
 
   return (
-    <GeneralInformation
-      isEditable
-      onCancel={onCancel}
-      onSave={onSave}
-      patient={patient}
-      onFieldChange={onFieldChange}
-      errorMessage={errorMessage}
-    />
+    <div>
+      <GeneralInformation
+        isEditable
+        patient={patient}
+        onFieldChange={onFieldChange}
+        errorMessage={errorMessage}
+      />
+      <div className="row float-right">
+        <div className="btn-group btn-group-lg">
+          <Button className="mr-2" color="success" onClick={() => onSave()}>
+            {t('actions.save')}
+          </Button>
+          <Button color="danger" onClick={() => onCancel()}>
+            {t('actions.cancel')}
+          </Button>
+        </div>
+      </div>
+    </div>
   )
 }