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

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

@@ -1,17 +1,10 @@
-/**
- * RequestPasswordReset component.
- * @module components/theme/RequestPasswordReset/RequestPasswordReset
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router-dom';
-import { Helmet } from '@plone/volto/helpers';
+import { useState, useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
+import { Helmet, usePrevious } from '@plone/volto/helpers';
 import { Form } from '@plone/volto/components';
 import { resetPassword } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
@@ -32,7 +25,7 @@ const messages = defineMessages({
   },
   usernameTitle: {
     id: 'label_my_username_is',
-    defaultMessage: 'My username is',
+    defaultMessage: 'My user name is',
   },
   emailTitle: {
     id: 'label_my_email_is',
@@ -56,178 +49,110 @@ const messages = defineMessages({
   },
 });
 
-/**
- * RequestPasswordReset class.
- * @class RequestPasswordReset
- * @extends Component
- */
-class RequestPasswordReset extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    loading: PropTypes.bool.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    error: PropTypes.string,
-    resetPassword: PropTypes.func.isRequired,
-  };
+const useUsers = () => {
+  const loading = useSelector((state) => state.users.reset.loading);
+  const loaded = useSelector((state) => state.users.reset.loaded);
+  const error = useSelector((state) => state.users.reset.error);
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    error: null,
-  };
+  return { loading, loaded, error };
+};
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Controlpanel
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.identifierField = config.settings.useEmailAsLogin
-      ? 'email'
-      : 'username';
+const RequestPasswordReset = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [error, setError] = useState(null);
+  const [isSuccessful, setisSuccessful] = useState(false);
+  const history = useHistory();
+  const identifierTitle = useRef();
+  const identifierRequiredMessage = useRef();
+  const { loaded, loading, error: props_error } = useUsers();
+  const prevloading = usePrevious(loading);
 
-    if (this.identifierField === 'email') {
-      this.identifierTitle = this.props.intl.formatMessage(messages.emailTitle);
-      this.identifierRequiredMessage = this.props.intl.formatMessage(
-        messages.emailRequired,
-      );
-    } else {
-      this.identifierTitle = this.props.intl.formatMessage(
-        messages.usernameTitle,
-      );
-      this.identifierRequiredMessage = this.props.intl.formatMessage(
-        messages.usernameRequired,
-      );
-    }
+  const identifierField = config.settings.useEmailAsLogin
+    ? 'email'
+    : 'username';
 
