@plone/volto 17.0.0-alpha.21 → 17.0.0-alpha.23

package/src/components/manage/Delete/Delete.jsx

@@ -1,21 +1,14 @@
-/**
- * Delete container.
- * @module components/manage/Delete/Delete
- */
-
-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 { withRouter } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Portal } from 'react-portal';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
 
-import { deleteContent, getContent } from '@plone/volto/actions';
 import { Toolbar } from '@plone/volto/components';
+import { Helmet, usePrevious } from '@plone/volto/helpers';
+import { deleteContent, getContent } from '@plone/volto/actions';
 
 const messages = defineMessages({
   delete: {
@@ -32,172 +25,104 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Delete container class.
- * @class Delete
- * @extends Component
- */
-class Delete extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    deleteContent: PropTypes.func.isRequired,
-    getContent: PropTypes.func.isRequired,
-    deleteRequest: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    content: PropTypes.shape({
-      title: PropTypes.string,
-    }),
-    returnUrl: PropTypes.string,
-  };
+const Delete = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const [isClient, setisClient] = useState(false);
+  const { pathname, search } = useLocation();
+  const history = useHistory();
+  const deleteRequest = useSelector((state) => state.content?.delete);
+  const content = useSelector((state) => state.content?.data, shallowEqual);
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    content: null,
-    returnUrl: null,
-  };
+  const prevdeleteRequestLoading = usePrevious(deleteRequest.loading);
+  const returnUrl = qs.parse(search).return_url;
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = { isClient: false };
-  }
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  useEffect(() => {
+    dispatch(getContent(pathname.split('/delete')[0]));
+  }, [dispatch, pathname]);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.deleteRequest.loading && nextProps.deleteRequest.loaded) {
-      this.props.history.push(
-        this.props.returnUrl ||
-          this.props.pathname.replace('/delete', '').replace(/\/[^/]*$/, ''),
+  useEffect(() => {
+    if (prevdeleteRequestLoading && deleteRequest.loaded) {
+      history.push(
+        returnUrl || pathname.replace('/delete', '').replace(/\/[^/]*$/, ''),
       );
     }
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getContent(this.props.pathname.split('/delete')[0]);
-    this.setState({ isClient: true });
-  }
+  }, [
+    history,
+    pathname,
+    returnUrl,
+    prevdeleteRequestLoading,
+    deleteRequest.loaded,
+  ]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @returns {undefined}
-   */
-  onSubmit() {
-    this.props.deleteContent(this.props.pathname.replace('/delete', ''));
-  }
+  const onSubmit = () => {
+    dispatch(deleteContent(pathname.replace('/delete', '')));
+  };
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.push(this.props.pathname.replace('/delete', ''));
-  }
+  const onCancel = () => {
+    history.push(pathname.replace('/delete', ''));
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.props.content) {
-      return (
-        <div id="page-delete">
-          <Helmet title={this.props.intl.formatMessage(messages.delete)} />
-          <Container>
-            <Segment.Group raised>
-              <Segment className="primary">
-                <FormattedMessage
-                  id="Do you really want to delete this item?"
-                  defaultMessage="Do you really want to delete this item?"
-                />
-              </Segment>
-              <Segment attached>
-                <List bulleted>
-                  <List.Item>{this.props.content.title}</List.Item>
-                </List>
-              </Segment>
-              <Segment className="actions" clearing>
-                <Button
-                  basic
-                  circular
-                  primary
-                  floated="right"
-                  icon="arrow right"
-                  aria-label={this.props.intl.formatMessage(messages.ok)}
-                  title={this.props.intl.formatMessage(messages.ok)}
-                  size="big"
-                  onClick={this.onSubmit}
-                />
-                <Button
-                  basic
-                  circular
-                  secondary
-                  icon="remove"
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                  floated="right"
-                  size="big"
-                  onClick={this.onCancel}
-                />
-              </Segment>
-            </Segment.Group>
-          </Container>
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
-              <Toolbar
-                pathname={this.props.pathname}
-                hideDefaultViewButtons
-                inner={<span />}
+  if (content) {
+    return (
+      <div id="page-delete">
+        <Helmet title={intl.formatMessage(messages.delete)} />
+        <Container>
+          <Segment.Group raised>
+            <Segment className="primary">
+              <FormattedMessage
+                id="Do you really want to delete this item?"
+                defaultMessage="Do you really want to delete this item?"
               />
-            </Portal>
-          )}
-        </div>
-      );
-    }
-    return <div />;
+            </Segment>
+            <Segment attached>
+              <List bulleted>
+                <List.Item>{content.title}</List.Item>
+              </List>
+            </Segment>
+            <Segment className="actions" clearing>
+              <Button
+                basic
+                circular
+                primary
+                floated="right"
+                icon="arrow right"
+                aria-label={intl.formatMessage(messages.ok)}
+                title={intl.formatMessage(messages.ok)}
+                size="big"
+                onClick={onSubmit}
+              />
+              <Button
+                basic
+                circular
+                secondary
+                icon="remove"
+                aria-label={intl.formatMessage(messages.cancel)}
+                title={intl.formatMessage(messages.cancel)}
+                floated="right"
+                size="big"
+                onClick={onCancel}
+              />
+            </Segment>
+          </Segment.Group>
+        </Container>
+        {isClient && (
+          <Portal node={document.getElementById('toolbar')}>
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={<span />}
+            />
+          </Portal>
+        )}
+      </div>
+    );
   }
