feat(breadcrumb): add a breadcrumb underneath the page header

src/HospitalRun.tsx

@@ -5,6 +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/Breadcrumb'
 import Sidebar from './components/Sidebar'
 import Permissions from './model/Permissions'
 import Dashboard from './dashboard/Dashboard'
@@ -22,6 +23,7 @@ const HospitalRun = () => {
   return (
     <div>
       <Navbar />
+      <Breadcrumb />
       <div className="container-fluid">
         <Sidebar />
         <div className="row">

src/__tests__/HospitalRun.test.tsx

@@ -96,6 +96,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.WritePatients] },
+              patient: { patient: {} },
             })}
           >
             <MemoryRouter initialEntries={['/patients/edit/123']}>
@@ -113,6 +114,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.ReadPatients] },
+              patient: { patient: {} },
             })}
           >
             <MemoryRouter initialEntries={['/patients/edit/123']}>
@@ -145,7 +147,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.ReadPatients] },
-              patient,
+              patient: { patient },
             })}
           >
             <MemoryRouter initialEntries={['/patients/123']}>
@@ -163,6 +165,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [] },
+              patient: { patient: {} },
             })}
           >
             <MemoryRouter initialEntries={['/patients/123']}>
@@ -201,6 +204,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

src/components/breadcrumb/DefaultBreadcrumb.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useLocation, useHistory } from 'react-router'
+import { useTranslation } from 'react-i18next'
+import {
+  Breadcrumb as HrBreadcrumb,
+  BreadcrumbItem as HrBreadcrumbItem,
+} from '@hospitalrun/components'
+
+interface Item {
+  url: string
+  active: boolean
+}
+
+const urlToi18nKey: { [url: string]: string } = {
+  '/': 'dashboard.label',
+  '/patients': 'patients.label',
+  '/patients/new': 'patients.newPatient',
+  '/appointments': 'scheduling.appointments.label',
+  '/appointments/new': 'scheduling.appointments.new',
+}
+
+export function getItems(pathname: string): Item[] {
+  let url = ''
+  const paths = pathname.substring(1).split('/')
+
+  return paths.map((path, index) => {
+    url += `/${path}`
+    return { url, active: index === paths.length - 1 }
+  })
+}
+
+const DefaultBreadcrumb = () => {
+  const { t } = useTranslation()
+  const { pathname } = useLocation()
+  const history = useHistory()
+  const items = getItems(pathname)
+
+  return (
+    <HrBreadcrumb>
+      {items.map((item) => {
+        const onClick = !item.active ? () => history.push(item.url) : undefined
+
+        return (
+          <HrBreadcrumbItem key={item.url} active={item.active} onClick={onClick}>
+            {t(urlToi18nKey[item.url])}
+          </HrBreadcrumbItem>
+        )
+      })}
+    </HrBreadcrumb>
+  )
+}
+
+export default DefaultBreadcrumb

src/components/breadcrumb/PatientBreadcrumb.tsx

@@ -0,0 +1,27 @@
+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 { getPatientFullName } from 'patients/util/patient-name-util'
+import { RootState } from '../../store'
+
+const PatientBreacrumb = () => {
+  const { t } = useTranslation()
+  const { patient } = useSelector((state: RootState) => state.patient)
+  const history = useHistory()
+
+  return (
+    <HrBreadcrumb>
+      <HrBreadcrumbItem onClick={() => history.push('/patients')}>
+        {t('patients.label')}
+      </HrBreadcrumbItem>
+      <HrBreadcrumbItem active>{getPatientFullName(patient)}</HrBreadcrumbItem>
+    </HrBreadcrumb>
+  )
+}
+
+export default PatientBreacrumb

src/index.css

@@ -24,7 +24,7 @@ code {
   bottom: 0;
   left: 0;
   z-index: 0; /* Behind the navbar */
-  padding: 48px 0 0; /* Height of navbar */
+  padding: 75px 0 0; /* Height of navbar */
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
@@ -88,3 +88,10 @@ code {
   border-color: transparent;
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
+
+.breadcrumb {
+	z-index: 1;
+	position: relative;
+	padding: .2rem 1rem;
+	background-color: white;
+}