feat(breadcrumb): sort the breadcrumbs in addBreadcrumbs action

fix #1770

src/__tests__/breadcrumbs/Breadcrumbs.test.tsx

@@ -32,9 +32,9 @@ describe('Breadcrumbs', () => {
 
   it('should render breadcrumbs items', () => {
     const breadcrumbs = [
-      { text: 'Edit Patient', location: '/patient/1/edit' },
       { i18nKey: 'patient.label', location: '/patient' },
       { text: 'Bob', location: '/patient/1' },
+      { text: 'Edit Patient', location: '/patient/1/edit' },
     ]
     const wrapper = setup(breadcrumbs)
 

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

@@ -24,7 +24,7 @@ describe('breadcrumbs slice', () => {
       expect(breadcrumbsStore.breadcrumbs).toEqual(breadcrumbsToAdd)
     })
 
-    it('should handle the ADD_BREADCRUMBS action with existing breadcreumbs', () => {
+    it('should handle the ADD_BREADCRUMBS action with existing breadcrumbs', () => {
       const breadcrumbsToAdd = [{ text: 'Bob', location: '/user/1' }]
 
       const state = {
@@ -39,6 +39,28 @@ describe('breadcrumbs slice', () => {
       expect(breadcrumbsStore.breadcrumbs).toEqual([...state.breadcrumbs, ...breadcrumbsToAdd])
     })
 
+    it('should handle the ADD_BREADCRUMBS action and sort the breadcrumbs by their location', () => {
+      const breadcrumbsToAdd = [{ text: 'Bob', location: '/user/1/' }]
+
+      const state = {
+        breadcrumbs: [
+          { text: 'user', location: '/user' },
+          { text: 'edit user', location: '/user/1/edit' },
+        ],
+      }
+
+      const breadcrumbsStore = breadcrumbs(state, {
+        type: addBreadcrumbs.type,
+        payload: breadcrumbsToAdd,
+      })
+
+      expect(breadcrumbsStore.breadcrumbs).toEqual([
+        { text: 'user', location: '/user' },
+        { text: 'Bob', location: '/user/1/' },
+        { text: 'edit user', location: '/user/1/edit' },
+      ])
+    })
+
     it('should handle the REMOVE_BREADCRUMBS action', () => {
       const breadcrumbsToRemove = [{ text: 'Bob', location: '/user/1' }]
 

src/breadcrumbs/Breadcrumbs.tsx

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

src/breadcrumbs/breadcrumbs-slice.ts

@@ -14,7 +14,9 @@ const breadcrumbsSlice = createSlice({
   initialState,
   reducers: {
     addBreadcrumbs(state, { payload }: PayloadAction<Breadcrumb[]>) {
-      state.breadcrumbs = [...state.breadcrumbs, ...payload]
+      state.breadcrumbs = [...state.breadcrumbs, ...payload].sort(
+        (b1, b2) => b1.location.length - b2.location.length,
+      )
     },
     removeBreadcrumbs(state, { payload }: PayloadAction<Breadcrumb[]>) {
       const locations = payload.map((b) => b.location)