-}
+  return <div />;
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      content: state.content.data,
-      deleteRequest: state.content.delete,
-      pathname: props.location.pathname,
-      returnUrl: qs.parse(props.location.search).return_url,
-    }),
-    { deleteContent, getContent },
-  ),
-)(Delete);
+export default Delete;

package/src/components/manage/Widgets/SelectUtils.js

@@ -111,7 +111,7 @@ export function normalizeValue(choices, value, intl) {
 
   if (Array.isArray(value)) {
     // a list of values, like ['foo', 'bar'];
-    return value.map((v) => normalizeValue(choices, v));
+    return value.map((v) => normalizeValue(choices, v, intl));
   }
 
   if (isObject(value)) {

package/src/components/manage/Workflow/Workflow.jsx

@@ -1,22 +1,17 @@
-/**
- * Workflow component.
- * @module components/manage/Workflow/Workflow
- */
-
-import React, { Component, Fragment } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { uniqBy } from 'lodash';
 import { toast } from 'react-toastify';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+
 import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
 import {
   flattenToAppURL,
-  getCurrentStateMapping,
   getWorkflowOptions,
+  getCurrentStateMapping,
 } from '@plone/volto/helpers';
-
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import {
@@ -24,7 +19,6 @@ import {
   getWorkflow,
   transitionWorkflow,
 } from '@plone/volto/actions';
-
 import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
@@ -165,191 +159,88 @@ const customSelectStyles = {
   }),
 };
 
-/**
- * Workflow container class.
- * @class Workflow
- * @extends Component
- */
-class Workflow extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getContent: PropTypes.func.isRequired,
-    getWorkflow: PropTypes.func.isRequired,
-    transitionWorkflow: PropTypes.func.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    pathname: PropTypes.string.isRequired,
-    history: PropTypes.arrayOf(
-      PropTypes.shape({
-        review_state: PropTypes.string,
-      }),
-    ),
-    transitions: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-        title: PropTypes.string,
-      }),
-    ),
-  };
+function useWorkflow() {
+  const history = useSelector((state) => state.workflow.history, shallowEqual);
+  const transitions = useSelector(
+    (state) => state.workflow.transitions,
+    shallowEqual,
+  );
+  const loaded = useSelector((state) => state.workflow.transition.loaded);
+  const currentStateValue = useSelector(
+    (state) => getCurrentStateMapping(state.workflow.currentState),
+    shallowEqual,
+  );
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    history: [],
-    transitions: [],
-  };
+  return { loaded, history, transitions, currentStateValue };
+}
 
-  componentDidMount() {
-    this.props.getWorkflow(this.props.pathname);
-  }
+const Workflow = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { loaded, transitions, currentStateValue } = useWorkflow();
+  const content = useSelector((state) => state.content?.data, shallowEqual);
+  const { pathname } = props;
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      this.props.getWorkflow(nextProps.pathname);
-    }
-    if (!this.props.loaded && nextProps.loaded) {
-      this.props.getWorkflow(nextProps.pathname);
-      this.props.getContent(nextProps.pathname);
-    }
-  }
+  useEffect(() => {
+    dispatch(getWorkflow(pathname));
+    dispatch(getContent(pathname));
+  }, [dispatch, pathname, loaded]);
 
