@plone/volto 17.0.0-alpha.17 → 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/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/LinkView.jsx

@@ -1,95 +1,67 @@
-/**
- * Link View.
- * @module components/theme/View/LinkView
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
-/**
- * View container class.
- * @class View
- * @extends Component
- */
-class LinkView extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    content: PropTypes.shape({
-      title: PropTypes.string,
-      description: PropTypes.string,
-      remoteUrl: PropTypes.string,
-    }),
-    token: PropTypes.string,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    content: null,
-    token: null,
-  };
-
-  componentDidMount() {
-    if (!this.props.token) {
-      const { remoteUrl } = this.props.content;
+const LinkView = ({ token, content }) => {
+  const history = useHistory();
+  useEffect(() => {
+    if (!token) {
+      const { remoteUrl } = content;
       if (isInternalURL(remoteUrl)) {
-        this.props.history.replace(flattenToAppURL(remoteUrl));
+        history.replace(flattenToAppURL(remoteUrl));
       } else if (!__SERVER__) {
         window.location.href = flattenToAppURL(remoteUrl);
       }
     }
-  }
+  }, [content, history, token]);
+  const { title, description, remoteUrl } = content;
+  const { openExternalLinkInNewTab } = config.settings;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-document">
+      <h1 className="documentFirstHeading">{title}</h1>
+      {content.description && (
+        <p className="documentDescription">{description}</p>
+      )}
+      {remoteUrl && (
+        <p>
+          <FormattedMessage
+            id="The link address is:"
+            defaultMessage="The link address is:"
+          />{' '}
+          <UniversalLink
+            href={remoteUrl}
+            openLinkInNewTab={
+              openExternalLinkInNewTab && !isInternalURL(remoteUrl)
+            }
+          >
+            {flattenToAppURL(remoteUrl)}
+          </UniversalLink>
+        </p>
+      )}
+    </Container>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { remoteUrl } = this.props.content;
-    const { openExternalLinkInNewTab } = config.settings;
-    const Container =
-      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+LinkView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    remoteUrl: PropTypes.string,
+  }),
+  token: PropTypes.string,
+};
 
-    return (
-      <Container id="page-document">
-        <h1 className="documentFirstHeading">{this.props.content.title}</h1>
-        {this.props.content.description && (
-          <p className="documentDescription">
-            {this.props.content.description}
-          </p>
-        )}
-        {remoteUrl && (
-          <p>
-            <FormattedMessage
-              id="The link address is:"
-              defaultMessage="The link address is:"
-            />{' '}
-            <UniversalLink
-              href={remoteUrl}
-              openLinkInNewTab={
-                openExternalLinkInNewTab && !isInternalURL(remoteUrl)
-              }
-            >
-              {flattenToAppURL(remoteUrl)}
-            </UniversalLink>
-          </p>
-        )}
-      </Container>
-    );
-  }
-}
+LinkView.defaultProps = {
+  content: null,
+  token: null,
+};
 
 export default LinkView;

package/src/hooks/client/useClient.js

@@ -0,0 +1,11 @@
+//useClient hook to replace repetitive delcaration in the components
+import { useEffect, useState } from 'react';
+
+export function useClient() {
+  const [isClient, setisClient] = useState(false);
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  return isClient;
+}

package/src/hooks/index.js

@@ -1 +1,2 @@
 export useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
+export { useClient } from '@plone/volto/hooks/client/useClient';