Merge pull request #16 from collective/get_items_by_path

refactor: get items by path

src/customizations/components/theme/Navigation/Navigation.jsx

@@ -16,6 +16,7 @@ import { flattenToAppURL } from '@plone/volto/helpers';
 
 import DropdownMenu from '../../../../components/DropdownMenu';
 import { getDropdownMenuNavitems } from '../../../../actions';
+import { getItemsByPath } from '../../../../utils';
 
 const messages = defineMessages({
   closeMobileMenu: {
@@ -43,7 +44,7 @@ const Navigation = ({ pathname, type }) => {
 
   useEffect(() => {
     dispatch(getDropdownMenuNavitems());
-  }, [dispatch]);
+  }, [dispatch, token]);
 
   const getAnchorTarget = (nodeElement) => {
     if (nodeElement.nodeName === 'A') {
@@ -101,14 +102,7 @@ const Navigation = ({ pathname, type }) => {
     );
   };
 
-  const initialmenu =
-    dropdownMenuNavItems
-      .filter((menu) =>
-        (pathname?.length ? pathname : '/').match(
-          new RegExp(flattenToAppURL(menu.rootPath)),
-        ),
-      )
-      .pop()?.items ?? [];
+  const menu = getItemsByPath(dropdownMenuNavItems, pathname);
 
   return (
     <nav className="navigation navigation-dropdownmenu">
@@ -159,8 +153,8 @@ const Navigation = ({ pathname, type }) => {
             isMobileMenuOpen ? 'open' : 'computer large screen widescreen only'
           }
         >
-          {initialmenu?.length > 0
-            ? initialmenu
+          {menu?.length > 0
+            ? menu
                 ?.filter((item) => item.visible)
                 ?.filter(
                   (item) =>

src/index.js

@@ -1,8 +1,9 @@
 import { dropdownMenuNavItemsReducer } from './reducers';
 import MenuConfigurationWidget from './widget/MenuConfigurationWidget';
 import { getDropdownMenuNavitems } from './actions';
+import { getItemsByPath } from './utils';
 
-export { MenuConfigurationWidget, getDropdownMenuNavitems };
+export { MenuConfigurationWidget, getDropdownMenuNavitems, getItemsByPath };
 
 export default (config) => {
   config.widgets.id = {

src/utils.js

@@ -0,0 +1,19 @@
+export function getItemsByPath(items, pathname) {
+  let rootPathConfig = null;
+  const itemsByPath = items?.reduce((acc, val) => {
+    if (val.rootPath === '/') {
+      rootPathConfig = val;
+      return acc;
+    }
+    return { ...acc, [val.rootPath]: val };
+  }, {});
+  const matchingPaths = Object.keys(itemsByPath)
+    .filter((path) => pathname.startsWith(path))
+    .sort((a, b) => {
+      return a.length < b.length;
+    });
+
+  if (matchingPaths.length > 0) return itemsByPath[matchingPaths[0]].items;
+  else if (rootPathConfig) return rootPathConfig.items;
+  else return [];
+}