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

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;

package/src/components/theme/NotFound/NotFound.jsx

@@ -1,53 +1,67 @@
-/**
- * Home container.
- * @module components/theme/NotFound/NotFound
- */
-
-import React from 'react';
+import { useEffect } from 'react';
+import { BodyClass, toBackendLang } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { getNavigation } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
 
 /**
  * Not found function.
  * @function NotFound
  * @returns {string} Markup of the not found page.
  */
-const NotFound = () => (
-  <Container className="view-wrapper">
-    <h1>
-      <FormattedMessage
-        id="This page does not seem to exist…"
-        defaultMessage="This page does not seem to exist…"
-      />
-    </h1>
-    <p className="description">
-      <FormattedMessage
-        id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-        defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-      />
-    </p>
-    <p>
-      <FormattedMessage
-        id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        values={{
-          site_admin: (
-            <Link to="/contact-form">
-              <FormattedMessage
-                id="Site Administration"
-                defaultMessage="Site Administration"
-              />
-            </Link>
-          ),
-        }}
-      />
-    </p>
-    <p>
-      <FormattedMessage id="Thank you." defaultMessage="Thank you." />
-    </p>
-  </Container>
-);
+const NotFound = () => {
+  const dispatch = useDispatch();
+  const lang = useSelector((state) => state.intl.locale);
+
+  useEffect(() => {
+    dispatch(
+      getNavigation(
+        config.settings.isMultilingual ? `/${toBackendLang(lang)}` : '/',
+        config.settings.navDepth,
+      ),
+    );
+  }, [dispatch, lang]);
+
+  return (
+    <Container className="view-wrapper">
+      <BodyClass className="page-not-found" />
+      <h1>
+        <FormattedMessage
+          id="This page does not seem to exist…"
+          defaultMessage="This page does not seem to exist…"
+        />
+      </h1>
+      <p className="description">
+        <FormattedMessage
+          id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+          defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          values={{
+            site_admin: (
+              <Link to="/contact-form">
+                <FormattedMessage
+                  id="Site Administration"
+                  defaultMessage="Site Administration"
+                />
+              </Link>
+            ),
+          }}
+        />
+      </p>
+      <p>
+        <FormattedMessage id="Thank you." defaultMessage="Thank you." />
+      </p>
+    </Container>
+  );
+};
 
 export default withServerErrorCode(404)(NotFound);

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -31,7 +31,7 @@ const messages = defineMessages({
   },
   usernameTitle: {
     id: 'My username is',
-    defaultMessage: 'My username is',
+    defaultMessage: 'My user name is',
   },
   emailTitle: {
     id: 'My email is',
@@ -50,8 +50,8 @@ const messages = defineMessages({
     defaultMessage: 'New password',
   },
   passwordDescription: {
-    id: 'Enter your new password. Minimum 5 characters.',
-    defaultMessage: 'Enter your new password. Minimum 5 characters.',
+    id: 'Enter your new password. Minimum 8 characters.',
+    defaultMessage: 'Enter your new password. Minimum 8 characters.',
   },
   passwordRepeatTitle: {
     id: 'Confirm password',
@@ -79,8 +79,7 @@ const messages = defineMessages({
     defaultMessage: 'Account activation completed',
   },
   successRedirectToLoginBody: {
-    id:
-      'Your password has been set successfully. You may now {link} with your new password.',
+    id: 'Your password has been set successfully. You may now {link} with your new password.',
     defaultMessage:
       'Your password has been set successfully. You may now {link} with your new password.',
   },
@@ -227,6 +226,9 @@ class PasswordReset extends Component {
       );
     }
     if (this.props.token) {
+      const errmsg = this.props.error
+        ? this.props.error.response.body.error
+        : null;
       return (
         <div id="page-password-reset">
           <Helmet
@@ -238,7 +240,7 @@ class PasswordReset extends Component {
               description={this.props.intl.formatMessage(messages.description)}
               onSubmit={this.onSubmit}
               onCancel={this.onCancel}
-              error={this.state.error || this.props.error}
+              error={this.state.error || errmsg}
               schema={{
                 fieldsets: [
                   {