feat(breadcrumb): use a single component for Breadcrumbs

fix #1770

package.json

@@ -127,7 +127,6 @@
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "npm run lint:fix",
-      "npm run test:ci",
       "git add ."
     ]
   }

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/Breadcrumb'
+import Breadcrumbs from 'breadcrumbs/Breadcrumbs'
 import Sidebar from './components/Sidebar'
 import Permissions from './model/Permissions'
 import Dashboard from './dashboard/Dashboard'
@@ -23,14 +23,14 @@ const HospitalRun = () => {
   return (
     <div>
       <Navbar />
-      <Breadcrumb />
       <div className="container-fluid">
         <Sidebar />
         <div className="row">
           <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-4">
             <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
               <h1 className="h2">{title}</h1>
             </div>
+            <Breadcrumbs />
             <div>
               <Switch>
                 <Route exact path="/" component={Dashboard} />

src/__tests__/HospitalRun.test.tsx

@@ -29,6 +29,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.WritePatients] },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/new']}>
@@ -46,6 +47,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [] },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/new']}>
@@ -79,6 +81,7 @@ describe('HospitalRun', () => {
               title: 'test',
               user: { permissions: [Permissions.WritePatients, Permissions.ReadPatients] },
               patient: { patient: {} as Patient },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/edit/123']}>
@@ -96,7 +99,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.WritePatients] },
-              patient: { patient: {} },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/edit/123']}>
@@ -114,7 +117,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.ReadPatients] },
-              patient: { patient: {} },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/edit/123']}>
@@ -148,6 +151,7 @@ describe('HospitalRun', () => {
               title: 'test',
               user: { permissions: [Permissions.ReadPatients] },
               patient: { patient },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/123']}>
@@ -165,7 +169,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [] },
-              patient: { patient: {} },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/123']}>
@@ -186,6 +190,7 @@ describe('HospitalRun', () => {
               title: 'test',
               user: { permissions: [Permissions.ReadAppointments] },
               appointments: { appointments: [] },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/appointments']}>
@@ -203,8 +208,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [] },
-              appointments: { appointments: [] },
-              appointment: { appointment: {} },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/appointments']}>
@@ -225,6 +229,7 @@ describe('HospitalRun', () => {
           store={mockStore({
             title: 'test',
             user: { permissions: [Permissions.WriteAppointments] },
+            breadcrumbs: { breadcrumbs: [] },
           })}
         >
           <MemoryRouter initialEntries={['/appointments/new']}>
@@ -242,6 +247,7 @@ describe('HospitalRun', () => {
           store={mockStore({
             title: 'test',
             user: { permissions: [] },
+            breadcrumbs: { breadcrumbs: [] },
           })}
         >
           <MemoryRouter initialEntries={['/appointments/new']}>
@@ -261,6 +267,7 @@ describe('HospitalRun', () => {
           store={mockStore({
             title: 'test',
             user: { permissions: [Permissions.WritePatients] },
+            breadcrumbs: { breadcrumbs: [] },
           })}
         >
           <MemoryRouter initialEntries={['/']}>

src/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,32 @@
+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 Breadcrumbs = () => {
+  const history = useHistory()
+  const { t } = useTranslation()
+  const { breadcrumbs } = useSelector((state: RootState) => state.breadcrumbs)
+
+  return (
+    <HrBreadcrumb>
+      {breadcrumbs.map(({ i18nKey, text, location }, index) => {
+        const isLast = index === breadcrumbs.length - 1
+        const onClick = !isLast ? () => history.push(location) : undefined
+
+        return (
+          <HrBreadcrumbItem key={location} active={isLast} onClick={onClick}>
+            {i18nKey ? t(i18nKey) : text}
+          </HrBreadcrumbItem>
+        )
+      })}
+    </HrBreadcrumb>
+  )
+}
+
+export default Breadcrumbs

src/breadcrumbs/breadcrumbs-slice.ts

@@ -0,0 +1,30 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import Breadcrumb from 'model/Breadcrumb'
+
+interface BreadcrumbsState {
+  breadcrumbs: Breadcrumb[]
+}
+
+const initialState: BreadcrumbsState = {
+  breadcrumbs: [],
+}
+
+const breadcrumbsSlice = createSlice({
+  name: 'breadcrumbs',
+  initialState,
+  reducers: {
+    setBreadcrumbs(state, { payload }: PayloadAction<Breadcrumb[]>) {
+      state.breadcrumbs = payload
+    },
+    addBreadcrumb(state, { payload }: PayloadAction<Breadcrumb>) {
+      state.breadcrumbs = [...state.breadcrumbs, payload]
+    },
+    removeBreadcrumb(state) {
+      state.breadcrumbs = state.breadcrumbs.slice(0, -1)
+    },
+  },
+})
+
+export const { setBreadcrumbs, addBreadcrumb, removeBreadcrumb } = breadcrumbsSlice.actions
+
+export default breadcrumbsSlice.reducer

src/breadcrumbs/useAddBreadcrumb.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import Breadcrumb from 'model/Breadcrumb'
+import { addBreadcrumb, removeBreadcrumb } from './breadcrumbs-slice'
+
+export default function useAddBreadcrumb(breadcrumb: Breadcrumb): void {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(addBreadcrumb(breadcrumb))
+
+    return () => {
+      dispatch(removeBreadcrumb())
+    }
+  }, [dispatch, breadcrumb])
+}