feat(breadcrumb): add the dashboard breadcrumb item

add the dashboard item for all the breacrumbs, don't display the breadcrumb for the Dashboard page
HospitalRun · Feb 20, 2020 · beffc1f · beffc1f
1 parent 10e902d
commit beffc1f
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 17 deletions.
diff --git 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
@@ -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
@@ -26,6 +26,25 @@ describe('useAddBreadcrumbs', () => {
     expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledWith(breadcrumbs)
   })
 
+  it('should call addBreadcrumbs with an additional dashboard breadcrumb', () => {
+    const wrapper = ({ children }: any) => <Provider store={store({})}>{children}</Provider>
+
+    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) => <Provider store={store({})}>{children}</Provider>
 

diff --git 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 (
     <Breadcrumb>
       {breadcrumbs.map(({ i18nKey, text, location }, index) => {

diff --git 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
@@ -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 <h3>Example</h3>
 }
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<Event[]>([])

diff --git 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
@@ -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) {