@plone/volto 18.0.0-alpha.42 → 18.0.0-alpha.44

package/src/components/manage/Widgets/ReferenceWidget.jsx

@@ -1,15 +1,9 @@
-/**
- * ReferenceWidget component.
- * @module components/manage/Widgets/ReferenceWidget
- */
-
-import React, { Component } from 'react';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Label, Dropdown, Popup, Icon } from 'semantic-ui-react';
 import { compact, concat, fromPairs, map, values, uniqBy } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { resetSearchContent, searchContent } from '@plone/volto/actions';
@@ -26,130 +20,16 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ReferenceWidget component class.
- * @class ReferenceWidget
- * @extends Component
- */
-class ReferenceWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    required: PropTypes.bool,
-    multiple: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    value: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.object),
-      PropTypes.object,
-    ]),
-    onChange: PropTypes.func.isRequired,
-    resetSearchContent: PropTypes.func.isRequired,
-    searchContent: PropTypes.func.isRequired,
-    search: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-        '@type': PropTypes.string,
-        title: PropTypes.string,
-        description: PropTypes.string,
-      }),
-    ),
-    wrapped: PropTypes.bool,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    search: [],
-    value: null,
-    multiple: true,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Actions
-   */
-  constructor(props) {
-    super(props);
-    this.onSearchChange = this.onSearchChange.bind(this);
-
-    this.state = {
-      choices: props.value
-        ? props.multiple
-          ? fromPairs(
-              map(props.value, (value) => [
-                value['@id'],
-                {
-                  key: value['@id'],
-                  text: flattenToAppURL(value['@id']),
-                  value: value['@id'],
-                  label: {
-                    content: value.title,
-                  },
-                  data: value,
-                },
-              ]),
-            )
-          : {
-              [props.value['@id']]: {
-                key: props.value['@id'],
-                text: flattenToAppURL(props.value),
-                value: props.value['@id'],
-                label: {
-                  content: props.value.title,
-                },
-                data: props.value,
-              },
-              novalue: {
-                key: 'novalue',
-                text: this.props.intl.formatMessage(messages.no_value),
-                value: 'novalue',
-                data: null,
-              },
-            }
-        : {},
-    };
-  }
-
-  componentDidMount() {
-    this.props.resetSearchContent();
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      choices: {
-        ...fromPairs(
-          map(
-            uniqBy(
-              map(
-                compact(concat(nextProps.value, nextProps.search)),
-                (item) => ({
-                  ...item,
-                  '@id': flattenToAppURL(item['@id']),
-                }),
-              ),
-              '@id',
-            ),
-            (value) => [
+const ReferenceWidget = (props) => {
+  const { id, title, value, multiple, onChange } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const search = useSelector((state) => state.search.items);
+  const [choices, setChoices] = useState(
+    value
+      ? multiple
+        ? fromPairs(
+            map(value, (value) => [
               value['@id'],
               {
                 key: value['@id'],
@@ -160,37 +40,78 @@ class ReferenceWidget extends Component {
                 },
                 data: value,
               },
-            ],
+            ]),
+          )
+        : {
+            [value['@id']]: {
+              key: value['@id'],
+              text: flattenToAppURL(value),
+              value: value['@id'],
+              label: {
+                content: value.title,
+              },
+              data: value,
+            },
+            novalue: {
+              key: 'novalue',
+              text: intl.formatMessage(messages.no_value),
+              value: 'novalue',
+              data: null,
+            },
+          }
+      : {},
+  );
+
+  useEffect(() => {
+    dispatch(resetSearchContent());
+  }, [dispatch]);
+
+  useEffect(() => {
+    setChoices({
+      ...fromPairs(
+        map(
+          uniqBy(
+            map(compact(concat(value, search)), (item) => ({
+              ...item,
+              '@id': flattenToAppURL(item['@id']),
+            })),
+            '@id',
           ),
+          (value) => [
+            value['@id'],
+            {
+              key: value['@id'],
+              text: flattenToAppURL(value['@id']),
+              value: value['@id'],
+              label: {
+                content: value.title,
+              },
+              data: value,
+            },
+          ],
         ),
-        novalue: {
-          key: 'novalue',
-          text: this.props.intl.formatMessage(messages.no_value),
-          value: 'novalue',
-          data: null,
-        },
+      ),
+      novalue: {
+        key: 'novalue',
+        text: intl.formatMessage(messages.no_value),
+        value: 'novalue',
+        data: null,
       },
     });
-  }
-
-  /**
-   * On search change handler
-   * @method onSearchChange
-   * @param {object} event Event object.
-   * @param {object} data Event data.
-   * @returns {undefined}
-   */
+  }, [intl, search, value]);
 
-  onSearchChange(event, data) {
+  const onSearchChange = (event, data) => {
     if (data.searchQuery && data.searchQuery !== '') {
-      this.props.searchContent('', {
-        Title: `*${data.searchQuery}*`,
-      });
+      dispatch(
+        searchContent('', {
+          Title: `*${data.searchQuery}*`,
+        }),
+      );
     } else {
-      this.props.resetSearchContent();
+      dispatch(resetSearchContent());
     }
-  }
-  renderLabel = (item, index, defaultProps) => {
+  };
+  const renderLabel = (item, index, defaultProps) => {
     return (
       <Popup
         key={item.value}
@@ -216,59 +137,62 @@ class ReferenceWidget extends Component {
     );
   };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { id, title, value, multiple, onChange } = this.props;
-
-    return (
-      <FormFieldWrapper {...this.props}>
-        <Dropdown
-          options={values(this.state.choices)}
-          placeholder={title}
-          search
-          selection
-          fluid
-          noResultsMessage={this.props.intl.formatMessage(
-            messages.no_results_found,
-          )}
-          multiple={multiple}
-          value={
+  return (
+    <FormFieldWrapper {...props}>
+      <Dropdown
+        options={values(choices)}
+        placeholder={title}
+        search
+        selection
+        fluid
+        noResultsMessage={intl.formatMessage(messages.no_results_found)}
+        multiple={multiple}
+        value={
+          multiple
+            ? value
+              ? map(value, (item) =>
+                  item && item['@id'] ? flattenToAppURL(item['@id']) : item,
+                )
+              : []
+            : value
+              ? flattenToAppURL(value['@id'])
+              : ''
+        }
+        onChange={(event, data) => {
+          return onChange(
+            id,
             multiple
-              ? value
-                ? map(value, (item) =>
-                    item && item['@id'] ? flattenToAppURL(item['@id']) : item,
-                  )
-                : []
-              : value
-                ? flattenToAppURL(value['@id'])
-                : ''
-          }
-          onChange={(event, data) => {
-            return onChange(
-              id,
-              multiple
-                ? map(data.value, (item) => this.state.choices[item].data)
-                : this.state.choices[data.value].data,
-            );
-          }}
-          onSearchChange={this.onSearchChange}
-          renderLabel={this.renderLabel}
-        />
-      </FormFieldWrapper>
-    );
-  }
-}
+              ? map(data.value, (item) => choices[item].data)
+              : choices[data.value].data,
+          );
+        }}
+        onSearchChange={onSearchChange}
+        renderLabel={renderLabel}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+ReferenceWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  multiple: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.object),
+    PropTypes.object,
+  ]),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      search: state.search.items,
-    }),
-    { resetSearchContent, searchContent },
-  ),
-)(ReferenceWidget);
+ReferenceWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  multiple: true,
+};
+export default ReferenceWidget;

