feat(toolbar): change edit patient to toolbar button

src/__tests__/page-header/ButtonToolBar.test.tsx

@@ -12,7 +12,10 @@ describe('Button Tool Bar', () => {
   })
 
   it('should render the buttons in the provider', () => {
-    const buttons: React.ReactNode[] = [<Button>Test 1</Button>, <Button>Test</Button>]
+    const buttons: React.ReactNode[] = [
+      <Button key="test1">Test 1</Button>,
+      <Button key="test2">Test 2</Button>,
+    ]
     jest.spyOn(ButtonBarProvider, 'useButtons')
     mocked(ButtonBarProvider).useButtons.mockReturnValue(buttons)
 

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

@@ -11,6 +11,7 @@ import thunk from 'redux-thunk'
 import GeneralInformation from 'patients/GeneralInformation'
 import { createMemoryHistory } from 'history'
 import RelatedPersonTab from 'patients/related-persons/RelatedPersonTab'
+import * as ButtonBarProvider from 'page-header/ButtonBarProvider'
 import Patient from '../../../model/Patient'
 import PatientRepository from '../../../clients/db/PatientRepository'
 import * as titleUtil from '../../../page-header/useTitle'
@@ -71,25 +72,6 @@ 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(3)
-    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 dispatch fetchPatient when component loads', async () => {
     await act(async () => {
       await setup()
@@ -110,6 +92,17 @@ describe('ViewPatient', () => {
     )
   })
 
+  it('should add a "Edit Patient" button to the button tool bar', () => {
+    jest.spyOn(ButtonBarProvider, 'useButtonToolbarSetter')
+    const setButtonToolBarSpy = jest.fn()
+    mocked(ButtonBarProvider).useButtonToolbarSetter.mockReturnValue(setButtonToolBarSpy)
+
+    setup()
+
+    const actualButtons: React.ReactNode[] = setButtonToolBarSpy.mock.calls[0][0]
+    expect((actualButtons[0] as any).props.children).toEqual('actions.edit')
+  })
+
   it('should render a tabs header with the correct tabs', async () => {
     let wrapper: any
     await act(async () => {

src/page-header/ButtonBarProvider.tsx

@@ -7,7 +7,9 @@ type Props = {
 type ButtonUpdater = (buttons: React.ReactNode[]) => void
 
 const ButtonBarStateContext = React.createContext<React.ReactNode[]>([])
-const ButtonBarUpdateContext = React.createContext<ButtonUpdater>(() => {})
+const ButtonBarUpdateContext = React.createContext<ButtonUpdater>(() => {
+  // empty initial state
+})
 
 function ButtonBarProvider(props: Props) {
   const { children } = props
@@ -19,10 +21,7 @@ function ButtonBarProvider(props: Props) {
   )
 }
 function useButtons() {
-  console.log('use buttons')
   const context = React.useContext(ButtonBarStateContext)
-  console.log('bug')
-  console.log(context)
   if (context === undefined) {
     throw new Error('useButtons must be used within a Button Bar Context')
   }

src/patients/list/Patients.tsx

@@ -18,6 +18,7 @@ const Patients = () => {
   const setButtonToolBar = useButtonToolbarSetter()
   setButtonToolBar([
     <Button
+      key="newPatientButton"
       outlined
       color="success"
       icon="patient-add"

src/patients/view/ViewPatient.tsx

@@ -4,6 +4,7 @@ import { useParams, withRouter, Route, useHistory, useLocation } from 'react-rou
 import { Panel, Spinner, TabsHeader, Tab, Button } from '@hospitalrun/components'
 import { useTranslation } from 'react-i18next'
 
+import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import useTitle from '../../page-header/useTitle'
 import { fetchPatient } from '../patient-slice'
 import { RootState } from '../../store'
@@ -31,12 +32,31 @@ const ViewPatient = () => {
 
   useTitle(`${getPatientFullName(patient)} (${getFriendlyId(patient)})`)
 
+  const setButtonToolBar = useButtonToolbarSetter()
+  setButtonToolBar([
+    <Button
+      key="editPatientButton"
+      color="success"
+      icon="edit"
+      outlined
+      onClick={() => {
+        history.push(`/patients/edit/${patient.id}`)
+      }}
+    >
+      {t('actions.edit')}
+    </Button>,
+  ])
+
   const { id } = useParams()
   useEffect(() => {
     if (id) {
       dispatch(fetchPatient(id))
     }
-  }, [dispatch, id])
+
+    return () => {
+      setButtonToolBar([])
+    }
+  }, [dispatch, id, setButtonToolBar])
 
   if (isLoading || !patient) {
     return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
@@ -63,21 +83,6 @@ const ViewPatient = () => {
       </TabsHeader>
       <Panel>
         <Route exact path="/patients/:id">
-          <div className="row">
-            <div className="col-md-12 d-flex justify-content-end">
-              <Button
-                color="success"
-                outlined
-                icon="edit"
-                onClick={() => {
-                  history.push(`/patients/edit/${patient.id}`)
-                }}
-              >
-                {t('actions.edit')}
-              </Button>
-            </div>
-          </div>
-          <br />
           <GeneralInformation patient={patient} />
         </Route>
         <Route exact path="/patients/:id/relatedpersons">

src/scheduling/appointments/Appointments.tsx

@@ -27,6 +27,7 @@ const Appointments = () => {
   const setButtonToolBar = useButtonToolbarSetter()
   setButtonToolBar([
     <Button
+      key="newAppointmentButton"
       outlined
       color="success"
       icon="appointment-add"