From beffc1f059c748e880b9f76766c955d8e5094f08 Mon Sep 17 00:00:00 2001 From: oliv37 Date: Thu, 20 Feb 2020 20:31:55 +0100 Subject: [PATCH] feat(breadcrumb): add the dashboard breadcrumb item add the dashboard item for all the breacrumbs, don't display the breadcrumb for the Dashboard page --- src/__tests__/HospitalRun.test.tsx | 9 ++++++++- .../breadcrumbs/Breadcrumbs.test.tsx | 13 +++++++++++-- .../breadcrumbs/useAddBreadcrumbs.test.tsx | 19 +++++++++++++++++++ src/breadcrumbs/Breadcrumbs.tsx | 4 ++++ src/breadcrumbs/useAddBreadcrumbs.ts | 9 ++++++--- src/dashboard/Dashboard.tsx | 4 ---- src/patients/edit/EditPatient.tsx | 2 +- src/patients/list/Patients.tsx | 2 +- src/patients/new/NewPatient.tsx | 2 +- src/patients/view/ViewPatient.tsx | 2 +- src/scheduling/appointments/Appointments.tsx | 2 +- .../appointments/new/NewAppointment.tsx | 2 +- .../appointments/view/ViewAppointment.tsx | 2 +- 13 files changed, 55 insertions(+), 17 deletions(-) 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) {