package/src/components/manage/Widgets/SelectWidget.jsx

@@ -224,6 +224,7 @@ class SelectWidget extends Component {
           id={`field-${id}`}
           key={choices}
           name={id}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${id}`}
           menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}

package/src/components/manage/Widgets/TokenWidget.jsx

@@ -173,6 +173,7 @@ class TokenWidget extends Component {
       <FormFieldWrapper {...this.props}>
         <CreatableSelect
           id={`field-${this.props.id}`}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
           key={this.props.id}
           menuShouldScrollIntoView={false}
           isDisabled={this.props.isDisabled}

package/src/components/theme/Register/Register.jsx

@@ -1,17 +1,10 @@
-/**
- * Register container.
- * @module components/theme/Register/Register
- */
-
-import React, { Component } from 'react';
-import { Helmet } from '@plone/volto/helpers';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
+import { Helmet, usePrevious } from '@plone/volto/helpers';
 import { Toast } from '@plone/volto/components';
 import { Form } from '@plone/volto/components/manage/Form';
 import { createUser } from '@plone/volto/actions';
@@ -56,146 +49,81 @@ const messages = defineMessages({
     defaultMessage: 'Register',
   },
 });
+const useUsers = () => {
+  const error = useSelector((state) => state.users.create.error);
+  const loading = useSelector((state) => state.users.create.loading);
+  const loaded = useSelector((state) => state.users.create.loaded);
 
-/**
- * Register class.
- * @class Register
- * @extends Component
- */
-class Register extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    createUser: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    error: PropTypes.shape({
-      message: PropTypes.string,
-    }),
-  };
+  return { error, loaded, loading };
+};
+const Register = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const history = useHistory();
+  const [errors, setError] = useState(null);
+  const { loaded, loading, error } = useUsers();
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    error: null,
-  };
+  const prevloading = usePrevious(loading);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      error: null,
-    };
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.loading && nextProps.loaded) {
+  useEffect(() => {
+    if (prevloading && loaded) {
       toast.success(
         <Toast
           success
-          title={this.props.intl.formatMessage(
-            messages.successRegisterCompletedTitle,
-          )}
-          content={this.props.intl.formatMessage(
-            messages.successRegisterCompletedBody,
-          )}
+          title={intl.formatMessage(messages.successRegisterCompletedTitle)}
+          content={intl.formatMessage(messages.successRegisterCompletedBody)}
         />,
       );
-      this.props.history.push('/login');
+      history.push('/login');
     }
-  }
+  }, [intl, history, loaded, prevloading]);
 
-  /**
-   * On submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.createUser({
-      fullname: data.fullname,
-      email: data.email,
-      sendPasswordReset: true,
-    });
-    this.setState({
-      error: null,
-    });
-  }
+  const onSubmit = (data) => {
+    const { fullname, email } = data;
+    dispatch(
+      createUser({
+        fullname: fullname,
+        email: email,
+        sendPasswordReset: true,
+      }),
+    );
+    setError(null);
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div id="page-register">
-        <Helmet title={this.props.intl.formatMessage(messages.register)} />
-        <Form
-          onSubmit={this.onSubmit}
-          title={this.props.intl.formatMessage(messages.title)}
-          error={this.state.error || this.props.error}
-          loading={this.props.loading}
-          submitLabel={this.props.intl.formatMessage(messages.register)}
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['fullname', 'email'],
-              },
-            ],
-            properties: {
-              fullname: {
-                type: 'string',
-                title: this.props.intl.formatMessage(messages.fullnameTitle),
-                description: this.props.intl.formatMessage(
-                  messages.fullnameDescription,
-                ),
-              },
-              email: {
-                type: 'string',
-                title: this.props.intl.formatMessage(messages.emailTitle),
-                description: this.props.intl.formatMessage(
-                  messages.emailDescription,
-                ),
-              },
+  return (
+    <div id="page-register">
+      <Helmet title={intl.formatMessage(messages.register)} />
+      <Form
+        onSubmit={onSubmit}
+        title={intl.formatMessage(messages.title)}
+        error={errors || error}
+        loading={loading}
+        submitLabel={intl.formatMessage(messages.register)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['fullname', 'email'],
             },
-            required: ['fullname', 'email'],
-          }}
-        />
-      </div>
-    );
-  }
-}
+          ],
+          properties: {
+            fullname: {
+              type: 'string',
+              title: intl.formatMessage(messages.fullnameTitle),
+              description: intl.formatMessage(messages.fullnameDescription),
+            },
+            email: {
+              type: 'string',
+              title: intl.formatMessage(messages.emailTitle),
+              description: intl.formatMessage(messages.emailDescription),
+            },
+          },
+          required: ['fullname', 'email'],
+        }}
+      />
+    </div>
+  );
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state) => ({
-      loading: state.users.create.loading,
-      loaded: state.users.create.loaded,
-      error: state.users.create.error,
-    }),
-    { createUser },
-  ),
-)(Register);
+export default Register;

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

@@ -0,0 +1,49 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import RegisterComponent from './Register';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlRegister = injectIntl(RegisterComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        users: {
+          create: {
+            loading: false,
+            loaded: true,
+            ...args,
+          },
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlRegister />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  error: false,
+};
+
+export default {
+  title: 'Public components/Register',
+  component: RegisterComponent,
+
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+
+  argTypes: {},
+};