forked from italia/design-comuni-plone-theme
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: sitemap in multilingual sites was erroring (#639)
* fix: sitemap in multilingual sites was erroring, volto bug, fixed * fix: sitemap in multilingual sites was erroring, volto bug, fixed --------- Co-authored-by: Piero Nicolli <[email protected]>
- Loading branch information
1 parent
a957571
commit c86add5
Showing
3 changed files
with
170 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
src/customizations/volto/components/theme/Sitemap/Sitemap.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| /* | ||
| CUSTOMIZATIONS: | ||
| - make it work, prop name lang was wrong, remove in volto 18 | ||
| */ | ||
|
|
||
| import { useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { compose } from 'redux'; | ||
| import { connect } from 'react-redux'; | ||
| import { asyncConnect } from '@plone/volto/helpers'; | ||
| import { defineMessages, injectIntl } from 'react-intl'; | ||
| import { Container as SemanticContainer } from 'semantic-ui-react'; | ||
| import { Helmet, toBackendLang } from '@plone/volto/helpers'; | ||
| import { Link } from 'react-router-dom'; | ||
| import config from '@plone/volto/registry'; | ||
|
|
||
| import { getNavigation } from '@plone/volto/actions'; | ||
|
|
||
| const messages = defineMessages({ | ||
| Sitemap: { | ||
| id: 'Sitemap', | ||
| defaultMessage: 'Sitemap', | ||
| }, | ||
| }); | ||
|
|
||
| export function getSitemapPath(pathname = '', lang) { | ||
| const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, ''); | ||
| const path = prefix || lang || ''; | ||
| return path; | ||
| } | ||
|
|
||
| /** | ||
| * Sitemap function component. | ||
| * @function Sitemap | ||
| * @param {Object} props - Component properties. | ||
| * @returns {JSX.Element} - Rendered component. | ||
| */ | ||
| function Sitemap(props) { | ||
| const { | ||
| location: { pathname }, | ||
| lang, | ||
| getNavigation, | ||
| } = props; | ||
|
|
||
| useEffect(() => { | ||
| const { settings } = config; | ||
| const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null; | ||
| const path = getSitemapPath(pathname, language); | ||
| getNavigation(path, 4); | ||
| }, [pathname, lang, getNavigation]); | ||
|
|
||
| const renderItems = (items) => { | ||
| return ( | ||
| <ul> | ||
| {items.map((item) => ( | ||
| <li | ||
| key={item.url} | ||
| className={item.items?.length > 0 ? 'with-children' : ''} | ||
| > | ||
| <Link to={item.url}>{item.title}</Link> | ||
| {item.items && renderItems(item.items)} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| }; | ||
|
|
||
| const Container = | ||
| config.getComponent({ name: 'Container' }).component || SemanticContainer; | ||
|
|
||
| return ( | ||
| <div id="page-sitemap"> | ||
| <Helmet title={props.intl.formatMessage(messages.Sitemap)} /> | ||
| <Container className="view-wrapper"> | ||
| <h1>{props.intl.formatMessage(messages.Sitemap)} </h1> | ||
| {props.items && renderItems(props.items)} | ||
| </Container> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| Sitemap.propTypes = { | ||
| getNavigation: PropTypes.func.isRequired, | ||
| location: PropTypes.object.isRequired, | ||
| intl: PropTypes.object.isRequired, | ||
| lang: PropTypes.string.isRequired, | ||
| items: PropTypes.array.isRequired, | ||
| }; | ||
|
|
||
| export const __test__ = compose( | ||
| injectIntl, | ||
| connect( | ||
| (state) => ({ | ||
| items: state.navigation.items, | ||
| lang: state.intl.locale, | ||
| }), | ||
| { getNavigation }, | ||
| ), | ||
| )(Sitemap); | ||
|
|
||
| export default compose( | ||
| injectIntl, | ||
| connect( | ||
| (state) => ({ | ||
| items: state.navigation.items, | ||
| lang: state.intl.locale, | ||
| }), | ||
| { getNavigation }, | ||
| ), | ||
| 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, | ||
| ); | ||
| return dispatch(getNavigation(path, 4)); | ||
| }, | ||
| }, | ||
| ]), | ||
| )(Sitemap); |