feat(edit appointment): use button toolbar, address other PR issues

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, Button } from '@hospitalrun/components'
+import { TabsHeader, Tab } from '@hospitalrun/components'
 import configureMockStore, { MockStore } from 'redux-mock-store'
 import thunk from 'redux-thunk'
 import GeneralInformation from 'patients/GeneralInformation'

src/__tests__/scheduling/appointments/Appointments.test.tsx

@@ -62,7 +62,9 @@ describe('Appointments', () => {
     })
 
     const actualButtons: React.ReactNode[] = setButtonToolBarSpy.mock.calls[0][0]
-    expect((actualButtons[0] as any).props.children).toEqual('scheduling.appointments.new')
+    expect((actualButtons[0] as any).props.children).toEqual(
+      'scheduling.appointments.newAppointment',
+    )
   })
 
   it('should render a calendar with the proper events', async () => {

src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx

@@ -15,6 +15,7 @@ import { Spinner } from '@hospitalrun/components'
 import AppointmentDetailForm from 'scheduling/appointments/AppointmentDetailForm'
 import PatientRepository from 'clients/db/PatientRepository'
 import Patient from 'model/Patient'
+import * as ButtonBarProvider from 'page-header/ButtonBarProvider'
 import * as titleUtil from '../../../../page-header/useTitle'
 import * as appointmentSlice from '../../../../scheduling/appointments/appointment-slice'
 
@@ -72,7 +73,7 @@ describe('View Appointment', () => {
   }
 
   beforeEach(() => {
-    jest.resetAllMocks()
+    jest.restoreAllMocks()
   })
 
   it('should use the correct title', async () => {
@@ -84,6 +85,17 @@ describe('View Appointment', () => {
     expect(titleUtil.default).toHaveBeenCalledWith('scheduling.appointments.viewAppointment')
   })
 
+  it('should add a "Edit Appointment" button to the button tool bar', () => {
+    jest.spyOn(ButtonBarProvider, 'useButtonToolbarSetter')
+    const setButtonToolBarSpy = jest.fn()
+    mocked(ButtonBarProvider).useButtonToolbarSetter.mockReturnValue(setButtonToolBarSpy)
+
+    setup(true)
+
+    const actualButtons: React.ReactNode[] = setButtonToolBarSpy.mock.calls[0][0]
+    expect((actualButtons[0] as any).props.children).toEqual('actions.edit')
+  })
+
   it('should dispatch getAppointment if id is present', async () => {
     await act(async () => {
       await setup(true)

src/patients/edit/EditPatient.tsx

@@ -86,10 +86,10 @@ const EditPatient = () => {
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg">
-          <Button className="mr-2" color="success" onClick={() => onSave()}>
+          <Button className="mr-2" color="success" onClick={onSave}>
             {t('actions.save')}
           </Button>
-          <Button color="danger" onClick={() => onCancel()}>
+          <Button color="danger" onClick={onCancel}>
             {t('actions.cancel')}
           </Button>
         </div>

src/patients/new/NewPatient.tsx

@@ -57,10 +57,10 @@ const NewPatient = () => {
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg">
-          <Button className="mr-2" color="success" onClick={() => onSave()}>
+          <Button className="mr-2" color="success" onClick={onSave}>
             {t('actions.save')}
           </Button>
-          <Button color="danger" onClick={() => onCancel()}>
+          <Button color="danger" onClick={onCancel}>
             {t('actions.cancel')}
           </Button>
         </div>

src/scheduling/appointments/Appointments.tsx

@@ -33,7 +33,7 @@ const Appointments = () => {
       icon="appointment-add"
       onClick={() => history.push('/appointments/new')}
     >
-      {t('scheduling.appointments.new')}
+      {t('scheduling.appointments.newAppointment')}
     </Button>,
   ])
 

src/scheduling/appointments/edit/EditAppointment.tsx

@@ -74,10 +74,10 @@ const EditAppointment = () => {
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg">
-          <Button className="mr-2" color="success" onClick={() => onSave()}>
+          <Button className="mr-2" color="success" onClick={onSave}>
             {t('actions.save')}
           </Button>
-          <Button color="danger" onClick={() => onCancel()}>
+          <Button color="danger" onClick={onCancel}>
             {t('actions.cancel')}
           </Button>
         </div>

src/scheduling/appointments/view/ViewAppointment.tsx

@@ -5,6 +5,8 @@ import { RootState } from 'store'
 import { useParams, useHistory } from 'react-router'
 import { Spinner, Button } from '@hospitalrun/components'
 import { useTranslation } from 'react-i18next'
+
+import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import { fetchAppointment } from '../appointment-slice'
 import AppointmentDetailForm from '../AppointmentDetailForm'
 
@@ -16,35 +18,38 @@ const ViewAppointment = () => {
   const history = useHistory()
   const { appointment, patient, isLoading } = useSelector((state: RootState) => state.appointment)
 
+  const setButtonToolBar = useButtonToolbarSetter()
+  console.log('setButtonToolBar was: ')
+  console.log(setButtonToolBar)
+  setButtonToolBar([
+    <Button
+      key="editAppointmentButton"
+      color="success"
+      icon="edit"
+      outlined
+      onClick={() => {
+        history.push(`/appointments/edit/${appointment.id}`)
+      }}
+    >
+      {t('actions.edit')}
+    </Button>,
+  ])
+
   useEffect(() => {
     if (id) {
       dispatch(fetchAppointment(id))
     }
-  }, [dispatch, id])
+
+    return () => {
+      setButtonToolBar([])
+    }
+  }, [dispatch, id, setButtonToolBar])
 
   if (!appointment.id || isLoading) {
     return <Spinner type="BarLoader" loading />
   }
 
-  return (
-    <div>
-      <div className="row">
-        <div className="col-md-12 d-flex justify-content-end">
-          <Button
-            color="success"
-            outlined
-            icon="edit"
-            onClick={() => {
-              history.push(`/appointments/edit/${appointment.id}`)
-            }}
-          >
-            {t('actions.edit')}
-          </Button>
-        </div>
-      </div>
-      <AppointmentDetailForm appointment={appointment} isEditable={false} patient={patient} />
-    </div>
-  )
+  return <AppointmentDetailForm appointment={appointment} isEditable={false} patient={patient} />
 }
 
 export default ViewAppointment