feat(breadcrumb): add hook useAddBreadcrumbs / sort breadcrumbs

create a single hook useAddBreadcrumbs for breadcrumbs, sor breadcrumbs by their location's length

fix #1770

package.json

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

src/__tests__/breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,5 @@
+import '../../__mocks__/matchMediaMock'
+
+it('should return true', () => {
+  expect(true).toBeTruthy()
+})

src/__tests__/breadcrumbs/breadcrumbs-slice.test.ts

@@ -0,0 +1,5 @@
+import '../../__mocks__/matchMediaMock'
+
+it('should return true', () => {
+  expect(true).toBeTruthy()
+})

src/__tests__/breadcrumbs/useAddBreadcrumbs.test.ts

@@ -0,0 +1,5 @@
+import '../../__mocks__/matchMediaMock'
+
+it('should return true', () => {
+  expect(true).toBeTruthy()
+})

src/breadcrumbs/Breadcrumbs.tsx

@@ -15,16 +15,19 @@ const Breadcrumbs = () => {
 
   return (
     <HrBreadcrumb>
-      {breadcrumbs.map(({ i18nKey, text, location }, index) => {
-        const isLast = index === breadcrumbs.length - 1
-        const onClick = !isLast ? () => history.push(location) : undefined
+      {breadcrumbs
+        .slice()
+        .sort((b1, b2) => b1.location.length - b2.location.length)
+        .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>
-        )
-      })}
+          return (
+            <HrBreadcrumbItem key={location} active={isLast} onClick={onClick}>
+              {i18nKey ? t(i18nKey) : text}
+            </HrBreadcrumbItem>
+          )
+        })}
     </HrBreadcrumb>
   )
 }

src/breadcrumbs/breadcrumbs-slice.ts

