Use navroot to render the sitemap (targets 17.x.x)

news/5185.feature

@@ -0,0 +1 @@
+Use navroot to render the sitemap @erral

src/components/theme/Sitemap/Sitemap.jsx

@@ -7,14 +7,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { asyncConnect } from '@plone/volto/helpers';
+import { asyncConnect, flattenToAppURL } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
-import { Helmet, toBackendLang } from '@plone/volto/helpers';
+import { Helmet } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
-import { getNavigation } from '@plone/volto/actions';
+import { getNavigation, getNavroot } from '@plone/volto/actions';
 
 const messages = defineMessages({
   Sitemap: {
@@ -23,12 +23,6 @@ const messages = defineMessages({
   },
 });
 
-export function getSitemapPath(pathname = '', lang) {
-  const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
-  const path = prefix || lang || '';
-  return path;
-}
-
 /**
  * Sitemap class.
  * @class Sitemap
@@ -45,14 +39,10 @@ class Sitemap extends Component {
   };
 
   componentDidMount() {
-    const { settings } = config;
-
-    const lang = settings.isMultilingual
-      ? `${toBackendLang(this.props.lang)}`
-      : null;
-
-    const path = getSitemapPath(this.props.location.pathname, lang);
-    this.props.getNavigation(path, 4);
+    this.props.getNavigation(
+      flattenToAppURL(this.props.navroot?.navroot?.['@id']),
+      config.settings.siteMapDepth,
+    );
   }
 
   /**
@@ -95,9 +85,9 @@ export const __test__ = compose(
   connect(
     (state) => ({
       items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot.data,
     }),
-    { getNavigation },
+    { getNavigation, getNavroot },
   ),
 )(Sitemap);
 
@@ -106,25 +96,20 @@ export default compose(
   connect(
     (state) => ({
       items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot.data,
     }),
-    { getNavigation },
+    { getNavigation, getNavroot },
   ),
   asyncConnect([
     {
       key: 'navigation',
       promise: ({ location, store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
-        const { settings } = config;
 
-        const path = getSitemapPath(
-          location.pathname,
-          settings.isMultilingual
-            ? toBackendLang(getState().intl.locale)
-            : null,
+        const navroot = getState().navroot.data?.navroot?.navroot?.['@id'];
+        return dispatch(
+          getNavigation(flattenToAppURL(navroot), config.settings.siteMapDepth),
         );
-
-        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

src/components/theme/Sitemap/Sitemap.test.jsx

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
-import { __test__ as Sitemap, getSitemapPath } from './Sitemap';
+import { __test__ as Sitemap } from './Sitemap';
 
 const mockStore = configureStore();
 
@@ -42,6 +42,11 @@ describe('Sitemap', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        navroot: {
+          '@id': 'http://localhost:8080/Plone',
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -54,24 +59,3 @@ describe('Sitemap', () => {
     expect(json).toMatchSnapshot();
   });
 });
-
-describe('getSitemapPath', () => {
-  it('accepts empty path', () => {
-    expect(getSitemapPath('', null)).toBe('');
-  });
-
-  it('accepts a path', () => {
-    expect(getSitemapPath('/page-1/sitemap', null)).toBe('page-1');
-  });
-  it('accepts a path', () => {
-    expect(getSitemapPath('/page-1/sitemap', null)).toBe('page-1');
-  });
-
-  it('uses a language as default root', () => {
-    expect(getSitemapPath('/', 'de')).toBe('de');
-  });
-
-  it('accepts language-rooted paths', () => {
-    expect(getSitemapPath('/de/mission', 'de')).toBe('de/mission');
-  });
-});

src/config/index.js

@@ -130,6 +130,7 @@ let config = {
     supportedLanguages: ['en'],
     defaultLanguage: 'en',
     navDepth: 1,
+    siteMapDepth: 4,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
     verticalFormTabs: false,