diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js index cd13676772..b7baa0be02 100644 --- a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js @@ -7,13 +7,8 @@ import React, { useMemo, useState } from 'react'; import { useSelector, shallowEqual } from 'react-redux'; import { useIntl } from 'react-intl'; -import matchSorter from 'match-sorter'; import { NavLink } from 'react-router-dom'; -import sortBy from 'lodash/sortBy'; -import toLower from 'lodash/toLower'; -import camelCase from 'lodash/camelCase'; - import { SubNav, SubNavHeader, @@ -22,14 +17,10 @@ import { SubNavLink, } from '@strapi/design-system/v2/SubNav'; +import { matchByTitle } from './utils'; import getTrad from '../../../utils/getTrad'; import { makeSelectModelLinks } from '../selectors'; -const matchByTitle = (links, search) => - search - ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] }) - : sortBy(links, (object) => camelCase(object.title)); - const LeftMenu = () => { const [search, setSearch] = useState(''); const { formatMessage } = useIntl(); diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js new file mode 100644 index 0000000000..f77f21bb4b --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js @@ -0,0 +1 @@ +export { default as matchByTitle } from './matchByTitle'; diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js new file mode 100644 index 0000000000..340d80dadf --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js @@ -0,0 +1,24 @@ +import matchSorter from 'match-sorter'; +import camelCase from 'lodash/camelCase'; + +/** + * @type {(links: array, search? : string) => array } + */ +const matchByTitle = (links, search) => + search + ? matchSorter(links, search.toLowerCase(), { keys: [(item) => item.title.toLowerCase()] }) + : links.sort((link, linkNext) => { + const title = camelCase(link.title); + const nextTitle = camelCase(linkNext.title); + + if (title < nextTitle) { + return -1; + } + if (title > nextTitle) { + return 1; + } + + return 0; + }); + +export default matchByTitle; diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js new file mode 100644 index 0000000000..ddf1e00857 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js @@ -0,0 +1,43 @@ +import { matchByTitle } from '../index'; + +describe('Content Manager | Pages | LeftMenu | Utils', () => { + describe('matchByTitle', () => { + it('correctly sorts a list of links with special characters', () => { + const links = [ + { + title: 'zebra', + }, + { + title: 'Address', + }, + { + title: 'dog', + }, + { + title: 'škola', + }, + { + title: 'Članky', + }, + ]; + + expect(matchByTitle(links)).toEqual([ + { + title: 'Address', + }, + { + title: 'Članky', + }, + { + title: 'dog', + }, + { + title: 'škola', + }, + { + title: 'zebra', + }, + ]); + }); + }); +});