@@ -13,18 +13,18 @@ const breadcrumbsSlice = createSlice({
   name: 'breadcrumbs',
   initialState,
   reducers: {
-    setBreadcrumbs(state, { payload }: PayloadAction<Breadcrumb[]>) {
-      state.breadcrumbs = payload
+    addBreadcrumbs(state, { payload }: PayloadAction<Breadcrumb[]>) {
+      state.breadcrumbs = [...state.breadcrumbs, ...payload]
     },
-    addBreadcrumb(state, { payload }: PayloadAction<Breadcrumb>) {
-      state.breadcrumbs = [...state.breadcrumbs, payload]
-    },
-    removeBreadcrumb(state) {
-      state.breadcrumbs = state.breadcrumbs.slice(0, -1)
+    removeBreadcrumbs(state, { payload }: PayloadAction<Breadcrumb[]>) {
+      const locations = payload.map((b) => b.location)
+      state.breadcrumbs = state.breadcrumbs.filter(
+        (breadcrumb) => !locations.includes(breadcrumb.location),
+      )
     },
   },
 })
 
-export const { setBreadcrumbs, addBreadcrumb, removeBreadcrumb } = breadcrumbsSlice.actions
+export const { addBreadcrumbs, removeBreadcrumbs } = breadcrumbsSlice.actions
 
 export default breadcrumbsSlice.reducer

src/breadcrumbs/useAddBreadcrumbs.ts

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

src/dashboard/Dashboard.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import useTitle from '../page-header/useTitle'
-import useSetBreadcrumbs from '../breadcrumbs/useSetBreadcrumbs'
+import useAddBreadcrumbs from '../breadcrumbs/useAddBreadcrumbs'
 
 const breadcrumbs = [{ i18nKey: 'dashboard.label', location: '/' }]
 
 const Dashboard: React.FC = () => {
   const { t } = useTranslation()
   useTitle(t('dashboard.label'))
-  useSetBreadcrumbs(breadcrumbs)
+  useAddBreadcrumbs(breadcrumbs)
   return <h3>Example</h3>
 }
 

src/patients/appointments/AppointmentsList.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
 import { RootState } from '../../store'
 import { fetchPatientAppointments } from '../../scheduling/appointments/appointments-slice'
+import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
 
 interface Props {
   patientId: string
@@ -19,6 +20,14 @@ const AppointmentsList = (props: Props) => {
   const { appointments } = useSelector((state: RootState) => state.appointments)
   const [searchText, setSearchText] = useState<string>('')
 
+  const breadcrumbs = [
+    {
+      i18nKey: 'scheduling.appointments.label',
+      location: `/patients/${patientId}/appointments`,
+    },
+  ]
+  useAddBreadcrumbs(breadcrumbs)
+
   useEffect(() => {
     dispatch(fetchPatientAppointments(patientId))
   }, [dispatch, patientId])

src/patients/edit/EditPatient.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
@@ -10,7 +10,7 @@ import Patient from '../../model/Patient'
 import { updatePatient, fetchPatient } from '../patient-slice'
 import { RootState } from '../../store'
 import { getPatientFullName, getPatientName } from '../util/patient-name-util'
-import useSetBreadcrumbs from '../../breadcrumbs/useSetBreadcrumbs'
+import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
 
 const getFriendlyId = (p: Patient): string => {
   if (p) {
@@ -35,15 +35,12 @@ const EditPatient = () => {
     )})`,
   )
 
-  const breadcrumbs = useMemo(
-    () => [
-      { i18nKey: 'patients.label', location: '/patients' },
-      { text: getPatientFullName(patient), location: `/patients/${patient.id}` },
-      { i18nKey: 'patients.editPatient', location: `/patients/${patient.id}/edit` },
-    ],
-    [patient],
-  )
-  useSetBreadcrumbs(breadcrumbs)
+  const breadcrumbs = [
+    { i18nKey: 'patients.label', location: '/patients' },
+    { text: getPatientFullName(patient), location: `/patients/${patient.id}` },
+    { i18nKey: 'patients.editPatient', location: `/patients/${patient.id}/edit` },
+  ]
+  useAddBreadcrumbs(breadcrumbs)
 
   useEffect(() => {
     setPatient(reduxPatient)

src/patients/list/Patients.tsx

@@ -6,15 +6,15 @@ import { Spinner, TextInput, Button, List, ListItem, Container, Row } from '@hos
 import { RootState } from '../../store'
 import { fetchPatients, searchPatients } from '../patients-slice'
 import useTitle from '../../page-header/useTitle'
-import useSetBreadcrumbs from '../../breadcrumbs/useSetBreadcrumbs'
+import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
 
 const breadcrumbs = [{ i18nKey: 'patients.label', location: '/patients' }]
 
 const Patients = () => {
   const { t } = useTranslation()
   const history = useHistory()
   useTitle(t('patients.label'))
-  useSetBreadcrumbs(breadcrumbs)
+  useAddBreadcrumbs(breadcrumbs)
   const dispatch = useDispatch()
   const { patients, isLoading } = useSelector((state: RootState) => state.patients)
 

src/patients/new/NewPatient.tsx

@@ -9,7 +9,7 @@ import useTitle from '../../page-header/useTitle'
 import Patient from '../../model/Patient'
 import { createPatient } from '../patient-slice'
 import { getPatientName } from '../util/patient-name-util'
-import useSetBreadcrumbs from '../../breadcrumbs/useSetBreadcrumbs'
+import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
 
 const breadcrumbs = [
   { i18nKey: 'patients.label', location: '/patients' },
@@ -25,7 +25,7 @@ const NewPatient = () => {
   const [errorMessage, setErrorMessage] = useState('')
 
   useTitle(t('patients.newPatient'))
-  useSetBreadcrumbs(breadcrumbs)
+  useAddBreadcrumbs(breadcrumbs)
 
   const onCancel = () => {
     history.push('/patients')

src/patients/related-persons/RelatedPersonTab.tsx

@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from 'store'
 import Permissions from 'model/Permissions'
 import PatientRepository from 'clients/db/PatientRepository'
+import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
 
 interface Props {
   patient: Patient
@@ -28,6 +29,14 @@ const RelatedPersonTab = (props: Props) => {
   const [showNewRelatedPersonModal, setShowRelatedPersonModal] = useState<boolean>(false)
   const [relatedPersons, setRelatedPersons] = useState<Patient[] | undefined>(undefined)
 
+  const breadcrumbs = [
+    {
+      i18nKey: 'patient.relatedPersons.label',
+      location: `/patients/${patient.id}/relatedpersons`,
+    },
+  ]
+  useAddBreadcrumbs(breadcrumbs)
+
   useEffect(() => {
     const fetchRelatedPersons = async () => {
       const fetchedRelatedPersons: Patient[] = []

src/patients/view/ViewPatient.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams, withRouter, Route, useHistory, useLocation } from 'react-router-dom'
 import { Panel, Spinner, TabsHeader, Tab, Button } from '@hospitalrun/components'
@@ -11,7 +11,7 @@ import { getPatientFullName } from '../util/patient-name-util'
 import Patient from '../../model/Patient'
 import GeneralInformation from '../GeneralInformation'
 import RelatedPerson from '../related-persons/RelatedPersonTab'
-import useSetBreadcrumbs from '../../breadcrumbs/useSetBreadcrumbs'
+import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
 import AppointmentsList from '../appointments/AppointmentsList'
 
 const getFriendlyId = (p: Patient): string => {
@@ -32,14 +32,11 @@ const ViewPatient = () => {
 
   useTitle(`${getPatientFullName(patient)} (${getFriendlyId(patient)})`)
 
-  const breadcrumbs = useMemo(
-    () => [
-      { i18nKey: 'patients.label', location: '/patients' },
-      { text: getPatientFullName(patient), location: `/patients/${patient.id}` },
-    ],
-    [patient],
-  )
-  useSetBreadcrumbs(breadcrumbs)
+  const breadcrumbs = [
+    { i18nKey: 'patients.label', location: '/patients' },
+    { text: getPatientFullName(patient), location: `/patients/${patient.id}` },
+  ]
+  useAddBreadcrumbs(breadcrumbs)
 
   const { id } = useParams()
   useEffect(() => {

src/scheduling/appointments/Appointments.tsx

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { RootState } from 'store'
 import { useHistory } from 'react-router'
 import PatientRepository from 'clients/db/PatientRepository'
-import useSetBreadcrumbs from 'breadcrumbs/useSetBreadcrumbs'
+import useAddBreadcrumbs from 'breadcrumbs/useAddBreadcrumbs'
 import { fetchAppointments } from './appointments-slice'
 
 interface Event {
@@ -23,7 +23,7 @@ const Appointments = () => {
   const { t } = useTranslation()
   const history = useHistory()
   useTitle(t('scheduling.appointments.label'))
-  useSetBreadcrumbs(breadcrumbs)
+  useAddBreadcrumbs(breadcrumbs)
   const dispatch = useDispatch()
   const { appointments } = useSelector((state: RootState) => state.appointments)
   const [events, setEvents] = useState<Event[]>([])

src/scheduling/appointments/new/NewAppointment.tsx

@@ -8,7 +8,7 @@ import Appointment from 'model/Appointment'
 import addMinutes from 'date-fns/addMinutes'
 import { isBefore } from 'date-fns'
 import { Button, Alert } from '@hospitalrun/components'
-import useSetBreadcrumbs from '../../../breadcrumbs/useSetBreadcrumbs'
+import useAddBreadcrumbs from '../../../breadcrumbs/useAddBreadcrumbs'
 import { createAppointment } from '../appointments-slice'
 import AppointmentDetailForm from '../AppointmentDetailForm'
 
@@ -22,7 +22,7 @@ const NewAppointment = () => {
   const history = useHistory()
   const dispatch = useDispatch()
   useTitle(t('scheduling.appointments.new'))
-  useSetBreadcrumbs(breadcrumbs)
+  useAddBreadcrumbs(breadcrumbs)
   const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
   const endDateTime = addMinutes(startDateTime, 60)
 

src/scheduling/appointments/view/ViewAppointment.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect } from 'react'
 import useTitle from 'page-header/useTitle'
 import { useSelector, useDispatch } from 'react-redux'
 import { RootState } from 'store'
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'
 import Appointment from 'model/Appointment'
 import { fetchAppointment } from '../appointment-slice'
 import AppointmentDetailForm from '../AppointmentDetailForm'
-import useSetBreadcrumbs from '../../../breadcrumbs/useSetBreadcrumbs'
+import useAddBreadcrumbs from '../../../breadcrumbs/useAddBreadcrumbs'
 
 function getAppointmentLabel(appointment: Appointment) {
   const { id, startDateTime, endDateTime } = appointment
@@ -25,14 +25,11 @@ const ViewAppointment = () => {
   const { id } = useParams()
   const { appointment, patient, isLoading } = useSelector((state: RootState) => state.appointment)
 
-  const breadcrumbs = useMemo(
-    () => [
-      { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
-      { text: getAppointmentLabel(appointment), location: `/patients/${appointment.id}` },
-    ],
-    [appointment],
-  )
-  useSetBreadcrumbs(breadcrumbs)
+  const breadcrumbs = [
+    { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+    { text: getAppointmentLabel(appointment), location: `/patients/${appointment.id}` },
+  ]
+  useAddBreadcrumbs(breadcrumbs)
 
   useEffect(() => {
     if (id) {