@plone/volto 17.0.0-alpha.20 → 17.0.0-alpha.22

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';
@@ -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,45 @@
-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;
+function PreviewImage({ item, alt, ...rest }) {
+  const Image = config.getComponent({ name: 'Image' }).component;
 
-  return <img src={src} alt={alt ?? item.title} {...rest} />;
+  if (item.image_field && item.image_scales?.[item.image_field]?.[0]) {
+    return (
+      <Image item={item} imageField={item.image_field} alt={alt} {...rest} />
+    );
+  } 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,
   }),
+  alt: PropTypes.string.isRequired,
 };
 
 export default PreviewImage;

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

@@ -7,35 +7,56 @@ describe('PreviewImage', () => {
   it('renders a preview image', () => {
     const item = {
       image_field: 'image',
-      title: 'Item title',
-      '@id': 'http://localhost:3000/something',
-    };
-    const component = renderer.create(<PreviewImage item={item} />);
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-
-  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} />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a preview image with custom size', () => {
+  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} size="large" />,
+      <PreviewImage item={item} alt={item.title} className="extra" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
@@ -46,7 +67,9 @@ describe('PreviewImage', () => {
       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();
   });
@@ -57,7 +80,7 @@ describe('PreviewImage', () => {
       '@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();

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

@@ -3,7 +3,7 @@
  * @module components/theme/View/AlbumView
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Container as SemanticContainer,
@@ -11,7 +11,7 @@ import {
   Segment,
 } from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
-import { Icon, UniversalLink, PreviewImage } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
 import openSVG from '@plone/volto/icons/open.svg';
@@ -24,7 +24,7 @@ import backSVG from '@plone/volto/icons/back.svg';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-class AlbumView extends Component {
+class AlbumView extends React.Component {
   constructor(props) {
     super(props);
 
@@ -63,6 +63,8 @@ class AlbumView extends Component {
     const { content } = this.props;
     const Container =
       config.getComponent({ name: 'Container' }).component || SemanticContainer;
+    const PreviewImage = config.getComponent({ name: 'PreviewImage' })
+      .component;
 
     return (
       <Container className="view-wrapper">
@@ -88,17 +90,16 @@ class AlbumView extends Component {
                             <Segment className="imageborder">
                               <PreviewImage
                                 item={item}
-                                alt={
-                                  item.image_caption
-                                    ? item.image_caption
-                                    : item.title
-                                }
+                                alt={item.image_caption || item.title}
                                 onClick={() => {
                                   this.setState({
                                     openIndex: index,
                                   });
                                 }}
                                 className="ui middle aligned image"
+                                responsive={true}
+                                loading="lazy"
+                                title={item.title}
                               />
                             </Segment>
                           </Grid.Column>
@@ -141,20 +142,15 @@ class AlbumView extends Component {
                               <Modal.Content image>
                                 <PreviewImage
                                   item={item}
-                                  alt={
-                                    item.image_caption
-                                      ? item.image_caption
-                                      : item.title
-                                  }
+                                  alt={item.image_caption}
                                   onClick={() => {
                                     this.setState({
                                       openIndex: index,
                                     });
                                   }}
-                                  size="large"
                                   className="ui image"
+                                  responsive={true}
                                 />
-
                                 <Modal.Description>
                                   <p>{item.description}</p>
                                 </Modal.Description>

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

@@ -6,34 +6,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
-import { Image, Grid } from 'semantic-ui-react';
+import { 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>
-    {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.image && (
-      <Image
-        className="document-image"
-        src={content.image.scales.thumb.download}
-        floated="right"
-      />
-    )}
-    {content.text && (
-      <div
-        dangerouslySetInnerHTML={{
-          __html: flattenHTMLToAppURL(content.text.data),
-        }}
-      />
-    )}
-  </React.Fragment>
-);
+const EventTextfieldView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  return (
+    <React.Fragment>
+      {content.title && (
+        <h1 className="documentFirstHeading">{content.title}</h1>
+      )}
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.image && (
+        <Image
+          className="document-image ui right floated image"
+          item={content}
+          imageField="image"
+          alt=""
+        />
+      )}
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: flattenHTMLToAppURL(content.text.data),
+          }}
+        />
+      )}
+    </React.Fragment>
+  );
+};
 
 /**
  * EventView view component class.

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

@@ -18,6 +18,7 @@ import config from '@plone/volto/registry';
  * @returns {string} Markup of the component.
  */
 const ImageView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
@@ -32,9 +33,11 @@ const ImageView = ({ content }) => {
       )}
       {content?.image?.download && (
         <a href={flattenToAppURL(content.image.download)}>
-          <img
+          <Image
+            item={content}
+            imageField="image"
             alt={content.title}
-            src={flattenToAppURL(content.image.scales.preview.download)}
+            responsive={true}
           />
           <figcaption>
             <FormattedMessage

package/src/components/theme/View/ImageView.test.jsx

@@ -23,9 +23,13 @@ test('renders an image view component', () => {
           image: {
             size: 123123,
             download: 'file:///preview.jpg',
+            width: 400,
+            height: 400,
             scales: {
               preview: {
                 download: 'file:///preview.jpg',
+                width: 400,
+                height: 400,
               },
             },
           },

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Segment, Container as SemanticContainer } from 'semantic-ui-react';
-import { UniversalLink, PreviewImage } from '@plone/volto/components';
+import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
 /**
@@ -18,6 +18,7 @@ import config from '@plone/volto/registry';
 const ListingView = ({ content }) => {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component;
 
   return (
     <Container id="page-home">
@@ -35,9 +36,10 @@ const ListingView = ({ content }) => {
             {item.image_field && (
               <PreviewImage
                 item={item}
-                size="thumb"
-                alt={item.image_caption ? item.image_caption : item.title}
+                alt={item.image_caption}
                 className="ui image"
+                responsive={true}
+                loading="lazy"
               />
             )}
           </Segment>