From a6eaf2a9547875a4a0947f4e9a7e21e41add11c8 Mon Sep 17 00:00:00 2001
From: oliv37 <olivier.boisse@laposte.net>
Date: Wed, 12 Feb 2020 20:22:46 +0100
Subject: [PATCH] feat(breadcrumb): display the breadcrumb in the appointment
 components

fix #1770
---
 src/scheduling/appointments/Appointments.tsx  |  4 ++++
 .../appointments/new/NewAppointment.tsx       |  8 ++++++-
 .../appointments/view/ViewAppointment.tsx     | 21 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/scheduling/appointments/Appointments.tsx b/src/scheduling/appointments/Appointments.tsx
index 7676b1beb9..78fde52f9b 100644
--- a/src/scheduling/appointments/Appointments.tsx
+++ b/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[]>([])
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index 538ae33f98..650b682b3d 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -1,7 +1,6 @@
 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'
@@ -9,14 +8,21 @@ 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)
 
diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx
index c2e78947ac..45cf9b000d 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/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))