From 450b8cd2f864ce25068f97aef0f6b4616a8b0a2b Mon Sep 17 00:00:00 2001
From: Jack Meyer <jackcmeyer@gmail.com>
Date: Mon, 17 Feb 2020 23:54:40 -0600
Subject: [PATCH] feat(toolbar): change edit patient to toolbar button

---
 .../page-header/ButtonToolBar.test.tsx        |  5 ++-
 .../patients/view/ViewPatient.test.tsx        | 31 ++++++----------
 src/page-header/ButtonBarProvider.tsx         |  7 ++--
 src/patients/list/Patients.tsx                |  1 +
 src/patients/view/ViewPatient.tsx             | 37 +++++++++++--------
 src/scheduling/appointments/Appointments.tsx  |  1 +
 6 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/__tests__/page-header/ButtonToolBar.test.tsx b/src/__tests__/page-header/ButtonToolBar.test.tsx
index 6f32b51e84..5c79e2f337 100644
--- a/src/__tests__/page-header/ButtonToolBar.test.tsx
+++ b/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)
 
diff --git a/src/__tests__/patients/view/ViewPatient.test.tsx b/src/__tests__/patients/view/ViewPatient.test.tsx
index 01eed0a4b5..15bc7f1810 100644
--- a/src/__tests__/patients/view/ViewPatient.test.tsx
+++ b/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 () => {
diff --git a/src/page-header/ButtonBarProvider.tsx b/src/page-header/ButtonBarProvider.tsx
index 5cf8068342..9d5d4698fe 100644
--- a/src/page-header/ButtonBarProvider.tsx
+++ b/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')
   }
diff --git a/src/patients/list/Patients.tsx b/src/patients/list/Patients.tsx
index 54ff755bb2..1a8373eee4 100644
--- a/src/patients/list/Patients.tsx
+++ b/src/patients/list/Patients.tsx
@@ -18,6 +18,7 @@ const Patients = () => {
   const setButtonToolBar = useButtonToolbarSetter()
   setButtonToolBar([
     <Button
+      key="newPatientButton"
       outlined
       color="success"
       icon="patient-add"
diff --git a/src/patients/view/ViewPatient.tsx b/src/patients/view/ViewPatient.tsx
index e54ff562a5..1d221e1ce0 100644
--- a/src/patients/view/ViewPatient.tsx
+++ b/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">
diff --git a/src/scheduling/appointments/Appointments.tsx b/src/scheduling/appointments/Appointments.tsx
index 35cd8da272..55d618d98a 100644
--- a/src/scheduling/appointments/Appointments.tsx
+++ b/src/scheduling/appointments/Appointments.tsx
@@ -27,6 +27,7 @@ const Appointments = () => {
   const setButtonToolBar = useButtonToolbarSetter()
   setButtonToolBar([
     <Button
+      key="newAppointmentButton"
       outlined
       color="success"
       icon="appointment-add"