-  /**
-   * On transition handler
-   * @method transition
-   * @param {string} event Event object
-   * @returns {undefined}
-   */
-  transition = (selectedOption) => {
-    this.props.transitionWorkflow(flattenToAppURL(selectedOption.url));
+  const transition = (selectedOption) => {
+    dispatch(transitionWorkflow(flattenToAppURL(selectedOption.url)));
     toast.success(
       <Toast
         success
-        title={this.props.intl.formatMessage(messages.messageUpdated)}
+        title={intl.formatMessage(messages.messageUpdated)}
         content=""
       />,
     );
   };
 
-  selectValue = (option) => {
-    const stateDecorator = {
-      marginLeft: '10px',
-      marginRight: '10px',
-      display: 'inline-block',
-      backgroundColor: option.color || null,
-      content: ' ',
-      height: '10px',
-      width: '10px',
-      borderRadius: '50%',
-    };
-    return (
-      <Fragment>
-        <span style={stateDecorator} />
-        <span className="Select-value-label">{option.label}</span>
-      </Fragment>
-    );
-  };
-
-  optionRenderer = (option) => {
-    const stateDecorator = {
-      marginLeft: '10px',
-      marginRight: '10px',
-      display: 'inline-block',
-      backgroundColor:
-        this.props.currentStateValue.value === option.value
-          ? option.color
-          : null,
-      content: ' ',
-      height: '10px',
-      width: '10px',
-      borderRadius: '50%',
-      border:
-        this.props.currentStateValue.value !== option.value
-          ? `1px solid ${option.color}`
-          : null,
-    };
-
-    return (
-      <Fragment>
-        <span style={stateDecorator} />
-        <span style={{ marginRight: 'auto' }}>{option.label}</span>
-        <Icon name={checkSVG} size="24px" />
-      </Fragment>
-    );
-  };
+  const { Placeholder } = props.reactSelect.components;
+  const Select = props.reactSelect.default;
 
-  render() {
-    const { Placeholder } = this.props.reactSelect.components;
-    const Select = this.props.reactSelect.default;
+  return (
+    <FormFieldWrapper
+      id="state-select"
+      title={intl.formatMessage(messages.state)}
+      intl={intl}
+      {...props}
+    >
+      <Select
+        name="state-select"
+        className="react-select-container"
+        classNamePrefix="react-select"
+        isDisabled={!content.review_state || transitions.length === 0}
+        options={uniqBy(
+          transitions.map((transition) => getWorkflowOptions(transition)),
+          'label',
+        ).concat(currentStateValue)}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{
+          DropdownIndicator,
+          Placeholder,
+          Option,
+          SingleValue,
+        }}
+        onChange={transition}
+        value={
+          content.review_state
+            ? currentStateValue
+            : {
+                label: intl.formatMessage(messages.messageNoWorkflow),
+                value: 'noworkflow',
+              }
+        }
+        isSearchable={false}
+      />
+    </FormFieldWrapper>
+  );
+};
 
-    return (
-      <FormFieldWrapper
-        id="state-select"
-        title={this.props.intl.formatMessage(messages.state)}
-        {...this.props}
-      >
-        <Select
-          name="state-select"
-          className="react-select-container"
-          classNamePrefix="react-select"
-          isDisabled={
-            !this.props.content.review_state ||
-            this.props.transitions.length === 0
-          }
-          options={uniqBy(
-            this.props.transitions.map((transition) =>
-              getWorkflowOptions(transition),
-            ),
-            'label',
-          ).concat(this.props.currentStateValue)}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{
-            DropdownIndicator,
-            Placeholder,
-            Option,
-            SingleValue,
-          }}
-          onChange={this.transition}
-          value={
-            this.props.content.review_state
-              ? this.props.currentStateValue
-              : {
-                  label: this.props.intl.formatMessage(
-                    messages.messageNoWorkflow,
-                  ),
-                  value: 'noworkflow',
-                }
-          }
-          isSearchable={false}
-        />
-      </FormFieldWrapper>
-    );
-  }
-}
+Workflow.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  injectLazyLibs(['reactSelect']),
-  connect(
-    (state) => ({
-      loaded: state.workflow.transition.loaded,
-      content: state.content.data,
-      history: state.workflow.history,
-      transitions: state.workflow.transitions,
-      currentStateValue: getCurrentStateMapping(state.workflow.currentState),
-    }),
-    { getContent, getWorkflow, transitionWorkflow },
-  ),
-)(Workflow);
+export default compose(injectLazyLibs(['reactSelect']))(Workflow);