@plone/volto 19.0.0-alpha.32 → 19.0.0-alpha.34

package/src/components/manage/Controlpanels/Controlpanel.jsx

@@ -1,21 +1,15 @@
-/**
- * Controlpanel component.
- * @module components/manage/Controlpanels/Controlpanel
- */
-
-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 { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { useClient } from '@plone/volto/hooks/client/useClient';
 import {
   tryParseJSON,
   extractInvariantErrors,
 } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { createPortal } from 'react-dom';
 import { Button, Container } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
@@ -26,6 +20,7 @@ import {
   updateControlpanel,
   getControlpanel,
 } from '@plone/volto/actions/controlpanels/controlpanels';
+import { getSite } from '@plone/volto/actions/site/site';
 
 import config from '@plone/volto/registry';
 
@@ -59,217 +54,126 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Controlpanel class.
- * @class Controlpanel
- * @extends Component
- */
-class Controlpanel extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateControlpanel: PropTypes.func.isRequired,
-    getControlpanel: PropTypes.func.isRequired,
-    id: PropTypes.string.isRequired,
-    updateRequest: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    controlpanel: PropTypes.shape({
-      '@id': PropTypes.string,
-      data: PropTypes.object,
-      schema: PropTypes.object,
-      title: PropTypes.string,
-    }),
-    pathname: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    controlpanel: null,
+const Controlpanel = () => {
+  const { filterControlPanelsSchema } = config.settings;
+  const intl = useIntl();
+  const id = useParams().id;
+  const pathname = useLocation().pathname;
+  const history = useHistory();
+  const isClient = useClient();
+
+  const dispatch = useDispatch();
+  const controlpanel = useSelector((state) => state.controlpanels.controlpanel);
+  const updateRequest = useSelector((state) => state.controlpanels.update);
+  const [error, setError] = useState(null);
+
+  const formRef = useRef();
+  const onCancel = () => {
+    history.goBack();
   };
-
-  /**
-   * 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.state = { isClient: false, error: null };
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getControlpanel(this.props.id);
-    this.setState({ isClient: true });
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.updateRequest.loading && nextProps.updateRequest.error) {
-      const message =
-        nextProps.updateRequest.error?.response?.body?.error?.message ||
-        nextProps.updateRequest.error?.response?.body?.message ||
-        nextProps.updateRequest.error?.response?.text ||
-        '';
-
-      const error =
-        new DOMParser().parseFromString(message, 'text/html')?.all?.[0]
-          ?.textContent || message;
-
-      const errorsList = tryParseJSON(error);
-      let invariantErrors = [];
-      if (Array.isArray(errorsList)) {
-        invariantErrors = extractInvariantErrors(errorsList);
-      }
-
-      this.setState({ error: error });
-
-      if (invariantErrors.length > 0) {
-        toast.error(
+  const onSubmit = (data) => {
+    dispatch(updateControlpanel(controlpanel['@id'], data))
+      .then(() => {
+        dispatch(getSite());
+        toast.info(
           <Toast
-            error
-            title={this.props.intl.formatMessage(messages.error)}
-            content={invariantErrors.join(' - ')}
+            info
+            title={intl.formatMessage(messages.info)}
+            content={intl.formatMessage(messages.changesSaved)}
           />,
         );
-      }
-    }
-
-    if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
-      toast.info(
-        <Toast
-          info
-          title={this.props.intl.formatMessage(messages.info)}
-          content={this.props.intl.formatMessage(messages.changesSaved)}
-        />,
-      );
-    }
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.updateControlpanel(this.props.controlpanel['@id'], data);
-  }
-
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.goBack();
-  }
-  form = React.createRef();
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { filterControlPanelsSchema } = config.settings;
+      })
+      .catch((err) => {
+        const message =
+          err?.response?.body?.error?.message ||
+          err?.response?.body?.message ||
+          err?.response?.text ||
+          '';
+        const error =
+          new DOMParser().parseFromString(message, 'text/html')?.all?.[0]
+            ?.textContent || message;
+        const errorsList = tryParseJSON(error);
+        let invariantErrors = [];
+        if (Array.isArray(errorsList)) {
+          invariantErrors = extractInvariantErrors(errorsList);
+        }
+        setError(error);
+        if (invariantErrors.length > 0) {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(messages.error)}
+              content={invariantErrors.join(' - ')}
+            />,
+          );
+        }
+      });
+  };
 
-    if (this.props.controlpanel) {
-      return (
-        <div id="page-controlpanel">
-          <Helmet title={this.props.controlpanel.title} />
-          <Container>
-            <Form
-              ref={this.form}
-              title={this.props.controlpanel.title}
-              schema={filterControlPanelsSchema(this.props.controlpanel)}
-              formData={this.props.controlpanel.data}
-              requestError={this.state.error}
-              onSubmit={this.onSubmit}
-              onCancel={this.onCancel}
-              hideActions
-              loading={this.props.updateRequest.loading}
-            />
-          </Container>
-          {this.state.isClient &&
-            createPortal(
-              <Toolbar
-                pathname={this.props.pathname}
-                hideDefaultViewButtons
-                inner={
-                  <>
-                    <Button
-                      id="toolbar-save"
-                      className="save"
-                      aria-label={this.props.intl.formatMessage(messages.save)}
-                      onClick={() => this.form.current.onSubmit()}
-                      disabled={this.props.updateRequest.loading}
-                      loading={this.props.updateRequest.loading}
-                    >
-                      <Icon
-                        name={saveSVG}
-                        className="circled"
-                        size="30px"
-                        title={this.props.intl.formatMessage(messages.save)}
-                      />
-                    </Button>
-                    <Button
-                      className="cancel"
-                      aria-label={this.props.intl.formatMessage(
-                        messages.cancel,
-                      )}
-                      onClick={() => this.onCancel()}
-                    >
-                      <Icon
-                        name={clearSVG}
-                        className="circled"
-                        size="30px"
-                        title={this.props.intl.formatMessage(messages.cancel)}
-                      />
-                    </Button>
-                  </>
-                }
-              />,
-              document.getElementById('toolbar'),
-            )}
-        </div>
-      );
-    }
-    return <div />;
+  useEffect(() => {
+    dispatch(getControlpanel(id)).catch((error) => setError(error));
+  }, [dispatch, id]);
+
+  if (controlpanel) {
+    return (
+      <div id="page-controlpanel">
+        <Helmet title={controlpanel.title} />
+        <Container>
+          <Form
+            ref={formRef}
+            title={controlpanel.title}
+            schema={filterControlPanelsSchema(controlpanel)}
+            formData={controlpanel.data}
+            requestError={error}
+            onSubmit={onSubmit}
+            onCancel={onCancel}
+            hideActions
+            loading={updateRequest.loading}
+          />
+        </Container>
+        {isClient &&
+          createPortal(
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={
+                <>
+                  <Button
+                    id="toolbar-save"
+                    className="save"
+                    aria-label={intl.formatMessage(messages.save)}
+                    onClick={() => formRef.current.onSubmit()}
+                    disabled={updateRequest.loading}
+                    loading={updateRequest.loading}
+                  >
+                    <Icon
+                      name={saveSVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.save)}
+                    />
+                  </Button>
+                  <Button
+                    className="cancel"
+                    aria-label={intl.formatMessage(messages.cancel)}
+                    onClick={onCancel}
+                  >
+                    <Icon
+                      name={clearSVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.cancel)}
+                    />
+                  </Button>
+                </>
+              }
+            />,
+            document.getElementById('toolbar'),
+          )}
+      </div>
+    );
   }
-}
+  return <div />;
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      controlpanel: state.controlpanels.controlpanel,
-      updateRequest: state.controlpanels.update,
-      id: props.match.params.id,
-      pathname: props.location.pathname,
-    }),
-    { updateControlpanel, getControlpanel },
-  ),
-  withRouter,
-)(Controlpanel);
+export default Controlpanel;

package/src/components/manage/Controlpanels/Controlpanel.test.jsx

@@ -1,4 +1,4 @@
-import { render, waitFor, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
@@ -79,32 +79,4 @@ describe('Controlpanel', () => {
 
     expect(container).toMatchSnapshot();
   });
-
-  it('renders a controlpanel component with error', async () => {
-    const { container, rerender } = render(
-      <Provider store={store}>
-        <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
-          <Route path={'/controlpanel/:id'} component={Controlpanel} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
-      </Provider>,
-    );
-
-    store.getState().controlpanels.update.loading = true;
-    store.getState().controlpanels.update.error.response.body.message =
-      "[{'message': 'Twitter username should not include the \"@\" prefix character.', 'field': 'twitter_username', 'error': 'ValidationError'}]";
-    store.dispatch = vi.fn(() => Promise.resolve());
-
-    rerender(
-      <Provider store={store}>
-        <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
-          <Route path={'/controlpanel/:id'} component={Controlpanel} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
-      </Provider>,
-    );
-
-    await waitFor(() => screen.findByText(/Twitter/i));
-    expect(container).toMatchSnapshot();
-  });
 });

package/src/components/manage/Form/Field.jsx

@@ -7,7 +7,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const MODE_HIDDEN = 'hidden'; //hidden mode. If mode is hidden, field is not rendered
 /**
@@ -155,7 +154,7 @@ const getWidgetByType = (widgets, type) => widgets.type[type] || null;
  * @param {Object} props Properties.
  * @returns {string} Markup of the component.
  */
-const UnconnectedField = (props, { intl }) => {
+const Field = (props, { intl }) => {
   const widgets = props.widgets || config.widgets;
   const Widget =
     getWidgetByFieldId(widgets, props.id) ||
@@ -178,74 +177,9 @@ const UnconnectedField = (props, { intl }) => {
     ...getWidgetPropsFromTaggedValues(widgets, props.widgetOptions),
   };
 
-  if (props.onOrder) {
-    const { DropTarget, DragSource } = props.reactDnd;
-    const WrappedWidget = DropTarget(
-      'field',
-      {
-        hover(properties, monitor) {
-          const dragOrder = monitor.getItem().order;
-          const hoverOrder = properties.order;
-
-          if (dragOrder === hoverOrder) {
-            return;
-          }
-          properties.onOrder(dragOrder, hoverOrder - dragOrder);
-
-          monitor.getItem().order = hoverOrder;
-        },
-      },
-      (connect) => ({
-        connectDropTarget: connect.dropTarget(),
-      }),
-    )(
-      DragSource(
-        'field',
-        {
-          beginDrag(properties) {
-            return {
-              id: properties.label,
-              order: properties.order,
-            };
-          },
-        },
-        (connect, monitor) => ({
-          connectDragSource: connect.dragSource(),
-          connectDragPreview: connect.dragPreview(),
-          isDragging: monitor.isDragging(),
-        }),
-      )(
-        ({
-          connectDropTarget,
-          connectDragSource,
-          connectDragPreview,
-          ...rest
-        }) =>
-          connectDropTarget(
-            connectDragSource(
-              connectDragPreview(
-                <div>
-                  <Widget {...rest} />
-                </div>,
-              ),
-            ),
-          ),
-      ),
-    );
-    return <WrappedWidget {...widgetProps} />;
-  }
   return <Widget {...widgetProps} />;
 };
 
-const DndConnectedField = injectLazyLibs(['reactDnd'])(UnconnectedField);
-
-const Field = (props) =>
-  props.onOrder ? (
-    <DndConnectedField {...props} />
-  ) : (
-    <UnconnectedField {...props} />
-  );
-
 /**
  * Property types.
  * @property {Object} propTypes Property types.
@@ -258,7 +192,6 @@ Field.propTypes = {
   type: PropTypes.string,
   id: PropTypes.string.isRequired,
   focus: PropTypes.bool,
-  onOrder: PropTypes.func,
 };
 
 /**
@@ -272,7 +205,6 @@ Field.defaultProps = {
   choices: null,
   type: 'string',
   focus: false,
-  onOrder: null,
 };
 
 export default injectIntl(Field);