@plone/volto 17.0.0-alpha.8 → 17.0.0

package/src/components/manage/Contents/ContentsPropertiesModal.jsx

@@ -1,15 +1,10 @@
-/**
- * Contents properties modal.
- * @module components/manage/Contents/ContentsPropertiesModal
- */
-
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty, map } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
+import { usePrevious } from '@plone/volto/helpers';
 import { updateContent } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
 
@@ -27,8 +22,7 @@ const messages = defineMessages({
     defaultMessage: 'Publishing Date',
   },
   effectiveDescription: {
-    id:
-      'If this date is in the future, the content will not show up in listings and searches until this date.',
+    id: 'If this date is in the future, the content will not show up in listings and searches until this date.',
     defaultMessage:
       'If this date is in the future, the content will not show up in listings and searches until this date.',
   },
@@ -37,8 +31,7 @@ const messages = defineMessages({
     defaultMessage: 'Expiration Date',
   },
   expiresDescription: {
-    id:
-      'When this date is reached, the content will nolonger be visible in listings and searches.',
+    id: 'When this date is reached, the content will nolonger be visible in listings and searches.',
     defaultMessage:
       'When this date is reached, the content will nolonger be visible in listings and searches.',
   },
@@ -56,8 +49,7 @@ const messages = defineMessages({
     defaultMessage: 'Creators',
   },
   creatorsDescription: {
-    id:
-      'Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first.',
+    id: 'Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first.',
     defaultMessage:
       'Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first.',
   },
@@ -70,166 +62,98 @@ const messages = defineMessages({
     defaultMessage:
       'If selected, this item will not appear in the navigation tree',
   },
-  yes: {
-    id: 'Yes',
-    defaultMessage: 'Yes',
-  },
-  no: {
-    id: 'No',
-    defaultMessage: 'No',
-  },
 });
 
-/**
- * ContentsPropertiesModal class.
- * @class ContentsPropertiesModal
- * @extends Component
- */
-class ContentsPropertiesModal extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateContent: PropTypes.func.isRequired,
-    items: PropTypes.arrayOf(PropTypes.string).isRequired,
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    open: PropTypes.bool.isRequired,
-    onOk: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ContentsUploadModal
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
+const ContentsPropertiesModal = (props) => {
+  const { onCancel, onOk, open, items } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const request = useSelector((state) => state.content.update);
+  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) {
+  const onSubmit = (data) => {
     if (isEmpty(data)) {
-      this.props.onOk();
+      onOk();
     } else {
-      this.props.updateContent(
-        this.props.items,
-        map(this.props.items, () => data),
+      dispatch(
+        updateContent(
+          items,
+          map(items, () => data),
+        ),
       );
     }
-  }
+  };
 
-  /**
-   * 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}
-          title={this.props.intl.formatMessage(messages.properties)}
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: [
-                  'effective',
-                  'expires',
-                  'rights',
-                  'creators',
-                  'exclude_from_nav',
-                ],
-              },
-            ],
-            properties: {
-              effective: {
-                description: this.props.intl.formatMessage(
-                  messages.effectiveDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.effectiveTitle),
-                type: 'string',
-                widget: 'datetime',
-              },
-              expires: {
-                description: this.props.intl.formatMessage(
-                  messages.expiresDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.expiresTitle),
-                type: 'string',
-                widget: 'datetime',
-              },
-              rights: {
-                description: this.props.intl.formatMessage(
-                  messages.rightsDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.rightsTitle),
-                type: 'string',
-                widget: 'textarea',
-              },
-              creators: {
-                description: this.props.intl.formatMessage(
-                  messages.creatorsDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.creatorsTitle),
-                type: 'array',
-              },
-              exclude_from_nav: {
-                description: this.props.intl.formatMessage(
-                  messages.excludeFromNavDescription,
-                ),
-                title: this.props.intl.formatMessage(
-                  messages.excludeFromNavTitle,
-                ),
-                type: 'array',
-                choices: [
-                  [true, this.props.intl.formatMessage(messages.yes)],
-                  [false, this.props.intl.formatMessage(messages.no)],
-                ],
-              },
+  return (
+    open && (
+      <ModalForm
+        open={open}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        title={intl.formatMessage(messages.properties)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: [
+                'effective',
+                'expires',
+                'rights',
+                'creators',
+                'exclude_from_nav',
+              ],
+            },
+          ],
+          properties: {
+            effective: {
+              description: intl.formatMessage(messages.effectiveDescription),
+              title: intl.formatMessage(messages.effectiveTitle),
+              type: 'string',
+              widget: 'datetime',
+            },
+            expires: {
+              description: intl.formatMessage(messages.expiresDescription),
+              title: intl.formatMessage(messages.expiresTitle),
+              type: 'string',
+              widget: 'datetime',
+            },
+            rights: {
+              description: intl.formatMessage(messages.rightsDescription),
+              title: intl.formatMessage(messages.rightsTitle),
+              type: 'string',
+              widget: 'textarea',
+            },
+            creators: {
+              description: intl.formatMessage(messages.creatorsDescription),
+              title: intl.formatMessage(messages.creatorsTitle),
+              type: 'array',
+            },
+            exclude_from_nav: {
+              description: intl.formatMessage(
+                messages.excludeFromNavDescription,
+              ),
+              title: intl.formatMessage(messages.excludeFromNavTitle),
+              type: 'boolean',
             },
-            required: [],
-          }}
-        />
-      )
-    );
-  }
-}
+          },
+          required: [],
+        }}
+      />
+    )
+  );
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.content.update,
-    }),
-    { updateContent },
-  ),
-)(ContentsPropertiesModal);
+ContentsPropertiesModal.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+  open: PropTypes.bool.isRequired,
+  onOk: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+export default ContentsPropertiesModal;

package/src/components/manage/Contents/ContentsRenameModal.jsx

@@ -1,15 +1,10 @@
-/**
- * Contents rename modal.
- * @module components/manage/Contents/ContentsRenameModal
- */
-
-import React, { Component } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { concat, merge, map } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
+import { usePrevious } from '@plone/volto/helpers';
 import { updateContent } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
 
@@ -40,140 +35,94 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ContentsRenameModal class.
- * @class ContentsRenameModal
- * @extends Component
- */
-class ContentsRenameModal extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateContent: PropTypes.func.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string,
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    open: PropTypes.bool.isRequired,
-    onOk: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ContentsUploadModal
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
+const ContentsRenameModal = (props) => {
+  const { onOk, open, items, onCancel } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const request = useSelector((state) => state.content.update);
+  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.updateContent(
-      map(this.props.items, (item) => item.url),
-      map(this.props.items, (item, index) => ({
-        id: data[`${index}_id`],
-        title: data[`${index}_title`],
-      })),
-    );
-  }
+  const onSubmit = useCallback(
+    (data) => {
+      dispatch(
+        updateContent(
+          map(items, (item) => item.url),
+          map(items, (item, index) => ({
+            id: data[`${index}_id`],
+            title: data[`${index}_title`],
+          })),
+        ),
+      );
+    },
+    [items, dispatch],
+  );
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      this.props.open && (
-        <ModalForm
-          open={this.props.open}
-          loading={this.props.request.loading}
-          loadingMessage={this.props.intl.formatMessage(
-            messages.loadingMessage,
-          )}
-          onSubmit={this.onSubmit}
-          onCancel={this.props.onCancel}
-          formData={merge(
-            ...map(this.props.items, (item, index) => ({
-              [`${index}_title`]: item.title,
-              [`${index}_id`]: item.id,
-            })),
-          )}
-          title={this.props.intl.formatMessage(messages.renameItems)}
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: concat(
-                  ...map(this.props.items, (item, index) => [
-                    `${index}_title`,
-                    `${index}_id`,
-                  ]),
-                ),
+  return (
+    open && (
+      <ModalForm
+        open={open}
+        loading={request.loading}
+        loadingMessage={intl.formatMessage(messages.loadingMessage)}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        formData={merge(
+          ...map(items, (item, index) => ({
+            [`${index}_title`]: item.title,
+            [`${index}_id`]: item.id,
+          })),
+        )}
+        title={intl.formatMessage(messages.renameItems)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: concat(
+                ...map(items, (item, index) => [
+                  `${index}_title`,
+                  `${index}_id`,
+                ]),
+              ),
+            },
+          ],
+          properties: merge(
+            ...map(items, (item, index) => ({
+              [`${index}_title`]: {
+                title: intl.formatMessage(messages.title),
+                type: 'string',
+                description: '',
               },
-            ],
-            properties: merge(
-              ...map(this.props.items, (item, index) => ({
-                [`${index}_title`]: {
-                  title: this.props.intl.formatMessage(messages.title),
-                  type: 'string',
-                  description: '',
-                },
-                [`${index}_id`]: {
-                  title: this.props.intl.formatMessage(messages.shortName),
-                  type: 'id',
-                  description: this.props.intl.formatMessage(
-                    messages.shortNameDescription,
-                  ),
-                },
-              })),
-            ),
-            required: [],
-          }}
-        />
-      )
-    );
-  }
-}
+              [`${index}_id`]: {
+                title: intl.formatMessage(messages.shortName),
+                type: 'id',
+                description: intl.formatMessage(messages.shortNameDescription),
+              },
+            })),
+          ),
+          required: [],
+        }}
+      />
+    )
+  );
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.content.update,
+ContentsRenameModal.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      title: PropTypes.string,
+      url: PropTypes.string,
     }),
-    { updateContent },
-  ),
-)(ContentsRenameModal);
+  ).isRequired,
+  open: PropTypes.bool.isRequired,
+  onOk: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default ContentsRenameModal;

package/src/components/manage/Contents/ContentsRenameModal.stories.jsx

@@ -0,0 +1,61 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ContentsRenameModalComponent from './ContentsRenameModal';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlContentRenameModalComponent = injectIntl(
+  ContentsRenameModalComponent,
+);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        content: {
+          update: {
+            loading: false,
+            loaded: true,
+          },
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlContentRenameModalComponent
+        {...args}
+        onOk={() => {}}
+        onCancel={() => {}}
+        items={[
+          {
+            ...args,
+            url: '/blog',
+          },
+        ]}
+      />
+    </Wrapper>
+  );
+}
+
+export const ContentRenameModal = StoryComponent.bind({});
+
+ContentRenameModal.args = {
+  open: true,
+  id: 'blogs',
+  title: 'Plone Blog',
+};
+
+export default {
+  title: 'Public components/Contents/Content Rename Modal',
+  component: ContentRenameModal,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};