feat(breadcrumb): customize breadcrumbs for patients and appointments

fix #1770

src/HospitalRun.tsx

@@ -5,7 +5,7 @@ import { Toaster } from '@hospitalrun/components'
 import Appointments from 'scheduling/appointments/Appointments'
 import NewAppointment from 'scheduling/appointments/new/NewAppointment'
 import ViewAppointment from 'scheduling/appointments/view/ViewAppointment'
-import Breadcrumb from 'components/Breadcrumb'
+import Breadcrumb from 'components/breadcrumb/Breadcrumb'
 import Sidebar from './components/Sidebar'
 import Permissions from './model/Permissions'
 import Dashboard from './dashboard/Dashboard'

src/__tests__/HospitalRun.test.tsx

@@ -77,7 +77,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.ReadPatients] },
-              patient,
+              patient: { patient },
             })}
           >
             <MemoryRouter initialEntries={['/patients/123']}>
@@ -95,6 +95,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [] },
+              patient: { patient: {} },
             })}
           >
             <MemoryRouter initialEntries={['/patients/123']}>
@@ -133,6 +134,7 @@ describe('HospitalRun', () => {
               title: 'test',
               user: { permissions: [] },
               appointments: { appointments: [] },
+              appointment: { appointment: {} },
             })}
           >
             <MemoryRouter initialEntries={['/appointments']}>

src/__tests__/components/breadcrumb/Appointmentbreadcrumb.test.tsx

@@ -0,0 +1,31 @@
+import '../../../__mocks__/matchMediaMock'
+import React from 'react'
+import { Router } from 'react-router'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import configureMockStore from 'redux-mock-store'
+import { createMemoryHistory } from 'history'
+import { BreadcrumbItem as HrBreadcrumbItem } from '@hospitalrun/components'
+import AppointmentBreadcrumb from 'components/breadcrumb/AppointmentBreadcrumb'
+
+const mockStore = configureMockStore()
+
+describe('Breadcrumb', () => {
+  const history = createMemoryHistory()
+  history.push('/appointments/1234')
+  const wrapper = mount(
+    <Provider
+      store={mockStore({
+        appointment: { appointment: {} },
+      })}
+    >
+      <Router history={history}>
+        <AppointmentBreadcrumb />
+      </Router>
+    </Provider>,
+  )
+
+  it('should render 2 breadcrumb items', () => {
+    expect(wrapper.find(HrBreadcrumbItem)).toHaveLength(2)
+  })
+})

src/__tests__/components/breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,61 @@
+import '../../../__mocks__/matchMediaMock'
+import React from 'react'
+import { Router } from 'react-router'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import configureMockStore from 'redux-mock-store'
+import { createMemoryHistory } from 'history'
+import DefaultBreadcrumb from 'components/breadcrumb/DefaultBreadcrumb'
+import PatientBreadcrumb from 'components/breadcrumb/PatientBreadcrumb'
+import AppointmentBreadcrumb from 'components/breadcrumb/AppointmentBreadcrumb'
+import Breadcrumb from 'components/breadcrumb/Breadcrumb'
+
+const mockStore = configureMockStore()
+
+describe('Breadcrumb', () => {
+  const setup = (location: string) => {
+    const history = createMemoryHistory()
+    history.push(location)
+    return mount(
+      <Provider
+        store={mockStore({
+          patient: { patient: {} },
+          appointment: { appointment: {} },
+        })}
+      >
+        <Router history={history}>
+          <Breadcrumb />
+        </Router>
+      </Provider>,
+    )
+  }
+  it('should render the patient breadcrumb when /patients/:id is accessed', () => {
+    const wrapper = setup('/patients/1234')
+    expect(wrapper.find(PatientBreadcrumb)).toHaveLength(1)
+  })
+  it('should render the appointment breadcrumb when /appointments/:id is accessed', () => {
+    const wrapper = setup('/appointments/1234')
+    expect(wrapper.find(AppointmentBreadcrumb)).toHaveLength(1)
+  })
+
+  it('should render the default breadcrumb when /patients/new is accessed', () => {
+    const wrapper = setup('/patients/new')
+    expect(wrapper.find(DefaultBreadcrumb)).toHaveLength(1)
+  })
+
+  it('should render the default breadcrumb when /appointments/new is accessed', () => {
+    const wrapper = setup('/appointments/new')
+    expect(wrapper.find(DefaultBreadcrumb)).toHaveLength(1)
+  })
+
+  it('should render the default breadcrumb when any other path is accessed', () => {
+    let wrapper = setup('/appointments')
+    expect(wrapper.find(DefaultBreadcrumb)).toHaveLength(1)
+
+    wrapper = setup('/patients')
+    expect(wrapper.find(DefaultBreadcrumb)).toHaveLength(1)
+
+    wrapper = setup('/')
+    expect(wrapper.find(DefaultBreadcrumb)).toHaveLength(1)
+  })
+})

src/__tests__/components/breadcrumb/DefaultBreadcrumb.test.tsx

