@plone/volto 17.0.0-alpha.24 → 17.0.0-alpha.26

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

@@ -2,25 +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 { toBackendLang } from '@plone/volto/helpers';
+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.
@@ -29,23 +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 ? `/${toBackendLang(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)}
-        width="158.2"
-        height="40.7"
+        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/Navigation/Navigation.jsx

@@ -1,14 +1,9 @@
-/**
- * Navigation components.
- * @module components/theme/Navigation/Navigation
- */
-
-import React, { Component } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 import { Menu } from 'semantic-ui-react';
+
 import cx from 'classnames';
 import { BodyClass, getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
@@ -27,176 +22,96 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Navigation container class.
- * @class Navigation
- * @extends Component
- */
-class Navigation extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getNavigation: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-    lang: PropTypes.string.isRequired,
-  };
-
-  static defaultProps = {
-    token: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Navigation
-   */
-  constructor(props) {
-    super(props);
-    this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
-    this.closeMobileMenu = this.closeMobileMenu.bind(this);
-    this.state = {
-      isMobileMenuOpen: false,
-    };
-  }
+const Navigation = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { pathname, type } = props;
+  const [isMobileMenuOpen, setisMobileMenuOpen] = useState(false);
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const items = useSelector((state) => state.navigation.items, shallowEqual);
+  const lang = useSelector((state) => state.intl.locale);
 
-  componentDidMount() {
+  useEffect(() => {
     const { settings } = config;
-    if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) {
-      this.props.getNavigation(
-        getBaseUrl(this.props.pathname),
-        settings.navDepth,
-      );
+    if (!hasApiExpander('navigation', getBaseUrl(pathname))) {
+      dispatch(getNavigation(getBaseUrl(pathname), settings.navDepth));
     }
-  }
+  }, [pathname, token, dispatch]);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { settings } = config;
-    if (
-      nextProps.pathname !== this.props.pathname ||
-      nextProps.token !== this.props.token
-    ) {
-      if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) {
-        this.props.getNavigation(
-          getBaseUrl(nextProps.pathname),
-          settings.navDepth,
-        );
-      }
-    }
-  }
-
-  /**
-   * Toggle mobile menu's open state
-   * @method toggleMobileMenu
-   * @returns {undefined}
-   */
-  toggleMobileMenu() {
-    this.setState({ isMobileMenuOpen: !this.state.isMobileMenuOpen });
-  }
+  const toggleMobileMenu = () => {
+    setisMobileMenuOpen(!isMobileMenuOpen);
+  };
 
-  /**
-   * Close mobile menu
-   * @method closeMobileMenu
-   * @returns {undefined}
-   */
-  closeMobileMenu() {
-    if (!this.state.isMobileMenuOpen) {
+  const closeMobileMenu = () => {
+    if (!isMobileMenuOpen) {
       return;
     }
-    this.setState({ isMobileMenuOpen: false });
-  }
+    setisMobileMenuOpen(false);
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <nav className="navigation" id="navigation" aria-label="navigation">
-        <div className="hamburger-wrapper mobile tablet only">
-          <button
-            className={cx('hamburger hamburger--spin', {
-              'is-active': this.state.isMobileMenuOpen,
-            })}
-            aria-label={
-              this.state.isMobileMenuOpen
-                ? this.props.intl.formatMessage(messages.closeMobileMenu, {
-                    type: this.props.type,
-                  })
-                : this.props.intl.formatMessage(messages.openMobileMenu, {
-                    type: this.props.type,
-                  })
-            }
-            title={
-              this.state.isMobileMenuOpen
-                ? this.props.intl.formatMessage(messages.closeMobileMenu, {
-                    type: this.props.type,
-                  })
-                : this.props.intl.formatMessage(messages.openMobileMenu, {
-                    type: this.props.type,
-                  })
-            }
-            type="button"
-            onClick={this.toggleMobileMenu}
-          >
-            <span className="hamburger-box">
-              <span className="hamburger-inner" />
-            </span>
-          </button>
-        </div>
-        <Menu
-          stackable
-          pointing
-          secondary
-          className="computer large screen widescreen only"
-          onClick={this.closeMobileMenu}
+  return (
+    <nav className="navigation" id="navigation" aria-label="navigation">
+      <div className="hamburger-wrapper mobile tablet only">
+        <button
+          className={cx('hamburger hamburger--spin', {
+            'is-active': isMobileMenuOpen,
+          })}
+          aria-label={
+            isMobileMenuOpen
+              ? intl.formatMessage(messages.closeMobileMenu, {
+                  type: type,
+                })
+              : intl.formatMessage(messages.openMobileMenu, {
+                  type: type,
+                })
+          }
+          title={
+            isMobileMenuOpen
+              ? intl.formatMessage(messages.closeMobileMenu, {
+                  type: type,
+                })
+              : intl.formatMessage(messages.openMobileMenu, {
+                  type: type,
+                })
+          }
+          type="button"
+          onClick={toggleMobileMenu}
         >
-          <NavItems items={this.props.items} lang={this.props.lang} />
-        </Menu>
-        <CSSTransition
-          in={this.state.isMobileMenuOpen}
-          timeout={500}
-          classNames="mobile-menu"
-          unmountOnExit
-        >
-          <div key="mobile-menu-key" className="mobile-menu">
-            <BodyClass className="has-mobile-menu-open" />
-            <div className="mobile-menu-nav">
-              <Menu stackable pointing secondary onClick={this.closeMobileMenu}>
-                <NavItems items={this.props.items} lang={this.props.lang} />
-              </Menu>
-            </div>
+          <span className="hamburger-box">
+            <span className="hamburger-inner" />
+          </span>
+        </button>
+      </div>
+      <Menu
+        stackable
+        pointing
+        secondary
+        className="computer large screen widescreen only"
+        onClick={closeMobileMenu}
+      >
+        <NavItems items={items} lang={lang} />
+      </Menu>
+      <CSSTransition
+        in={isMobileMenuOpen}
+        timeout={500}
+        classNames="mobile-menu"
+        unmountOnExit
+      >
+        <div key="mobile-menu-key" className="mobile-menu">
+          <BodyClass className="has-mobile-menu-open" />
+          <div className="mobile-menu-nav">
+            <Menu stackable pointing secondary onClick={closeMobileMenu}>
+              <NavItems items={items} lang={lang} />
+            </Menu>
           </div>
-        </CSSTransition>
-      </nav>
-    );
-  }
-}
+        </div>
+      </CSSTransition>
+    </nav>
+  );
+};
+
+Navigation.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      token: state.userSession.token,
-      items: state.navigation.items,
-      lang: state.intl.locale,
-    }),
-    { getNavigation },
-  ),
-)(Navigation);
+export default Navigation;