-    this.state = {
-      error: null,
-      isSuccessful: false,
-    };
+  if (identifierField === 'email') {
+    identifierTitle.current = intl.formatMessage(messages.emailTitle);
+    identifierRequiredMessage.current = intl.formatMessage(
+      messages.emailRequired,
+    );
+  } else {
+    identifierTitle.current = intl.formatMessage(messages.usernameTitle);
+    identifierRequiredMessage.current = intl.formatMessage(
+      messages.usernameRequired,
+    );
   }
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.loading && nextProps.loaded) {
-      this.setState({ isSuccessful: true });
-    }
-  }
+  useEffect(() => {
+    if (prevloading && loaded) setisSuccessful(true);
+  }, [prevloading, loaded]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @param {object} event Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    if (data[this.identifierField]) {
-      this.props.resetPassword(data[this.identifierField]);
-      this.setState({
-        error: null,
-      });
+  const onSubmit = (data) => {
+    if (data[identifierField]) {
+      dispatch(resetPassword(data[identifierField]));
+      setError(null);
     } else {
-      this.setState({
-        error: {
-          message: this.identifierRequiredMessage,
-        },
+      setError({
+        message: identifierRequiredMessage.current,
       });
     }
-  }
-
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.goBack();
-  }
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.state.isSuccessful) {
-      return (
-        <Container>
-          <h1 className="documentFirstHeading">
-            <FormattedMessage
-              id="heading_sent_password"
-              defaultMessage="Password reset confirmation sent"
-            />
-          </h1>
-          <p className="description">
-            <FormattedMessage
-              id="description_sent_password"
-              defaultMessage="Your password reset request has been mailed. It should arrive in your mailbox shortly. When you receive the message, visit the address it contains to reset your password."
-            />
-          </p>
-        </Container>
-      );
-    }
+  const onCancel = () => {
+    history.goBack();
+  };
 
+  if (isSuccessful) {
     return (
-      <div id="page-password-reset">
-        <Helmet title={this.props.intl.formatMessage(messages.passwordReset)} />
-        <Container>
-          <Form
-            title={this.props.intl.formatMessage(messages.title)}
-            description={this.props.intl.formatMessage(messages.description)}
-            onSubmit={this.onSubmit}
-            onCancel={this.onCancel}
-            error={this.state.error || this.props.error}
-            schema={{
-              fieldsets: [
-                {
-                  id: 'default',
-                  title: this.props.intl.formatMessage(messages.default),
-                  fields: [this.identifierField],
-                },
-              ],
-              properties: {
-                [this.identifierField]: {
-                  type: 'string',
-                  title: this.identifierTitle,
-                },
-              },
-              submitLabel: this.props.intl.formatMessage(messages.sendEmail),
-              required: [this.identifierField],
-            }}
+      <Container>
+        <h1 className="documentFirstHeading">
+          <FormattedMessage
+            id="heading_sent_password"
+            defaultMessage="Password reset confirmation sent"
+          />
+        </h1>
+        <p className="description">
+          <FormattedMessage
+            id="description_sent_password"
+            defaultMessage="Your password reset request has been mailed. It should arrive in your mailbox shortly. When you receive the message, visit the address it contains to reset your password."
           />
-        </Container>
-      </div>
+        </p>
+      </Container>
     );
   }
-}
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state) => ({
-      loading: state.users.reset.loading,
-      loaded: state.users.reset.loaded,
-      error: state.users.reset.error,
-    }),
-    { resetPassword },
-  ),
-)(RequestPasswordReset);
+  return (
+    <div id="page-password-reset">
+      <Helmet title={intl.formatMessage(messages.passwordReset)} />
+      <Container>
+        <Form
+          title={intl.formatMessage(messages.title)}
+          description={intl.formatMessage(messages.description)}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          error={error || props_error}
+          schema={{
+            fieldsets: [
+              {
+                id: 'default',
+                title: intl.formatMessage(messages.default),
+                fields: [identifierField],
+              },
+            ],
+            properties: {
+              [identifierField]: {
+                type: 'string',
+                title: identifierTitle.current,
+              },
+            },
+            submitLabel: intl.formatMessage(messages.sendEmail),
+            required: [identifierField],
+          }}
+        />
+      </Container>
+    </div>
+  );
+};
+
+export default RequestPasswordReset;

package/src/components/theme/PreviewImage/PreviewImage.jsx

@@ -1,34 +1,50 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
-import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 
 /**
  * Renders a preview image for a catalog brain result item.
- *
  */
-function PreviewImage(props) {
-  const { item, size = 'preview', alt, ...rest } = props;
-  const src = item.image_field
-    ? flattenToAppURL(`${item['@id']}/@@images/${item.image_field}/${size}`)
-    : config.getComponent({
-        name: 'DefaultImage',
-        dependencies: ['listing', 'summary'],
-      }).component || DefaultImageSVG;
-
-  return <img src={src} alt={alt ?? item.title} {...rest} />;
+function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  const image = (
+    <Image item={item} image_field={image_field} alt={alt} {...rest} />
+  );
+
+  if (!image && !showDefault) return null;
+
+  if (image) {
+    return image;
+  } else {
+    return (
+      <img
+        src={
+          config.getComponent({
+            name: 'DefaultImage',
+            dependencies: ['listing', 'summary'],
+          }).component || DefaultImageSVG
+        }
+        alt={alt}
+        {...rest}
+        width="400"
+        height="300"
+      />
+    );
+  }
 }
 
 PreviewImage.propTypes = {
-  size: PropTypes.string,
   item: PropTypes.shape({
     '@id': PropTypes.string.isRequired,
-    image_field: PropTypes.string,
     title: PropTypes.string.isRequired,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
+    showDefault: PropTypes.bool,
   }),
+  alt: PropTypes.string.isRequired,
 };
 
 export default PreviewImage;

package/src/components/theme/PreviewImage/PreviewImage.test.js

