Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Commit

Permalink
feat(breadcrumb): add the dashboard breadcrumb item
Browse files Browse the repository at this point in the history
add the dashboard item for all the breacrumbs, don't display the breadcrumb for the Dashboard page
  • Loading branch information
oliv37 committed Feb 20, 2020
1 parent 10e902d commit beffc1f
Show file tree
Hide file tree
Showing 13 changed files with 55 additions and 17 deletions.
9 changes: 8 additions & 1 deletion src/__tests__/HospitalRun.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ describe('HospitalRun', () => {
addBreadcrumbs([
{ i18nKey: 'patients.label', location: '/patients' },
{ i18nKey: 'patients.newPatient', location: '/patients/new' },
{ i18nKey: 'dashboard.label', location: '/' },
]),
)
})
Expand Down Expand Up @@ -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: '/' },
]),
)
})
Expand Down Expand Up @@ -184,6 +186,7 @@ describe('HospitalRun', () => {
addBreadcrumbs([
{ i18nKey: 'patients.label', location: '/patients' },
{ text: 'test test test', location: `/patients/${patient.id}` },
{ i18nKey: 'dashboard.label', location: '/' },
]),
)
})
Expand Down Expand Up @@ -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: '/' },
]),
)
})

Expand Down Expand Up @@ -277,6 +283,7 @@ describe('HospitalRun', () => {
addBreadcrumbs([
{ i18nKey: 'scheduling.appointments.label', location: '/appointments' },
{ i18nKey: 'scheduling.appointments.new', location: '/appointments/new' },
{ i18nKey: 'dashboard.label', location: '/' },
]),
)
})
Expand Down
13 changes: 11 additions & 2 deletions src/__tests__/breadcrumbs/Breadcrumbs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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' },
Expand All @@ -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')
Expand Down
19 changes: 19 additions & 0 deletions src/__tests__/breadcrumbs/useAddBreadcrumbs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 4 additions & 0 deletions src/breadcrumbs/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
9 changes: 6 additions & 3 deletions src/breadcrumbs/useAddBreadcrumbs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
4 changes: 0 additions & 4 deletions src/dashboard/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -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>
}

Expand Down
2 changes: 1 addition & 1 deletion src/patients/edit/EditPatient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion src/patients/list/Patients.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion src/patients/new/NewPatient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const NewPatient = () => {
const [errorMessage, setErrorMessage] = useState('')

useTitle(t('patients.newPatient'))
useAddBreadcrumbs(breadcrumbs)
useAddBreadcrumbs(breadcrumbs, true)

const onCancel = () => {
history.push('/patients')
Expand Down
2 changes: 1 addition & 1 deletion src/patients/view/ViewPatient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/scheduling/appointments/Appointments.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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[]>([])
Expand Down
2 changes: 1 addition & 1 deletion src/scheduling/appointments/new/NewAppointment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion src/scheduling/appointments/view/ViewAppointment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit beffc1f

Please sign in to comment.