Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Commit

Permalink
feat(breadcrumb): sort the breadcrumbs in addBreadcrumbs action
Browse files Browse the repository at this point in the history
fix #1770
  • Loading branch information
oliv37 committed Feb 17, 2020
1 parent 6d450c9 commit bbb3ca0
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 15 deletions.
2 changes: 1 addition & 1 deletion src/__tests__/breadcrumbs/Breadcrumbs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
24 changes: 23 additions & 1 deletion src/__tests__/breadcrumbs/breadcrumbs-slice.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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' }]

Expand Down
21 changes: 9 additions & 12 deletions src/breadcrumbs/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
4 changes: 3 additions & 1 deletion src/breadcrumbs/breadcrumbs-slice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit bbb3ca0

Please sign in to comment.