fix(breadcrumb): add the breadcrumb for the edit appointment view

fix #1854

src/__tests__/HospitalRun.test.tsx

@@ -327,22 +327,34 @@ describe('HospitalRun', () => {
         mockedAppointmentRepository.find.mockResolvedValue(appointment)
         mockedPatientRepository.find.mockResolvedValue(patient)
 
+        const store = mockStore({
+          title: 'test',
+          user: { permissions: [Permissions.WriteAppointments, Permissions.ReadAppointments] },
+          appointment: { appointment, patient: {} as Patient },
+          breadcrumbs: { breadcrumbs: [] },
+        })
+
         const wrapper = mount(
-          <Provider
-            store={mockStore({
-              title: 'test',
-              user: { permissions: [Permissions.WriteAppointments, Permissions.ReadAppointments] },
-              appointment: { appointment: {} as Appointment, patient: {} as Patient },
-              breadcrumbs: { breadcrumbs: [] },
-            })}
-          >
+          <Provider store={store}>
             <MemoryRouter initialEntries={['/appointments/edit/123']}>
               <HospitalRun />
             </MemoryRouter>
           </Provider>,
         )
 
         expect(wrapper.find(EditAppointment)).toHaveLength(1)
+
+        expect(store.getActions()).toContainEqual(
+          addBreadcrumbs([
+            { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+            { text: '123', location: '/appointments/123' },
+            {
+              i18nKey: 'scheduling.appointments.editAppointment',
+              location: '/appointments/edit/123',
+            },
+            { i18nKey: 'dashboard.label', location: '/' },
+          ]),
+        )
       })
 
       it('should render the Dashboard when the user does not have read appointment privileges', () => {

src/__tests__/scheduling/appointments/util/scheduling-appointment.util.test.ts

@@ -0,0 +1,46 @@
+import Appointment from 'model/Appointment'
+import { getAppointmentLabel } from '../../../../scheduling/appointments/util/scheduling-appointment.util'
+
+describe('scheduling appointment util', () => {
+  describe('getAppointmentLabel', () => {
+    it('should return the locale string representation of the start time and end time', () => {
+      const appointment = {
+        id: '123',
+        startDateTime: '2020-03-07T18:15:00.000Z',
+        endDateTime: '2020-03-07T20:15:00.000Z',
+      } as Appointment
+
+      expect(getAppointmentLabel(appointment)).toEqual(
+        `${new Date(appointment.startDateTime).toLocaleString()} - ${new Date(
+          appointment.endDateTime,
+        ).toLocaleString()}`,
+      )
+    })
+
+    it('should return the appointment id when start time is not defined', () => {
+      const appointment = {
+        id: '123',
+        startDateTime: '2020-03-07T18:15:00.000Z',
+      } as Appointment
+
+      expect(getAppointmentLabel(appointment)).toEqual('123')
+    })
+
+    it('should return the appointment id when end time is not defined', () => {
+      const appointment = {
+        id: '123',
+        endDateTime: '2020-03-07T20:15:00.000Z',
+      } as Appointment
+
+      expect(getAppointmentLabel(appointment)).toEqual('123')
+    })
+
+    it('should return the appointment id when start time and end time are not defined', () => {
+      const appointment = {
+        id: '123',
+      } as Appointment
+
+      expect(getAppointmentLabel(appointment)).toEqual('123')
+    })
+  })
+})

src/scheduling/appointments/edit/EditAppointment.tsx

@@ -10,6 +10,8 @@ import useTitle from '../../../page-header/useTitle'
 import Appointment from '../../../model/Appointment'
 import { updateAppointment, fetchAppointment } from '../appointment-slice'
 import { RootState } from '../../../store'
+import { getAppointmentLabel } from '../util/scheduling-appointment.util'
+import useAddBreadcrumbs from '../../../breadcrumbs/useAddBreadcrumbs'
 
 const EditAppointment = () => {
   const { t } = useTranslation()
@@ -22,6 +24,18 @@ const EditAppointment = () => {
   const { appointment: reduxAppointment, patient, isLoading } = useSelector(
     (state: RootState) => state.appointment,
   )
+  const breadcrumbs = [
+    { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+    {
+      text: getAppointmentLabel(reduxAppointment),
+      location: `/appointments/${reduxAppointment.id}`,
+    },
+    {
+      i18nKey: 'scheduling.appointments.editAppointment',
+      location: `/appointments/edit/${reduxAppointment.id}`,
+    },
+  ]
+  useAddBreadcrumbs(breadcrumbs, true)
 
   useEffect(() => {
     setAppointment(reduxAppointment)

src/scheduling/appointments/util/scheduling-appointment.util.ts

@@ -0,0 +1,9 @@
+import Appointment from '../../../model/Appointment'
+
+export function getAppointmentLabel(appointment: Appointment) {
+  const { id, startDateTime, endDateTime } = appointment
+
+  return startDateTime && endDateTime
+    ? `${new Date(startDateTime).toLocaleString()} - ${new Date(endDateTime).toLocaleString()}`
+    : id
+}

src/scheduling/appointments/view/ViewAppointment.tsx

@@ -7,19 +7,11 @@ import { Spinner, Button, Modal } from '@hospitalrun/components'
 import { useTranslation } from 'react-i18next'
 import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import Permissions from 'model/Permissions'
-import Appointment from 'model/Appointment'
 import { fetchAppointment, deleteAppointment } from '../appointment-slice'
 import AppointmentDetailForm from '../AppointmentDetailForm'
+import { getAppointmentLabel } from '../util/scheduling-appointment.util'
 import useAddBreadcrumbs from '../../../breadcrumbs/useAddBreadcrumbs'
 
-function getAppointmentLabel(appointment: Appointment) {
-  const { id, startDateTime, endDateTime } = appointment
-
-  return startDateTime && endDateTime
-    ? `${new Date(startDateTime).toLocaleString()} - ${new Date(endDateTime).toLocaleString()}`
-    : id
-}
-
 const ViewAppointment = () => {
   const { t } = useTranslation()
   useTitle(t('scheduling.appointments.viewAppointment'))