diff --git a/src/__tests__/HospitalRun.test.tsx b/src/__tests__/HospitalRun.test.tsx
index bdf1cd4bc4..d3cc0e40f7 100644
--- a/src/__tests__/HospitalRun.test.tsx
+++ b/src/__tests__/HospitalRun.test.tsx
@@ -47,6 +47,7 @@ describe('HospitalRun', () => {
addBreadcrumbs([
{ i18nKey: 'patients.label', location: '/patients' },
{ i18nKey: 'patients.newPatient', location: '/patients/new' },
+ { i18nKey: 'dashboard.label', location: '/' },
]),
)
})
@@ -107,6 +108,7 @@ describe('HospitalRun', () => {
{ i18nKey: 'patients.label', location: '/patients' },
{ text: 'test test test', location: `/patients/${patient.id}` },
{ i18nKey: 'patients.editPatient', location: `/patients/${patient.id}/edit` },
+ { i18nKey: 'dashboard.label', location: '/' },
]),
)
})
@@ -184,6 +186,7 @@ describe('HospitalRun', () => {
addBreadcrumbs([
{ i18nKey: 'patients.label', location: '/patients' },
{ text: 'test test test', location: `/patients/${patient.id}` },
+ { i18nKey: 'dashboard.label', location: '/' },
]),
)
})
@@ -231,7 +234,10 @@ describe('HospitalRun', () => {
expect(wrapper.find(Appointments)).toHaveLength(1)
expect(store.getActions()).toContainEqual(
- addBreadcrumbs([{ i18nKey: 'scheduling.appointments.label', location: '/appointments' }]),
+ addBreadcrumbs([
+ { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+ { i18nKey: 'dashboard.label', location: '/' },
+ ]),
)
})
@@ -277,6 +283,7 @@ describe('HospitalRun', () => {
addBreadcrumbs([
{ i18nKey: 'scheduling.appointments.label', location: '/appointments' },
{ i18nKey: 'scheduling.appointments.new', location: '/appointments/new' },
+ { i18nKey: 'dashboard.label', location: '/' },
]),
)
})
diff --git a/src/__tests__/breadcrumbs/Breadcrumbs.test.tsx b/src/__tests__/breadcrumbs/Breadcrumbs.test.tsx
index 586bbf748e..e34a022a17 100644
--- a/src/__tests__/breadcrumbs/Breadcrumbs.test.tsx
+++ b/src/__tests__/breadcrumbs/Breadcrumbs.test.tsx
@@ -5,7 +5,10 @@ import { mount } from 'enzyme'
import { createMemoryHistory } from 'history'
import { Router } from 'react-router-dom'
import configureMockStore from 'redux-mock-store'
-import { BreadcrumbItem } from '@hospitalrun/components'
+import {
+ Breadcrumb as HRBreadcrumb,
+ BreadcrumbItem as HRBreadcrumbItem,
+} from '@hospitalrun/components'
import Breadcrumbs from 'breadcrumbs/Breadcrumbs'
import Breadcrumb from 'model/Breadcrumb'
@@ -30,6 +33,12 @@ describe('Breadcrumbs', () => {
return wrapper
}
+ it('should not render the breadcrumb when there is no items in the store', () => {
+ const wrapper = setup([])
+
+ expect(wrapper.find(HRBreadcrumb)).toHaveLength(0)
+ })
+
it('should render breadcrumbs items', () => {
const breadcrumbs = [
{ i18nKey: 'patient.label', location: '/patient' },
@@ -38,7 +47,7 @@ describe('Breadcrumbs', () => {
]
const wrapper = setup(breadcrumbs)
- const items = wrapper.find(BreadcrumbItem)
+ const items = wrapper.find(HRBreadcrumbItem)
expect(items).toHaveLength(3)
expect(items.at(0).text()).toEqual('patient.label')
diff --git a/src/__tests__/breadcrumbs/useAddBreadcrumbs.test.tsx b/src/__tests__/breadcrumbs/useAddBreadcrumbs.test.tsx
index 7a118f01a1..452f76ebdc 100644
--- a/src/__tests__/breadcrumbs/useAddBreadcrumbs.test.tsx
+++ b/src/__tests__/breadcrumbs/useAddBreadcrumbs.test.tsx
@@ -26,6 +26,25 @@ describe('useAddBreadcrumbs', () => {
expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledWith(breadcrumbs)
})
+ it('should call addBreadcrumbs with an additional dashboard breadcrumb', () => {
+ const wrapper = ({ children }: any) => {children}
+
+ jest.spyOn(breadcrumbsSlice, 'addBreadcrumbs')
+ const breadcrumbs = [
+ {
+ text: 'Patients',
+ location: '/patients',
+ },
+ ]
+
+ renderHook(() => useAddBreadcrumbs(breadcrumbs, true), { wrapper } as any)
+ expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledTimes(1)
+ expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledWith([
+ ...breadcrumbs,
+ { i18nKey: 'dashboard.label', location: '/' },
+ ])
+ })
+
it('should call removeBreadcrumbs with the correct data after unmount', () => {
const wrapper = ({ children }: any) => {children}
diff --git a/src/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx
index 14cf3ddd33..263f8e9476 100644
--- a/src/breadcrumbs/Breadcrumbs.tsx
+++ b/src/breadcrumbs/Breadcrumbs.tsx
@@ -10,6 +10,10 @@ const Breadcrumbs = () => {
const { t } = useTranslation()
const { breadcrumbs } = useSelector((state: RootState) => state.breadcrumbs)
+ if (breadcrumbs.length === 0) {
+ return null
+ }
+
return (
{breadcrumbs.map(({ i18nKey, text, location }, index) => {
diff --git a/src/breadcrumbs/useAddBreadcrumbs.ts b/src/breadcrumbs/useAddBreadcrumbs.ts
index 135e3fe5f2..76d68e80ce 100644
--- a/src/breadcrumbs/useAddBreadcrumbs.ts
+++ b/src/breadcrumbs/useAddBreadcrumbs.ts
@@ -3,12 +3,15 @@ import { useDispatch } from 'react-redux'
import Breadcrumb from 'model/Breadcrumb'
import { addBreadcrumbs, removeBreadcrumbs } from './breadcrumbs-slice'
-export default function useAddBreadcrumbs(breadcrumbs: Breadcrumb[]): void {
+export default function useAddBreadcrumbs(breadcrumbs: Breadcrumb[], withDashboard = false): void {
const dispatch = useDispatch()
- const breadcrumbsStringified = JSON.stringify(breadcrumbs)
+
+ const breadcrumbsStringified = withDashboard
+ ? JSON.stringify([...breadcrumbs, { i18nKey: 'dashboard.label', location: '/' }])
+ : JSON.stringify(breadcrumbs)
useEffect(() => {
- const breadcrumbsParsed = JSON.parse(breadcrumbsStringified)
+ const breadcrumbsParsed: Breadcrumb[] = JSON.parse(breadcrumbsStringified)
dispatch(addBreadcrumbs(breadcrumbsParsed))
return () => {
diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx
index 1324a028df..bf295875dc 100644
--- a/src/dashboard/Dashboard.tsx
+++ b/src/dashboard/Dashboard.tsx
@@ -1,14 +1,10 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import useTitle from '../page-header/useTitle'
-import useAddBreadcrumbs from '../breadcrumbs/useAddBreadcrumbs'
-
-const breadcrumbs = [{ i18nKey: 'dashboard.label', location: '/' }]
const Dashboard: React.FC = () => {
const { t } = useTranslation()
useTitle(t('dashboard.label'))
- useAddBreadcrumbs(breadcrumbs)
return Example
}
diff --git a/src/patients/edit/EditPatient.tsx b/src/patients/edit/EditPatient.tsx
index f75a7f5c4c..2e3db2da99 100644
--- a/src/patients/edit/EditPatient.tsx
+++ b/src/patients/edit/EditPatient.tsx
@@ -40,7 +40,7 @@ const EditPatient = () => {
{ text: getPatientFullName(reduxPatient), location: `/patients/${reduxPatient.id}` },
{ i18nKey: 'patients.editPatient', location: `/patients/${reduxPatient.id}/edit` },
]
- useAddBreadcrumbs(breadcrumbs)
+ useAddBreadcrumbs(breadcrumbs, true)
useEffect(() => {
setPatient(reduxPatient)
diff --git a/src/patients/list/Patients.tsx b/src/patients/list/Patients.tsx
index 9696661830..0b28ff4e9e 100644
--- a/src/patients/list/Patients.tsx
+++ b/src/patients/list/Patients.tsx
@@ -14,7 +14,7 @@ const Patients = () => {
const { t } = useTranslation()
const history = useHistory()
useTitle(t('patients.label'))
- useAddBreadcrumbs(breadcrumbs)
+ useAddBreadcrumbs(breadcrumbs, true)
const dispatch = useDispatch()
const { patients, isLoading } = useSelector((state: RootState) => state.patients)
diff --git a/src/patients/new/NewPatient.tsx b/src/patients/new/NewPatient.tsx
index 971eafff32..5c80cdc0b6 100644
--- a/src/patients/new/NewPatient.tsx
+++ b/src/patients/new/NewPatient.tsx
@@ -25,7 +25,7 @@ const NewPatient = () => {
const [errorMessage, setErrorMessage] = useState('')
useTitle(t('patients.newPatient'))
- useAddBreadcrumbs(breadcrumbs)
+ useAddBreadcrumbs(breadcrumbs, true)
const onCancel = () => {
history.push('/patients')
diff --git a/src/patients/view/ViewPatient.tsx b/src/patients/view/ViewPatient.tsx
index 527b3ecb95..f3f7339fb4 100644
--- a/src/patients/view/ViewPatient.tsx
+++ b/src/patients/view/ViewPatient.tsx
@@ -36,7 +36,7 @@ const ViewPatient = () => {
{ i18nKey: 'patients.label', location: '/patients' },
{ text: getPatientFullName(patient), location: `/patients/${patient.id}` },
]
- useAddBreadcrumbs(breadcrumbs)
+ useAddBreadcrumbs(breadcrumbs, true)
const { id } = useParams()
useEffect(() => {
diff --git a/src/scheduling/appointments/Appointments.tsx b/src/scheduling/appointments/Appointments.tsx
index 28fdb48f1f..b0af31a3af 100644
--- a/src/scheduling/appointments/Appointments.tsx
+++ b/src/scheduling/appointments/Appointments.tsx
@@ -23,7 +23,7 @@ const Appointments = () => {
const { t } = useTranslation()
const history = useHistory()
useTitle(t('scheduling.appointments.label'))
- useAddBreadcrumbs(breadcrumbs)
+ useAddBreadcrumbs(breadcrumbs, true)
const dispatch = useDispatch()
const { appointments } = useSelector((state: RootState) => state.appointments)
const [events, setEvents] = useState([])
diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx
index c705352fb9..487948f5eb 100644
--- a/src/scheduling/appointments/new/NewAppointment.tsx
+++ b/src/scheduling/appointments/new/NewAppointment.tsx
@@ -22,7 +22,7 @@ const NewAppointment = () => {
const history = useHistory()
const dispatch = useDispatch()
useTitle(t('scheduling.appointments.new'))
- useAddBreadcrumbs(breadcrumbs)
+ useAddBreadcrumbs(breadcrumbs, true)
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 e25dc8825c..5744041875 100644
--- a/src/scheduling/appointments/view/ViewAppointment.tsx
+++ b/src/scheduling/appointments/view/ViewAppointment.tsx
@@ -29,7 +29,7 @@ const ViewAppointment = () => {
{ i18nKey: 'scheduling.appointments.label', location: '/appointments' },
{ text: getAppointmentLabel(appointment), location: `/patients/${appointment.id}` },
]
- useAddBreadcrumbs(breadcrumbs)
+ useAddBreadcrumbs(breadcrumbs, true)
useEffect(() => {
if (id) {