@@ -0,0 +1,54 @@
+import '../../../__mocks__/matchMediaMock'
+import React from 'react'
+import { mount } from 'enzyme'
+import { createMemoryHistory } from 'history'
+import { Router } from 'react-router'
+import DefaultBreadcrumb, { getItems } from 'components/breadcrumb/DefaultBreadcrumb'
+import { BreadcrumbItem as HrBreadcrumbItem } from '@hospitalrun/components'
+
+describe('DefaultBreadcrumb', () => {
+  describe('getItems', () => {
+    it('should return valid items for pathname /', () => {
+      expect(getItems('/')).toEqual([{ url: '/', active: true }])
+    })
+
+    it('should return valid items for pathname /patients', () => {
+      expect(getItems('/patients')).toEqual([{ url: '/patients', active: true }])
+    })
+
+    it('should return valid items for pathname /appointments', () => {
+      expect(getItems('/appointments')).toEqual([{ url: '/appointments', active: true }])
+    })
+
+    it('should return valid items for pathname /patients/new', () => {
+      expect(getItems('/patients/new')).toEqual([
+        { url: '/patients', active: false },
+        { url: '/patients/new', active: true },
+      ])
+    })
+
+    it('should return valid items for pathname /appointments/new', () => {
+      expect(getItems('/appointments/new')).toEqual([
+        { url: '/appointments', active: false },
+        { url: '/appointments/new', active: true },
+      ])
+    })
+  })
+
+  describe('rendering', () => {
+    const setup = (location: string) => {
+      const history = createMemoryHistory()
+      history.push(location)
+      return mount(
+        <Router history={history}>
+          <DefaultBreadcrumb />
+        </Router>,
+      )
+    }
+
+    it('should render one breadcrumb item for the path /', () => {
+      const wrapper = setup('/')
+      expect(wrapper.find(HrBreadcrumbItem)).toHaveLength(1)
+    })
+  })
+})

src/__tests__/components/breadcrumb/PatientBreadcrumb.test.tsx

@@ -0,0 +1,31 @@
+import '../../../__mocks__/matchMediaMock'
+import React from 'react'
+import { Router } from 'react-router'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import configureMockStore from 'redux-mock-store'
+import { createMemoryHistory } from 'history'
+import { BreadcrumbItem as HrBreadcrumbItem } from '@hospitalrun/components'
+import PatientBreadcrumb from 'components/breadcrumb/PatientBreadcrumb'
+
+const mockStore = configureMockStore()
+
+describe('Breadcrumb', () => {
+  const history = createMemoryHistory()
+  history.push('/patients/1234')
+  const wrapper = mount(
+    <Provider
+      store={mockStore({
+        patient: { patient: {} },
+      })}
+    >
+      <Router history={history}>
+        <PatientBreadcrumb />
+      </Router>
+    </Provider>,
+  )
+
+  it('should render 2 breadcrumb items', () => {
+    expect(wrapper.find(HrBreadcrumbItem)).toHaveLength(2)
+  })
+})

src/components/breadcrumb/AppointmentBreadcrumb.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { useHistory } from 'react-router'
+import { useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import {
+  Breadcrumb as HrBreadcrumb,
+  BreadcrumbItem as HrBreadcrumbItem,
+} from '@hospitalrun/components'
+import { RootState } from '../../store'
+
+const AppointmentBreacrumb = () => {
+  const { t } = useTranslation()
+  const { appointment } = useSelector((state: RootState) => state.appointment)
+  const history = useHistory()
+  let appointmentLabel = ''
+
+  if (appointment.startDateTime && appointment.endDateTime) {
+    const startDateLabel = new Date(appointment.startDateTime).toLocaleString()
+    const endDateLabel = new Date(appointment.endDateTime).toLocaleString()
+    appointmentLabel = `${startDateLabel} - ${endDateLabel}`
+  }
+
+  return (
+    <HrBreadcrumb>
+      <HrBreadcrumbItem onClick={() => history.push('/appointments')}>
+        {t('scheduling.appointments.label')}
+      </HrBreadcrumbItem>
+      <HrBreadcrumbItem active>{appointmentLabel}</HrBreadcrumbItem>
+    </HrBreadcrumb>
+  )
+}
+
+export default AppointmentBreacrumb

src/components/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Switch, Route } from 'react-router'
+import DefaultBreadcrumb from 'components/breadcrumb/DefaultBreadcrumb'
+import PatientBreadcrumb from 'components/breadcrumb/PatientBreadcrumb'
+import AppointmentBreadcrumb from 'components/breadcrumb/AppointmentBreadcrumb'
+
+const Breadcrumb = () => (
+  <Switch>
+    <Route exact path={['/patients/new', '/appointments/new']} component={DefaultBreadcrumb} />
+    <Route path="/patients/:id" component={PatientBreadcrumb} />
+    <Route path="/appointments/:id" component={AppointmentBreadcrumb} />
+    <Route path="*" component={DefaultBreadcrumb} />
+  </Switch>
+)
+
+export default Breadcrumb