@plone/volto 17.0.0-alpha.9 → 17.0.0

package/src/components/theme/Component/Component.jsx

@@ -1,7 +1,7 @@
 import registry from '@plone/volto/registry';
 
 /**
- * A component that can autommatically look up its implementation from the
+ * A component that can automatically look up its implementation from the
  * registry based on the provided component `componentName`
  */
 const Component = ({ componentName, dependencies, ...rest }) => {

package/src/components/theme/ContactForm/ContactForm.jsx

@@ -1,22 +1,15 @@
-/**
- * Contact Form container.
- * @module components/theme/ContactForm/ContactForm
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useCallback, useEffect } from 'react';
 import { Portal } from 'react-portal';
 import { Container, Message, Icon } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { Link, withRouter } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
-import { Form, Toolbar, Toast } from '@plone/volto/components';
 import { emailNotification } from '@plone/volto/actions';
-import { getBaseUrl } from '@plone/volto/helpers';
+import { useDispatch, useSelector } from 'react-redux';
+import { Form, Toolbar, Toast } from '@plone/volto/components';
+import { getBaseUrl, Helmet, usePrevious } from '@plone/volto/helpers';
+import { useClient } from '@plone/volto/hooks';
 
 const messages = defineMessages({
   send: {
@@ -65,195 +58,118 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ContactForm class.
- * @class ContactForm
- * @extends Component
- */
-export class ContactFormComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    emailNotification: PropTypes.func.isRequired,
-    error: PropTypes.shape({
-      message: PropTypes.string,
-    }),
-    loading: PropTypes.bool,
-    loaded: PropTypes.bool,
-    pathname: PropTypes.string.isRequired,
-  };
+const useEmailNotification = () => {
+  const loading = useSelector((state) => state.emailNotification.loading);
+  const loaded = useSelector((state) => state.emailNotification.loaded);
+  const error = useSelector((state) => state.emailNotification.error);
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    error: null,
-    loading: null,
-    loaded: null,
-  };
+  return { loading, loaded, error };
+};
+
+const ContactFormComponent = () => {
+  const history = useHistory();
+  const { pathname } = useLocation();
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const isClient = useClient();
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onCancel = this.onCancel.bind(this);
-    this.state = { isClient: false };
-  }
+  const { loaded, loading, error } = useEmailNotification();
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.loading && nextProps.loaded) {
+  const prevloading = usePrevious(loading);
+
+  useEffect(() => {
+    if (prevloading && loaded) {
       toast.success(
         <Toast
           success
-          title={this.props.intl.formatMessage(messages.success)}
-          content={this.props.intl.formatMessage(messages.messageSent)}
+          title={intl.formatMessage(messages.success)}
+          content={intl.formatMessage(messages.messageSent)}
         />,
       );
     }
-  }
+  }, [intl, loaded, prevloading]);
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.setState({ isClient: true });
-  }
+  const onSubmit = (data) => {
+    const { from, message, name, subject } = data;
+    dispatch(emailNotification(from, message, name, subject));
+  };
 
