@plone/volto 17.0.0-alpha.9 → 17.0.0

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);

package/src/components/theme/Anontools/Anontools.jsx

@@ -1,83 +1,55 @@
-/**
- * Anontools component.
- * @module components/theme/Anontools/Anontools
- */
-
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Menu } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
+import { useSelector, shallowEqual } from 'react-redux';
 
-/**
- * Anontools container class.
- */
-export class Anontools extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    token: PropTypes.string,
-    content: PropTypes.shape({
-      '@id': PropTypes.string,
-    }),
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    token: null,
-    content: {
-      '@id': null,
-    },
-  };
+const Anontools = () => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const content = useSelector((state) => state.content.data, shallowEqual);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { settings } = config;
-    return (
-      !this.props.token && (
-        <Menu pointing secondary floated="right">
+  const { settings } = config;
+  return (
+    !token && (
+      <Menu pointing secondary floated="right">
+        <Menu.Item>
+          <Link
+            aria-label="login"
+            to={`/login${
+              content?.['@id']
+                ? `?return_url=${flattenToAppURL(content['@id'])}`
+                : ''
+            }`}
+          >
+            <FormattedMessage id="Log in" defaultMessage="Log in" />
+          </Link>
+        </Menu.Item>
+        {settings.showSelfRegistration && (
           <Menu.Item>
-            <Link
-              aria-label="login"
-              to={`/login${
-                this.props.content?.['@id']
-                  ? `?return_url=${this.props.content['@id'].replace(
-                      settings.apiPath,
-                      '',
-                    )}`
-                  : ''
-              }`}
-            >
-              <FormattedMessage id="Log in" defaultMessage="Log in" />
+            <Link aria-label="register" to="/register">
+              <FormattedMessage id="Register" defaultMessage="Register" />
             </Link>
           </Menu.Item>
-          {settings.showSelfRegistration && (
-            <Menu.Item>
-              <Link aria-label="register" to="/register">
-                <FormattedMessage id="Register" defaultMessage="Register" />
-              </Link>
-            </Menu.Item>
-          )}
-        </Menu>
-      )
-    );
-  }
-}
+        )}
+      </Menu>
+    )
+  );
+};
+
+export default Anontools;
+
+Anontools.propTypes = {
+  token: PropTypes.string,
+  content: PropTypes.shape({
+    '@id': PropTypes.string,
+  }),
+};
 
-export default connect((state) => ({
-  token: state.userSession.token,
-  content: state.content.data,
-}))(Anontools);
+Anontools.defaultProps = {
+  token: null,
+  content: {
+    '@id': null,
+  },
+};

package/src/components/theme/Anontools/Anontools.stories.jsx

@@ -1,15 +1,25 @@
 import React from 'react';
-import { Anontools as AnontoolsDefault } from './Anontools';
+import AnontoolsDefault from './Anontools';
 import Wrapper from '@plone/volto/storybook';
 
 const AnontoolsComponent = ({ children, ...args }) => {
   return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+    <Wrapper
+      anonymous
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={{
+        content: {
+          data: { '@id': 'http://myreturnURL' },
+          get: {
+            loaded: false,
+            loading: false,
+            error: null,
+          },
+        },
+      }}
+    >
       <div className="ui segment form attached" style={{ width: '400px' }}>
-        <AnontoolsDefault
-          userSession={{ token: null }}
-          content={{ '@id': 'myid' }}
-        />
+        <AnontoolsDefault />
       </div>
     </Wrapper>
   );

package/src/components/theme/Anontools/Anontools.test.jsx

@@ -12,7 +12,14 @@ describe('Anontools', () => {
   it('renders an anontools component when no token is specified', () => {
     const store = mockStore({
       userSession: { token: null },
-      content: { data: { '@id': 'myid' } },
+      content: {
+        data: { '@id': 'myid' },
+        get: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},
@@ -32,7 +39,14 @@ describe('Anontools', () => {
   it('should not render an anontools component when a token is specified', () => {
     const store = mockStore({
       userSession: { token: '1234' },
-      content: { data: {} },
+      content: {
+        data: {},
+        get: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -1,20 +1,13 @@
-/**
- * Breadcrumbs components.
- * @module components/theme/Breadcrumbs/Breadcrumbs
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 
-import { Icon } from '@plone/volto/components';
 import { getBreadcrumbs } from '@plone/volto/actions';
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-
+import { Icon } from '@plone/volto/components';
 import homeSVG from '@plone/volto/icons/home.svg';
 
 const messages = defineMessages({
@@ -28,96 +21,56 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
+const BreadcrumbsComponent = ({ pathname }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
 
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
+  const items = useSelector((state) => state.breadcrumbs.items, shallowEqual);
+  const root = useSelector((state) => state.breadcrumbs.root);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
+  useEffect(() => {
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      dispatch(getBreadcrumbs(getBaseUrl(pathname)));
     }
-  }
+  }, [dispatch, pathname]);
+
+  return (
+    <Segment
+      role="navigation"
+      aria-label={intl.formatMessage(messages.breadcrumbs)}
+      className="breadcrumbs"
+      secondary
+      vertical
+    >
+      <Container>
+        <Breadcrumb>
+          <Link
+            to={root || '/'}
+            className="section"
+            title={intl.formatMessage(messages.home)}
+          >
+            <Icon name={homeSVG} size="18px" />
+          </Link>
+          {items.map((item, index, items) => [
+            <Breadcrumb.Divider key={`divider-${item.url}`} />,
+            index < items.length - 1 ? (
+              <Link key={item.url} to={item.url} className="section">
+                {item.title}
+              </Link>
+            ) : (
+              <Breadcrumb.Section key={item.url} active>
+                {item.title}
+              </Breadcrumb.Section>
+            ),
+          ])}
+        </Breadcrumb>
+      </Container>
+    </Segment>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-        secondary
-        vertical
-      >
-        <Container>
-          <Breadcrumb>
-            <Link
-              to={this.props.root || '/'}
-              className="section"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="18px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <Breadcrumb.Divider key={`divider-${item.url}`} />,
-              index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
-                  {item.title}
-                </Link>
-              ) : (
-                <Breadcrumb.Section key={item.url} active>
-                  {item.title}
-                </Breadcrumb.Section>
-              ),
-            ])}
-          </Breadcrumb>
-        </Container>
-      </Segment>
-    );
-  }
-}
+BreadcrumbsComponent.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);
+export default BreadcrumbsComponent;