@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

package/src/components/theme/Logo/Logo.jsx

@@ -2,24 +2,18 @@
  * Logo component.
  * @module components/theme/Logo/Logo
  */
-
-import { defineMessages, useIntl } from 'react-intl';
+import { useEffect } from 'react';
 import { Image } from 'semantic-ui-react';
-import { useSelector } from 'react-redux';
-import config from '@plone/volto/registry';
-import { UniversalLink } from '@plone/volto/components';
+import { ConditionalLink } from '@plone/volto/components';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
-
-const messages = defineMessages({
-  site: {
-    id: 'Site',
-    defaultMessage: 'Site',
-  },
-  plonesite: {
-    id: 'Plone Site',
-    defaultMessage: 'Plone Site',
-  },
-});
+import { useSelector, useDispatch } from 'react-redux';
+import { getNavroot } from '@plone/volto/actions';
+import {
+  flattenToAppURL,
+  hasApiExpander,
+  getBaseUrl,
+  toPublicURL,
+} from '@plone/volto/helpers';
 
 /**
  * Logo component class.
@@ -28,21 +22,36 @@ const messages = defineMessages({
  * @returns {string} Markup of the component.
  */
 const Logo = () => {
-  const { settings } = config;
-  const lang = useSelector((state) => state.intl.locale);
-  const intl = useIntl();
+  const pathname = useSelector((state) => state.router.location.pathname);
+  const site = useSelector((state) => state.site.data);
+  const navroot = useSelector((state) => state.navroot.data);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) {
+      dispatch(getNavroot(getBaseUrl(pathname)));
+    }
+  }, [dispatch, pathname]);
+
+  // remove trailing slash
+  const currentURL = toPublicURL(pathname).replace(/\/$/, '');
 
   return (
-    <UniversalLink
-      href={settings.isMultilingual ? `/${lang}` : '/'}
-      title={intl.formatMessage(messages.site)}
+    <ConditionalLink
+      href={navroot?.navroot?.['@id']}
+      title={navroot?.navroot?.title}
+      condition={currentURL !== navroot?.navroot?.['@id']}
     >
       <Image
-        src={LogoImage}
-        alt={intl.formatMessage(messages.plonesite)}
-        title={intl.formatMessage(messages.plonesite)}
+        src={
+          site['plone.site_logo']
+            ? flattenToAppURL(site['plone.site_logo'])
+            : LogoImage
+        }
+        alt={navroot?.navroot?.title}
+        title={navroot?.navroot?.title}
       />
-    </UniversalLink>
+    </ConditionalLink>
   );
 };
 

package/src/components/theme/Logo/Logo.test.jsx

@@ -4,17 +4,151 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
+import config from '@plone/volto/registry';
+
 import Logo from './Logo';
 
 const mockStore = configureStore();
 
+beforeAll(() => {
+  config.settings.publicURL = 'http://localhost:3000';
+});
+
 describe('Logo', () => {
-  it('renders a logo component', () => {
+  it('renders a logo component with default config', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/',
+        },
+      },
+      site: {
+        data: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a logo component with a custom logo', () => {
     const store = mockStore({
       intl: {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_logo':
+            'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+        },
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a logo component with default config in a non-root url', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/some-page',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_logo':
+            'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+        },
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+  it('renders a logo component with a custom logo in a non-root url', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/some-page',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_logo':
+            'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Logout/Logout.jsx

@@ -1,19 +1,11 @@
-/**
- * Login container.
- * @module components/theme/Logout/Logout
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
-
-import { Login } from '@plone/volto/components';
+import { Login, Toast } from '@plone/volto/components';
 import { logout, purgeMessages } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
 
 const messages = defineMessages({
   loggedOut: {
@@ -26,83 +18,44 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Logout class.
- * @class Logout
- * @extends Component
- */
-class Logout extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    logout: PropTypes.func.isRequired,
-    purgeMessages: PropTypes.func.isRequired,
-    query: PropTypes.shape({
-      return_url: PropTypes.string,
-    }),
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    query: null,
-  };
-
-  componentDidMount() {
-    this.props.logout();
-    this.props.purgeMessages();
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.token) {
-      this.props.history.replace(this.props.returnUrl || '/');
+const Logout = ({ location }) => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const history = useHistory();
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const returnUrl = useMemo(
+    () =>
+      qs.parse(location.search).return_url ||
+      location.pathname
+        .replace(/\/login\/?$/, '')
+        .replace(/\/logout\/?$/, '') ||
+      '/',
+    [location],
+  );
+
+  useEffect(() => {
+    dispatch(logout());
+    dispatch(purgeMessages());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!token) {
+      history.replace(returnUrl || '/');
       if (!toast.isActive('loggedOut')) {
         toast.info(
           <Toast
             info
-            title={this.props.intl.formatMessage(messages.loggedOut)}
-            content={this.props.intl.formatMessage(messages.loggedOutContent)}
+            title={intl.formatMessage(messages.loggedOut)}
+            content={intl.formatMessage(messages.loggedOutContent)}
           />,
           { autoClose: false, toastId: 'loggedOut' },
         );
       }
     }
-  }
+  }, [history, returnUrl, intl, token]);
+
+  return <Login location={{ query: location.query }} isLogout={true} />;
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return <Login location={{ query: this.props.location.query }} />;
-  }
-}
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      query: qs.parse(props.location.search),
-      token: state.userSession.token,
-      returnUrl:
-        qs.parse(props.location.search).return_url ||
-        props.location.pathname
-          .replace(/\/login\/?$/, '')
-          .replace(/\/logout\/?$/, '') ||
-        '/',
-    }),
-    { logout, purgeMessages },
-  ),
-)(Logout);
+export default Logout;

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 
 const MultilingualRedirector = (props) => {
   const { settings } = config;
@@ -23,7 +23,7 @@ const MultilingualRedirector = (props) => {
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
     if (settings.isMultilingual && pathname === '/') {
-      const langFileName = normalizeLanguageName(redirectToLanguage);
+      const langFileName = toGettextLang(redirectToLanguage);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         if (mounted) {
           dispatch(changeLanguage(redirectToLanguage, locale.default));

package/src/components/theme/Navigation/NavItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { isInternalURL } from '@plone/volto/helpers';
+import { isInternalURL, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const NavItem = ({ item, lang }) => {
@@ -15,7 +15,9 @@ const NavItem = ({ item, lang }) => {
         className="item"
         activeClassName="active"
         exact={
-          settings.isMultilingual ? item.url === `/${lang}` : item.url === ''
+          settings.isMultilingual
+            ? item.url === `/${toBackendLang(lang)}`
+            : item.url === ''
         }
       >
         {item.title}