@plone/volto 19.0.0-alpha.35 → 19.0.0-alpha.37

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

@@ -3,11 +3,10 @@
  * @module components/manage/Widgets/TokenWidget
  */
 
-import React, { Component } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useSelector, useDispatch } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 import {
   getVocabFromHint,
   getVocabFromField,
@@ -48,192 +47,149 @@ const messages = defineMessages({
  * @class TokenWidget
  * @extends Component
  */
-class TokenWidget 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,
-    error: PropTypes.arrayOf(PropTypes.string),
-    getVocabulary: PropTypes.func.isRequired,
-    choices: PropTypes.arrayOf(PropTypes.object),
-    vocabLoading: PropTypes.bool,
-    vocabLoaded: PropTypes.bool,
-    items: PropTypes.shape({
-      vocabulary: PropTypes.object,
-    }),
-    widgetOptions: PropTypes.shape({
-      vocabulary: PropTypes.object,
-    }),
-    value: PropTypes.arrayOf(PropTypes.string),
-    onChange: PropTypes.func.isRequired,
-    wrapped: PropTypes.bool,
-    placeholder: PropTypes.string,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    items: {
-      vocabulary: null,
-    },
-    widgetOptions: {
-      vocabulary: null,
-    },
-    error: [],
-    choices: [],
-    value: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Actions
-   */
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (!this.props.choices?.length) {
-      this.props.getVocabulary({
-        vocabNameOrURL: this.props.vocabBaseUrl,
-        size: -1,
-        subrequest: this.props.lang,
-      });
+const TokenWidget = (props) => {
+  const {
+    id,
+    onChange,
+    value,
+    placeholder,
+    reactSelectCreateable,
+    isDisabled,
+    fieldSet,
+  } = props;
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const vocabBaseUrl =
+    getVocabFromHint(props) ||
+    getVocabFromField(props) ||
+    getVocabFromItems(props);
+
+  const lang = useSelector((state) => state.intl.locale);
+
+  const vocabState = useSelector((state) => {
+    if (!vocabBaseUrl) return null;
+    return state.vocabularies?.[vocabBaseUrl]?.subrequests?.[lang];
+  });
+
+  const choices = useMemo(() => {
+    if (vocabState?.items) {
+      return vocabState.items.map((item) => ({
+        label: item.label || item.value,
+        value: item.value,
+      }));
     }
-  }
+    return [];
+  }, [vocabState]);
 
-  componentDidUpdate() {
+  const vocabLoading = vocabState?.loading;
+  const vocabLoaded = vocabState?.loaded;
+
+  useEffect(() => {
     if (
-      !this.props.choices?.length &&
-      this.props.vocabLoading === undefined &&
-      !this.props.vocabLoaded
+      !choices?.length &&
+      vocabLoading === undefined &&
+      !vocabLoaded &&
+      vocabBaseUrl
     ) {
-      this.props.getVocabulary({
-        vocabNameOrURL: this.props.vocabBaseUrl,
-        size: -1,
-        subrequest: this.props.lang,
-      });
+      dispatch(
+        getVocabulary({
+          vocabNameOrURL: vocabBaseUrl,
+          size: -1,
+          subrequest: lang,
+        }),
+      );
     }
-  }
-
-  /**
-   * Handle the field change, store it in the local state and back to simple
-   * array of tokens for correct serialization
-   * @method handleChange
-   * @param {array} selectedOption The selected options (already aggregated).
-   * @returns {undefined}
-   */
-  handleChange(selectedOption) {
-    this.props.onChange(
-      this.props.id,
+  }, [
+    choices?.length,
+    vocabLoading,
+    vocabLoaded,
+    vocabBaseUrl,
+    lang,
+    dispatch,
+  ]);
+
+  const handleChange = (selectedOption) => {
+    onChange(
+      id,
       selectedOption ? selectedOption.map((item) => item.label) : null,
     );
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const selectedOption = this.props.value
-      ? this.props.value.map((item) => ({ label: item, value: item }))
-      : [];
-
-    const defaultOptions = (this.props.choices || [])
-      .filter(
-        (item) => !selectedOption.find(({ label }) => label === item.label),
-      )
-      .map((item) => ({
-        label: item.label || item.value,
-        value: item.value,
-      }));
-    const CreatableSelect = this.props.reactSelectCreateable.default;
-
-    return (
-      <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}
-          className="react-select-container"
-          classNamePrefix="react-select"
-          defaultOptions={defaultOptions}
-          options={defaultOptions}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{
-            MultiValueContainer,
-            ClearIndicator,
-            DropdownIndicator,
-            Option,
-          }}
-          isMulti
-          value={selectedOption || []}
-          onChange={this.handleChange}
-          placeholder={
-            this.props.placeholder ??
-            this.props.intl.formatMessage(messages.select)
-          }
-          noOptionsMessage={() =>
-            this.props.intl.formatMessage(messages.no_options)
-          }
-        />
-      </FormFieldWrapper>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  injectLazyLibs(['reactSelectCreateable']),
-  connect(
-    (state, props) => {
-      const vocabBaseUrl =
-        getVocabFromHint(props) ||
-        getVocabFromField(props) ||
-        getVocabFromItems(props);
-
-      const vocabState =
-        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
-
-      if (vocabState) {
-        return {
-          choices: vocabState.items
-            ? vocabState.items.map((item) => ({
-                label: item.label || item.value,
-                value: item.value,
-              }))
-            : [],
-          vocabLoading: vocabState.loading,
-          vocabLoaded: vocabState.loaded,
-          vocabBaseUrl,
-          lang: state.intl.locale,
-        };
-      }
-      return { vocabBaseUrl, lang: state.intl.locale };
-    },
-    { getVocabulary },
-  ),
-)(TokenWidget);
+  };
+
+  const selectedOption = value
+    ? value.map((item) => ({ label: item, value: item }))
+    : [];
+
+  const defaultOptions = (choices || [])
+    .filter((item) => !selectedOption.find(({ label }) => label === item.label))
+    .map((item) => ({
+      label: item.label || item.value,
+      value: item.value,
+    }));
+  const CreatableSelect = reactSelectCreateable.default;
+
+  return (
+    <FormFieldWrapper {...props}>
+      <CreatableSelect
+        id={`field-${id}`}
+        aria-labelledby={`fieldset-${fieldSet}-field-label-${id}`}
+        key={id}
+        menuShouldScrollIntoView={false}
+        isDisabled={isDisabled}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        defaultOptions={defaultOptions}
+        options={defaultOptions}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{
+          MultiValueContainer,
+          ClearIndicator,
+          DropdownIndicator,
+          Option,
+        }}
+        isMulti
+        value={selectedOption || []}
+        onChange={handleChange}
+        placeholder={placeholder ?? intl.formatMessage(messages.select)}
+        noOptionsMessage={() => intl.formatMessage(messages.no_options)}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+TokenWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  choices: PropTypes.arrayOf(PropTypes.object),
+  items: PropTypes.shape({
+    vocabulary: PropTypes.object,
+  }),
+  widgetOptions: PropTypes.shape({
+    vocabulary: PropTypes.object,
+  }),
+  value: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+
+TokenWidget.defaultProps = {
+  description: null,
+  required: false,
+  items: {
+    vocabulary: null,
+  },
+  widgetOptions: {
+    vocabulary: null,
+  },
+  error: [],
+  choices: [],
+  value: null,
+};
+
+export default injectLazyLibs(['reactSelectCreateable'])(TokenWidget);

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

@@ -4,6 +4,7 @@ import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
+import { CookiesProvider } from 'react-cookie';
 
 import { __test__ as App } from './App';
 
@@ -55,16 +56,18 @@ describe('App', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/blog/edit']}>
-          <App
-            location={{ pathname: '/blog/edit' }}
-            route={{
-              routes: '',
-            }}
-          >
-            <div />
-          </App>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/blog/edit']}>
+            <App
+              location={{ pathname: '/blog/edit' }}
+              route={{
+                routes: '',
+              }}
+            >
+              <div />
+            </App>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     const json = component.toJSON();

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

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import ContactForm from './ContactForm';
 
 vi.mock('../../manage/Toolbar/Toolbar', () => ({
@@ -29,10 +30,12 @@ describe('Contact form', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ContactForm />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ContactForm />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -57,10 +60,12 @@ describe('Contact form', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <ContactForm />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <ContactForm />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 import MultilingualRedirector from './MultilingualRedirector';
 
@@ -21,9 +22,11 @@ describe('MultilingualRedirector', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
-          <MultilingualRedirector pathname={'/'} />
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <MultilingualRedirector pathname={'/'} />
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     const json = component.toJSON();