From ce6a24ee10d786c0dcfe02f1630a900783201b84 Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Mon, 17 Apr 2023 10:12:55 +0100 Subject: [PATCH] fix: swap out match-sorter with new hooks in CM --- .../pages/App/LeftMenu/index.js | 95 +++++++++++-------- .../pages/App/LeftMenu/utils/index.js | 1 - .../pages/App/LeftMenu/utils/matchByTitle.js | 24 ----- .../LeftMenu/utils/tests/matchByTitle.test.js | 43 --------- packages/core/admin/package.json | 1 - 5 files changed, 58 insertions(+), 106 deletions(-) delete mode 100644 packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js delete mode 100644 packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js delete mode 100644 packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js 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 bcb39cbfcd..2fbec13679 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 @@ -16,52 +16,73 @@ import { SubNavSections, SubNavLink, } from '@strapi/design-system/v2'; +import { useFilter, useCollator } from '@strapi/helper-plugin'; -import { matchByTitle } from './utils'; import getTrad from '../../../utils/getTrad'; import { makeSelectModelLinks } from '../selectors'; const LeftMenu = () => { const [search, setSearch] = useState(''); - const { formatMessage } = useIntl(); + const { formatMessage, locale } = useIntl(); const modelLinksSelector = useMemo(makeSelectModelLinks, []); - const { collectionTypeLinks, singleTypeLinks } = useSelector( - (state) => modelLinksSelector(state), - shallowEqual + const { collectionTypeLinks, singleTypeLinks } = useSelector(modelLinksSelector, shallowEqual); + + const { contains } = useFilter(locale, { + sensitivity: 'base', + }); + + /** + * @type {Intl.Collator} + */ + const formatter = useCollator(locale, { + sensitivity: 'base', + }); + + const menu = useMemo( + () => + [ + { + id: 'collectionTypes', + title: { + id: getTrad('components.LeftMenu.collection-types'), + defaultMessage: 'Collection Types', + }, + searchable: true, + links: collectionTypeLinks, + }, + { + id: 'singleTypes', + title: { + id: getTrad('components.LeftMenu.single-types'), + defaultMessage: 'Single Types', + }, + searchable: true, + links: singleTypeLinks, + }, + ].map((section) => ({ + ...section, + links: section.links + /** + * Filter by the search value + */ + .filter((link) => contains(link.title, search)) + /** + * Sort correctly using the language + */ + .sort((a, b) => formatter.compare(a.title, b.title)) + /** + * Apply the formated strings to the links from react-intl + */ + .map((link) => { + return { + ...link, + title: formatMessage({ id: link.title, defaultMessage: link.title }), + }; + }), + })), + [collectionTypeLinks, search, singleTypeLinks, contains, formatMessage, formatter] ); - const toIntl = (links) => - links.map((link) => { - return { - ...link, - title: formatMessage({ id: link.title, defaultMessage: link.title }), - }; - }); - - const intlCollectionTypeLinks = toIntl(collectionTypeLinks); - const intlSingleTypeLinks = toIntl(singleTypeLinks); - - const menu = [ - { - id: 'collectionTypes', - title: { - id: getTrad('components.LeftMenu.collection-types'), - defaultMessage: 'Collection Types', - }, - searchable: true, - links: matchByTitle(intlCollectionTypeLinks, search), - }, - { - id: 'singleTypes', - title: { - id: getTrad('components.LeftMenu.single-types'), - defaultMessage: 'Single Types', - }, - searchable: true, - links: matchByTitle(intlSingleTypeLinks, search), - }, - ]; - const handleClear = () => { setSearch(''); }; 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 deleted file mode 100644 index f77f21bb4b..0000000000 --- a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 9bc23b2686..0000000000 --- a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js +++ /dev/null @@ -1,24 +0,0 @@ -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, nextLink) => { - const title = camelCase(link.title); - const nextTitle = camelCase(nextLink.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 deleted file mode 100644 index ddf1e00857..0000000000 --- a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js +++ /dev/null @@ -1,43 +0,0 @@ -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', - }, - ]); - }); - }); -}); diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json index 46b628c6df..7944ae55b8 100644 --- a/packages/core/admin/package.json +++ b/packages/core/admin/package.json @@ -102,7 +102,6 @@ "markdown-it-mark": "^3.0.1", "markdown-it-sub": "^1.0.0", "markdown-it-sup": "1.0.0", - "match-sorter": "^4.0.2", "mini-css-extract-plugin": "2.7.2", "node-schedule": "2.1.0", "p-map": "4.0.0",