feat(breadcrumb): display the breadcrumb in the appointment components

fix #1770

src/scheduling/appointments/Appointments.tsx

@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { RootState } from 'store'
 import { useHistory } from 'react-router'
 import PatientRepository from 'clients/db/PatientRepository'
+import useSetBreadcrumbs from 'breadcrumbs/useSetBreadcrumbs'
 import { fetchAppointments } from './appointments-slice'
 
 interface Event {
@@ -16,10 +17,13 @@ interface Event {
   allDay: boolean
 }
 
+const breadcrumbs = [{ i18nKey: 'scheduling.appointments.label', location: '/patients' }]
+
 const Appointments = () => {
   const { t } = useTranslation()
   const history = useHistory()
   useTitle(t('scheduling.appointments.label'))
+  useSetBreadcrumbs(breadcrumbs)
   const dispatch = useDispatch()
   const { appointments } = useSelector((state: RootState) => state.appointments)
   const [events, setEvents] = useState<Event[]>([])

src/scheduling/appointments/new/NewAppointment.tsx

@@ -1,22 +1,28 @@
 import React, { useState } from 'react'
 import useTitle from 'page-header/useTitle'
 import { useTranslation } from 'react-i18next'
-
 import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
 import { useHistory } from 'react-router'
 import { useDispatch } from 'react-redux'
 import Appointment from 'model/Appointment'
 import addMinutes from 'date-fns/addMinutes'
 import { isBefore } from 'date-fns'
 import { Button, Alert } from '@hospitalrun/components'
+import useSetBreadcrumbs from '../../../breadcrumbs/useSetBreadcrumbs'
 import { createAppointment } from '../appointments-slice'
 import AppointmentDetailForm from '../AppointmentDetailForm'
 
+const breadcrumbs = [
+  { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+  { i18nKey: 'scheduling.appointments.new', location: '/appointments/new' },
+]
+
 const NewAppointment = () => {
   const { t } = useTranslation()
   const history = useHistory()
   const dispatch = useDispatch()
   useTitle(t('scheduling.appointments.new'))
+  useSetBreadcrumbs(breadcrumbs)
   const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
   const endDateTime = addMinutes(startDateTime, 60)
 

src/scheduling/appointments/view/ViewAppointment.tsx

@@ -1,12 +1,22 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import useTitle from 'page-header/useTitle'
 import { useSelector, useDispatch } from 'react-redux'
 import { RootState } from 'store'
 import { useParams } from 'react-router'
 import { Spinner } from '@hospitalrun/components'
 import { useTranslation } from 'react-i18next'
+import Appointment from 'model/Appointment'
 import { fetchAppointment } from '../appointment-slice'
 import AppointmentDetailForm from '../AppointmentDetailForm'
+import useSetBreadcrumbs from '../../../breadcrumbs/useSetBreadcrumbs'
+
+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()
@@ -15,6 +25,15 @@ const ViewAppointment = () => {
   const { id } = useParams()
   const { appointment, patient, isLoading } = useSelector((state: RootState) => state.appointment)
 
+  const breadcrumbs = useMemo(
+    () => [
+      { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+      { text: getAppointmentLabel(appointment), location: `/patients/${appointment.id}` },
+    ],
+    [appointment],
+  )
+  useSetBreadcrumbs(breadcrumbs)
+
   useEffect(() => {
     if (id) {
       dispatch(fetchAppointment(id))