@@ -7,10 +7,28 @@ describe('PreviewImage', () => {
   it('renders a preview image', () => {
     const item = {
       image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/image',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download: '@@images/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
+          },
+        ],
+      },
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
-    const component = renderer.create(<PreviewImage item={item} />);
+    const component = renderer.create(
+      <PreviewImage item={item} alt={item.title} />,
+    );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
@@ -18,70 +36,92 @@ describe('PreviewImage', () => {
   it('renders a preview image with extra props', () => {
     const item = {
       image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/image',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download: '@@images/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
+          },
+        ],
+      },
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" />,
+      <PreviewImage item={item} alt={item.title} className="extra" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a preview image with custom size', () => {
+  it('renders a fallback image', () => {
     const item = {
-      image_field: 'image',
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} size="large" />,
+      <PreviewImage item={item} alt={item.title} />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a fallback image', () => {
+  it('renders a fallback image with extra props', () => {
     const item = {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
-    const component = renderer.create(<PreviewImage item={item} />);
+    const component = renderer.create(
+      <PreviewImage item={item} alt={item.title} className="extra" />,
+    );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a fallback image with extra props', () => {
+  it('renders a fallback image with alt prop empty', () => {
     const item = {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" />,
+      <PreviewImage item={item} className="extra" alt="" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a fallback image with alt prop empty', () => {
+  it('renders a fallback image with alt prop', () => {
     const item = {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" alt="" />,
+      <PreviewImage item={item} className="extra" alt="Alt prop" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a fallback image with alt prop', () => {
+  it('not renders a fallback image if showDefault prop is false', () => {
     const item = {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" alt="Alt prop" />,
+      <PreviewImage
+        item={item}
+        className="extra"
+        showDefault={false}
+        alt={item.title}
+      />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

package/src/components/theme/Register/Register.jsx

@@ -37,8 +37,7 @@ const messages = defineMessages({
     defaultMessage: 'E-mail',
   },
   emailDescription: {
-    id:
-      'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
+    id: 'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
     defaultMessage:
       'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
   },
@@ -47,8 +46,7 @@ const messages = defineMessages({
     defaultMessage: 'Account Registration Completed',
   },
   successRegisterCompletedBody: {
-    id:
-      'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
+    id: 'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
     defaultMessage:
       'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
   },

package/src/components/theme/Search/SearchTags.jsx

@@ -1,71 +1,41 @@
-/**
- * Search tags components.
- * @module components/theme/Search/SearchTags
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { getVocabulary } from '@plone/volto/actions';
 
 const vocabulary = 'plone.app.vocabularies.Keywords';
 
-/**
- * Search tags container class.
- * @class SearchTags
- * @extends Component
- */
-class SearchTags extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getVocabulary: PropTypes.func.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        label: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  componentDidMount() {
-    this.props.getVocabulary({ vocabNameOrURL: vocabulary });
-  }
+const SearchTags = () => {
+  const dispatch = useDispatch();
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return this.props.items && this.props.items.length > 0 ? (
-      <div>
-        {this.props.items.map((item) => (
-          <Link
-            className="ui label"
-            to={`/search?Subject=${item.label}`}
-            key={item.label}
-          >
-            {item.label}
-          </Link>
-        ))}
-      </div>
-    ) : (
-      <span />
-    );
-  }
-}
+  useEffect(() => {
+    dispatch(getVocabulary({ vocabNameOrURL: vocabulary }));
+  }, [dispatch]);
 
-export default connect(
-  (state) => ({
-    items:
+  const items = useSelector(
+    (state) =>
       state.vocabularies[vocabulary] && state.vocabularies[vocabulary].items
         ? state.vocabularies[vocabulary].items
         : [],
-  }),
-  { getVocabulary },
-)(SearchTags);
+    shallowEqual,
+  );
+
+  return items && items.length > 0 ? (
+    <div>
+      {items.map((item) => (
+        <Link
+          className="ui label"
+          to={`/search?Subject=${item.label}`}
+          key={item.label}
+        >
+          {item.label}
+        </Link>
+      ))}
+    </div>
+  ) : (
+    <span />
+  );
+};
+
+export default SearchTags;