-  /**
-   * On submit handler
-   * @method onSubmit
-   * @param {Object} data Data object.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.emailNotification(
-      data.from,
-      data.message,
-      data.name,
-      data.subject,
-    );
-  }
+  const onCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.goBack();
-  }
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div id="contact-form">
-        <Container id="view">
-          <Helmet title={this.props.intl.formatMessage(messages.contactForm)} />
-          {this.props.error && (
-            <Message
-              icon="warning"
-              negative
-              attached
-              header={this.props.intl.formatMessage(messages.error)}
-              content={this.props.error.message}
-            />
-          )}
-          <Form
-            onSubmit={this.onSubmit}
-            onCancel={this.onCancel}
-            formData={{ blocksLayoutFieldname: {} }}
-            submitLabel={this.props.intl.formatMessage(messages.send)}
-            resetAfterSubmit
-            title={this.props.intl.formatMessage(messages.contactForm)}
-            loading={this.props.loading}
-            schema={{
-              fieldsets: [
-                {
-                  fields: ['name', 'from', 'subject', 'message'],
-                  id: 'default',
-                  title: this.props.intl.formatMessage(messages.default),
-                },
-              ],
-              properties: {
-                name: {
-                  title: this.props.intl.formatMessage(messages.name),
-                  type: 'string',
-                },
-                from: {
-                  title: this.props.intl.formatMessage(messages.from),
-                  type: 'email',
-                },
-                subject: {
-                  title: this.props.intl.formatMessage(messages.subject),
-                  type: 'string',
-                },
-                message: {
-                  title: this.props.intl.formatMessage(messages.message),
-                  type: 'string',
-                  widget: 'textarea',
-                },
-              },
-              required: ['from', 'message'],
-            }}
+  return (
+    <div id="contact-form">
+      <Container id="view">
+        <Helmet title={intl.formatMessage(messages.contactForm)} />
+        {error && (
+          <Message
+            icon="warning"
+            negative
+            attached
+            header={intl.formatMessage(messages.error)}
+            content={error.message}
           />
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
-              <Toolbar
-                pathname={this.props.pathname}
-                hideDefaultViewButtons
-                inner={
-                  <Link
-                    to={`${getBaseUrl(this.props.pathname)}`}
-                    className="item"
-                  >
-                    <Icon
-                      name="arrow left"
-                      size="big"
-                      color="blue"
-                      title={this.props.intl.formatMessage(messages.back)}
-                    />
-                  </Link>
-                }
-              />
-            </Portal>
-          )}
-        </Container>
-      </div>
-    );
-  }
-}
+        )}
+        <Form
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          formData={{ blocksLayoutFieldname: {} }}
+          submitLabel={intl.formatMessage(messages.send)}
+          resetAfterSubmit
+          title={intl.formatMessage(messages.contactForm)}
+          loading={loading}
+          schema={{
+            fieldsets: [
+              {
+                fields: ['name', 'from', 'subject', 'message'],
+                id: 'default',
+                title: intl.formatMessage(messages.default),
+              },
+            ],
+            properties: {
+              name: {
+                title: intl.formatMessage(messages.name),
+                type: 'string',
+              },
+              from: {
+                title: intl.formatMessage(messages.from),
+                type: 'email',
+              },
+              subject: {
+                title: intl.formatMessage(messages.subject),
+                type: 'string',
+              },
+              message: {
+                title: intl.formatMessage(messages.message),
+                type: 'string',
+                widget: 'textarea',
+              },
+            },
+            required: ['from', 'message'],
+          }}
+        />
+        {isClient && (
+          <Portal node={document.getElementById('toolbar')}>
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={
+                <Link to={`${getBaseUrl(pathname)}`} className="item">
+                  <Icon
+                    name="arrow left"
+                    size="big"
+                    color="blue"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+              }
+            />
+          </Portal>
+        )}
+      </Container>
+    </div>
+  );
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      loading: state.emailNotification.loading,
-      loaded: state.emailNotification.loaded,
-      error: state.emailNotification.error,
-      pathname: props.location.pathname,
-    }),
-    { emailNotification },
-  ),
-)(ContactFormComponent);
+export default ContactFormComponent;

package/src/components/theme/ContactForm/ContactForm.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ContactFormComponent } from './ContactForm';
+import ContactFormComponent from './ContactForm';
 import { injectIntl } from 'react-intl';
 import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
 

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

@@ -10,7 +10,6 @@ jest.mock('react-portal', () => ({
 }));
 
 const mockStore = configureStore();
-
 describe('Contact form', () => {
   it('renders a contact form', () => {
     const store = mockStore({
@@ -29,7 +28,7 @@ describe('Contact form', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <ContactForm location={{ pathname: '/blog' }} />
+          <ContactForm />
         </MemoryRouter>
       </Provider>,
     );
@@ -56,7 +55,7 @@ describe('Contact form', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <ContactForm location={{ pathname: '/' }} />
+          <ContactForm />
         </MemoryRouter>
       </Provider>,
     );

package/src/components/theme/ContentMetadataTags/ContentMetadataTags.jsx

@@ -1,6 +1,13 @@
-import React from 'react';
-import { toPublicURL, Helmet } from '@plone/volto/helpers';
+import React, { useEffect } from 'react';
+import {
+  toPublicURL,
+  Helmet,
+  hasApiExpander,
+  getBaseUrl,
+} from '@plone/volto/helpers';
+import { getNavroot } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
+import { useDispatch, useSelector } from 'react-redux';
 
 const ContentMetadataTags = (props) => {
   const {
@@ -14,6 +21,17 @@ const ContentMetadataTags = (props) => {
     description,
   } = props.content;
 
+  const dispatch = useDispatch();
+  const pathname = useSelector((state) => state.router.location.pathname);
+  const navroot = useSelector((state) => state.navroot?.data?.navroot);
+  const site = useSelector((state) => state.site?.data);
+
+  useEffect(() => {
+    if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) {
+      dispatch(getNavroot(getBaseUrl(pathname)));
+    }
+  }, [dispatch, pathname]);
+
   const getContentImageInfo = () => {
     const { contentMetadataTagsImageField } = config.settings;
     const image = props.content[contentMetadataTagsImageField];
@@ -45,10 +63,30 @@ const ContentMetadataTags = (props) => {
 
   const contentImageInfo = getContentImageInfo();
 
+  const getTitle = () => {
+    const includeSiteTitle =
+      config?.settings?.siteTitleFormat?.includeSiteTitle || false;
+    const titleAndSiteTitleSeparator =
+      config?.settings?.titleAndSiteTitleSeparator || '-';
+    const navRootTitle = navroot?.title;
+    const siteRootTitle = site?.['plone.site_title'];
+    const titlePart = navRootTitle || siteRootTitle;
+
+    if (includeSiteTitle && titlePart && titlePart !== title) {
+      return seo_title || `${title} ${titleAndSiteTitleSeparator} ${titlePart}`;
+    } else {
+      return seo_title || title;
+    }
+  };
+
   return (
     <>
       <Helmet>
-        <title>{(seo_title || title)?.replace(/\u00AD/g, '')}</title>
+        <title>{getTitle()?.replace(/\u00AD/g, '')}</title>
+        <link
+          rel="canonical"
+          href={seo_canonical_url || toPublicURL(props.content['@id'])}
+        />
         <meta name="description" content={seo_description || description} />
         <meta
           property="og:title"

package/src/components/theme/Error/ServerError.jsx

@@ -0,0 +1,29 @@
+/**
+ * @module components/theme/Error/ServerError
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Container } from 'semantic-ui-react';
+import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+
+/**
+ * server error
+ * @function ServerError
+ * @returns {string} Markup of the server error page.
+ */
+const ServerError = () => (
+  <Container className="view-wrapper">
+    <h1>
+      <FormattedMessage id="Server Error" defaultMessage="Server Error" />
+    </h1>
+    <p className="description">
+      <FormattedMessage
+        id="We apologize for the inconvenience, but there was an unexpected error on the server."
+        defaultMessage="We apologize for the inconvenience, but there was an unexpected error on the server."
+      />
+    </p>
+  </Container>
+);
+
+export default withServerErrorCode(500)(ServerError);

