@plone/volto 17.0.0-alpha.16 → 17.0.0-alpha.18

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/Header/Header.jsx

@@ -1,6 +1,6 @@
 import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { useToken } from '@plone/volto/hooks/userSession/useToken';
+import { useSelector, shallowEqual } from 'react-redux';
 
 import {
   Anontools,
@@ -11,7 +11,7 @@ import {
 } from '@plone/volto/components';
 
 const Header = ({ pathname }) => {
-  const token = useToken();
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
 
   return (
     <Segment basic className="header-wrapper" role="banner">

package/src/components/theme/Login/Login.jsx

@@ -239,7 +239,7 @@ class Login extends Component {
                         <Input
                           type="password"
                           id="password"
-                          autocomplete="current-password"
+                          autoComplete="current-password"
                           name="password"
                           placeholder={this.props.intl.formatMessage(
                             messages.password,

package/src/components/theme/SearchWidget/SearchWidget.jsx

@@ -1,14 +1,7 @@
-/**
- * Search widget component.
- * @module components/theme/SearchWidget/SearchWidget
- */
-
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { Form, Input } from 'semantic-ui-react';
-import { compose } from 'redux';
-import { PropTypes } from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon } from '@plone/volto/components';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
@@ -24,96 +17,43 @@ const messages = defineMessages({
   },
 });
 
-/**
- * SearchWidget component class.
- * @class SearchWidget
- * @extends Component
- */
-class SearchWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    pathname: PropTypes.string,
+const SearchWidget = (props) => {
+  const intl = useIntl();
+  const [text, setText] = useState('');
+  const history = useHistory();
+  const onChangeText = (event, { value }) => {
+    setText(value);
   };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      text: '',
-    };
-  }
-
-  /**
-   * On change text
-   * @method onChangeText
-   * @param {object} event Event object.
-   * @param {string} value Text value.
-   * @returns {undefined}
-   */
-  onChangeText(event, { value }) {
-    this.setState({
-      text: value,
-    });
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {event} event Event object.
-   * @returns {undefined}
-   */
-  onSubmit(event) {
+  const pathname = props.pathname;
+  const onSubmit = (event) => {
     const path =
-      this.props.pathname?.length > 0
-        ? `&path=${encodeURIComponent(this.props.pathname)}`
-        : '';
-    this.props.history.push(
-      `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-    );
+      pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : '';
+
+    history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`);
     // reset input value
-    this.setState({
-      text: '',
-    });
+    setText('');
     event.preventDefault();
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Form action="/search" onSubmit={this.onSubmit}>
-        <Form.Field className="searchbox">
-          <Input
-            aria-label={this.props.intl.formatMessage(messages.search)}
-            onChange={this.onChangeText}
-            name="SearchableText"
-            value={this.state.text}
-            transparent
-            autoComplete="off"
-            placeholder={this.props.intl.formatMessage(messages.searchSite)}
-            title={this.props.intl.formatMessage(messages.search)}
-          />
-          <button aria-label={this.props.intl.formatMessage(messages.search)}>
-            <Icon name={zoomSVG} size="18px" />
-          </button>
-        </Form.Field>
-      </Form>
-    );
-  }
-}
+  };
 
-export default compose(withRouter, injectIntl)(SearchWidget);
+  return (
+    <Form action="/search" onSubmit={onSubmit}>
+      <Form.Field className="searchbox">
+        <Input
+          aria-label={intl.formatMessage(messages.search)}
+          onChange={onChangeText}
+          name="SearchableText"
+          value={text}
+          transparent
+          autoComplete="off"
+          placeholder={intl.formatMessage(messages.searchSite)}
+          title={intl.formatMessage(messages.search)}
+        />
+        <button aria-label={intl.formatMessage(messages.search)}>
+          <Icon name={zoomSVG} size="18px" />
+        </button>
+      </Form.Field>
+    </Form>
+  );
+};
+
+export default SearchWidget;

package/src/components/theme/View/AlbumView.jsx

@@ -5,9 +5,14 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Container, GridColumn, Segment } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  GridColumn,
+  Segment,
+} from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
 import { Icon, UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -56,6 +61,9 @@ class AlbumView extends Component {
 
   render() {
     const { content } = this.props;
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container className="view-wrapper">
         <article id="content">

package/src/components/theme/View/EventView.jsx

@@ -9,6 +9,8 @@ import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
 import { Image, Grid } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { EventDetails } from '@plone/volto/components';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
 
 const EventTextfieldView = ({ content }) => (
   <React.Fragment>
@@ -41,9 +43,11 @@ const EventTextfieldView = ({ content }) => (
  */
 const EventView = (props) => {
   const { content } = props;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
   return (
-    <div id="page-document" className="ui container view-wrapper event-view">
+    <Container id="page-document" className="view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (
@@ -83,7 +87,7 @@ const EventView = (props) => {
           )}
         </Grid.Column>
       </Grid>
-    </div>
+    </Container>
   );
 };
 

package/src/components/theme/View/FileView.jsx

@@ -5,9 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'semantic-ui-react';
-
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 /**
  * File view component class.
@@ -15,22 +15,27 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const FileView = ({ content }) => (
-  <Container className="view-wrapper">
-    <h1 className="documentFirstHeading">
-      {content.title}
-      {content.subtitle && ` - ${content.subtitle}`}
-    </h1>
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.file?.download && (
-      <a href={flattenToAppURL(content.file.download)}>
-        {content.file.filename}
-      </a>
-    )}
-  </Container>
-);
+const FileView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <a href={flattenToAppURL(content.file.download)}>
+          {content.file.filename}
+        </a>
+      )}
+    </Container>
+  );
+};
 
 /**
  * Property types.