fix: swap out match-sorter with new hooks in CM

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(
+  const { collectionTypeLinks, singleTypeLinks } = useSelector(modelLinksSelector, shallowEqual);
-    (state) => modelLinksSelector(state),
+
-    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('');
   };

packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js

@@ -1 +0,0 @@
-export { default as matchByTitle } from './matchByTitle';

packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js

@@ -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;

packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js

@@ -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',
-        },
-      ]);
-    });
-  });
-});

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",