@plone/volto 17.0.0-alpha.17 → 17.0.0-alpha.19

package/src/components/theme/Comments/CommentEditModal.jsx

@@ -1,14 +1,9 @@
-/**
- * Comment edit modal.
- * @module components/theme/Comments/CommentEditModal
- */
-
-import React, { Component } from 'react';
+import { useEffect } 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 { usePrevious } from '@plone/volto/helpers';
 import { updateComment } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
 
@@ -27,116 +22,69 @@ const messages = defineMessages({
   },
 });
 
-/**
- * CommentEditModal class.
- * @class CommentEditModal
- * @extends Component
- */
-class CommentEditModal extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateComment: PropTypes.func.isRequired,
-    id: PropTypes.string,
-    text: PropTypes.string,
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    open: PropTypes.bool.isRequired,
-    onOk: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    id: '',
-    text: '',
-  };
+const CommentEditModal = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { onOk, open, onCancel } = props;
+  const request = useSelector((state) => state.comments.update, shallowEqual);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs CommentEditModal
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
+  const prevRequestLoading = usePrevious(request.loading);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.request.loading && nextProps.request.loaded) {
-      this.props.onOk();
+  useEffect(() => {
+    if (prevRequestLoading && request.loaded) {
+      onOk();
     }
-  }
+  }, [onOk, prevRequestLoading, request.loaded]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {Object} data Form data
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.updateComment(this.props.id, data.text);
-  }
+  const onSubmit = (data) => {
+    dispatch(updateComment(props.id, data.text));
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      this.props.open && (
-        <ModalForm
-          open={this.props.open}
-          onSubmit={this.onSubmit}
-          onCancel={this.props.onCancel}
-          formData={{ text: this.props.text }}
-          title={this.props.intl.formatMessage(messages.editComment)}
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['text'],
-              },
-            ],
-            properties: {
-              text: {
-                title: this.props.intl.formatMessage(messages.comment),
-                type: 'string',
-                description: '',
-              },
+  return (
+    props.open && (
+      <ModalForm
+        open={open}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        formData={{ text: props.text }}
+        title={intl.formatMessage(messages.editComment)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['text'],
+            },
+          ],
+          properties: {
+            text: {
+              title: intl.formatMessage(messages.comment),
+              type: 'string',
+              description: '',
             },
-            required: ['text'],
-          }}
-        />
-      )
-    );
-  }
-}
+          },
+          required: ['text'],
+        }}
+      />
+    )
+  );
+};
+
+CommentEditModal.propTypes = {
+  id: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  request: PropTypes.shape({
+    loading: PropTypes.bool,
+    loaded: PropTypes.bool,
+  }),
+  open: PropTypes.bool.isRequired,
+  onOk: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+CommentEditModal.defaultProps = {
+  id: '',
+  text: '',
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.comments.update,
-    }),
-    { updateComment },
-  ),
-)(CommentEditModal);
+export default CommentEditModal;

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,