package/src/components/theme/Header/Header.jsx

@@ -1,12 +1,6 @@
-/**
- * Header component.
- * @module components/theme/Header/Header
- */
-
-import React, { Component } from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector, shallowEqual } from 'react-redux';
 
 import {
   Anontools,
@@ -16,65 +10,45 @@ import {
   SearchWidget,
 } from '@plone/volto/components';
 
-/**
- * Header component class.
- * @class Header
- * @extends Component
- */
-class Header extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    token: PropTypes.string,
-    pathname: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    token: null,
-  };
+const Header = ({ pathname }) => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment basic className="header-wrapper" role="banner">
-        <Container>
-          <div className="header">
-            <div className="logo-nav-wrapper">
-              <div className="logo">
-                <Logo />
-              </div>
-              <Navigation pathname={this.props.pathname} />
+  return (
+    <Segment basic className="header-wrapper" role="banner">
+      <Container>
+        <div className="header">
+          <div className="logo-nav-wrapper">
+            <div className="logo">
+              <Logo />
             </div>
-            <div className="tools-search-wrapper">
-              <LanguageSelector />
-              {!this.props.token && (
-                <div className="tools">
-                  <Anontools />
-                </div>
-              )}
-              <div className="search">
-                <SearchWidget />
+            <Navigation pathname={pathname} />
+          </div>
+          <div className="tools-search-wrapper">
+            <LanguageSelector />
+            {!token && (
+              <div className="tools">
+                <Anontools />
               </div>
+            )}
+            <div className="search">
+              <SearchWidget />
             </div>
           </div>
-        </Container>
-      </Segment>
-    );
-  }
-}
+        </div>
+      </Container>
+    </Segment>
+  );
+};
+
+export default Header;
+
+Header.propTypes = {
+  token: PropTypes.string,
+  pathname: PropTypes.string.isRequired,
+  content: PropTypes.objectOf(PropTypes.any),
+};
 
-export default connect((state) => ({
-  token: state.userSession.token,
-}))(Header);
+Header.defaultProps = {
+  token: null,
+  content: null,
+};

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

@@ -39,4 +39,22 @@ describe('Header', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('renders a header component - auth', () => {
+    const store = mockStore({
+      userSession: { token: '1234567890' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <Header pathname="/blog" />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });