@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

package/src/components/manage/Preferences/PersonalInformation.jsx

@@ -1,14 +1,8 @@
-/**
- * Personal information component.
- * @module components/manage/Preferences/PersonalInformation
- */
-
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { injectIntl } from 'react-intl';
-import { withRouter } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 import { messages } from '@plone/volto/helpers';
@@ -16,117 +10,58 @@ import { Toast } from '@plone/volto/components';
 import { Form } from '@plone/volto/components/manage/Form';
 import { getUser, updateUser, getUserSchema } from '@plone/volto/actions';
 
-/**
- * PersonalInformation class.
- * @class PersonalInformation
- * @extends Component
- */
-class PersonalInformation extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    user: PropTypes.shape({
-      fullname: PropTypes.string,
-      email: PropTypes.string,
-      home_page: PropTypes.string,
-      location: PropTypes.string,
-    }).isRequired,
-    updateUser: PropTypes.func.isRequired,
-    getUser: PropTypes.func.isRequired,
-    userId: PropTypes.string.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    loading: PropTypes.bool,
-    closeMenu: PropTypes.func,
-    getUserSchema: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ChangePassword
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
+const PersonalInformation = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const user = useSelector((state) => state.users.user);
+  const userId = useSelector((state) =>
+    state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+  );
+  const loading = useSelector((state) => state.users.update.loading);
+  const userschema = useSelector((state) => state.userschema);
 
-  componentDidMount() {
-    this.props.getUser(this.props.userId);
-    this.props.getUserSchema();
-  }
+  useEffect(() => {
+    dispatch(getUser(userId));
+    dispatch(getUserSchema());
+  }, [dispatch, userId]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    // We don't want the user to change his login name/username or the roles
-    // from this form
-    // Backend will complain anyways, but we clean the data here before it does
+  const onSubmit = (data) => {
     delete data.id;
     delete data.username;
     delete data.roles;
-    this.props.updateUser(this.props.userId, data);
-    toast.success(
-      <Toast
-        success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.saved)}
-      />,
+    dispatch(updateUser(userId, data)).then(() =>
+      toast.success(
+        <Toast
+          success
+          title={intl.formatMessage(messages.success)}
+          content={intl.formatMessage(messages.saved)}
+        />,
+      ),
     );
-    if (this.props.closeMenu) this.props.closeMenu();
-  }
+    if (props.closeMenu) props.closeMenu();
+  };
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    if (this.props.closeMenu) this.props.closeMenu();
-    else this.props.history.goBack();
-  }
+  const onCancel = () => {
+    if (props.closeMenu) props.closeMenu();
+    else history.goBack();
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      this.props?.userschema?.loaded && (
-        <Form
-          formData={this.props.user}
-          schema={this.props?.userschema.userschema}
-          onSubmit={this.onSubmit}
-          onCancel={this.onCancel}
-          loading={this.props.loading}
-        />
-      )
-    );
-  }
-}
+  return (
+    userschema?.loaded && (
+      <Form
+        formData={user}
+        schema={userschema.userschema}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        loading={loading}
+      />
+    )
+  );
+};
+
+PersonalInformation.propTypes = {
+  closeMenu: PropTypes.func,
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      user: state.users.user,
-      userId: state.userSession.token
-        ? jwtDecode(state.userSession.token).sub
-        : '',
-      loaded: state.users.get.loaded,
-      loading: state.users.update.loading,
-      userschema: state.userschema,
-    }),
-    { getUser, updateUser, getUserSchema },
-  ),
-)(PersonalInformation);
+export default PersonalInformation;

package/src/components/manage/Preferences/PersonalPreferences.jsx

@@ -1,16 +1,10 @@
-/**
- * Personal preferences component.
- * @module components/manage/Preferences/PersonalPreferences
- */
-
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useDispatch } from 'react-redux';
 import { map, keys } from 'lodash';
-import { withCookies } from 'react-cookie';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
+import { compose } from 'redux';
+import { withCookies } from 'react-cookie';
 
 import { Toast } from '@plone/volto/components';
 import { Form } from '@plone/volto/components/manage/Form';
@@ -50,104 +44,56 @@ const messages = defineMessages({
   },
 });
 
-/**
- * PersonalPreferences class.
- * @class PersonalPreferences
- * @extends Component
- */
-class PersonalPreferences extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    changeLanguage: PropTypes.func.isRequired,
-    closeMenu: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs PersonalPreferences
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
+const PersonalPreferences = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { closeMenu } = props;
+  const onSubmit = (data) => {
     let language = data.language || 'en';
     if (config.settings.supportedLanguages.includes(language)) {
       const langFileName = toGettextLang(language);
       import(
         /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
       ).then((locale) => {
-        this.props.changeLanguage(language, locale.default);
+        dispatch(changeLanguage(language, locale.default));
       });
     }
-    toast.success(
-      <Toast success title={this.props.intl.formatMessage(messages.saved)} />,
-    );
-    this.props.closeMenu();
-  }
-
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.closeMenu();
-  }
+    toast.success(<Toast success title={intl.formatMessage(messages.saved)} />);
+    closeMenu();
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { cookies } = this.props;
-    return (
-      <Form
-        formData={{ language: cookies.get('I18N_LANGUAGE') || '' }}
-        schema={{
-          fieldsets: [
-            {
-              id: 'default',
-              title: this.props.intl.formatMessage(messages.default),
-              fields: ['language'],
-            },
-          ],
-          properties: {
-            language: {
-              description: this.props.intl.formatMessage(
-                messages.languageDescription,
-              ),
-              title: this.props.intl.formatMessage(messages.language),
-              type: 'string',
-              choices: map(keys(languages), (lang) => [lang, languages[lang]]),
-            },
+  const onCancel = () => {
+    closeMenu();
+  };
+  const { cookies } = props;
+  return (
+    <Form
+      formData={{ language: cookies.get('I18N_LANGUAGE') || '' }}
+      schema={{
+        fieldsets: [
+          {
+            id: 'default',
+            title: intl.formatMessage(messages.default),
+            fields: ['language'],
+          },
+        ],
+        properties: {
+          language: {
+            description: intl.formatMessage(messages.languageDescription),
+            title: intl.formatMessage(messages.language),
+            type: 'string',
+            choices: map(keys(languages), (lang) => [lang, languages[lang]]),
           },
-          required: [],
-        }}
-        onSubmit={this.onSubmit}
-        onCancel={this.onCancel}
-      />
-    );
-  }
-}
+        },
+        required: [],
+      }}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+    />
+  );
+};
 
-export default compose(
-  injectIntl,
-  withCookies,
-  connect(null, { changeLanguage }),
-)(PersonalPreferences);
+PersonalPreferences.propTypes = {
+  closeMenu: PropTypes.func.isRequired,
+};
+export default compose(withCookies)(PersonalPreferences);

package/src/components/manage/Preferences/PersonalPreferences.stories.jsx

@@ -0,0 +1,48 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import PersonalPreferencesComponent from './PersonalPreferences';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+const IntlPersonalPreferencesComponent = injectIntl(
+  PersonalPreferencesComponent,
+);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+        vocabularies: {
+          'plone.app.vocabularies.Keywords': {
+            items: [{ title: 'My item', value: 'myitem' }],
+            itemsTotal: 1,
+          },
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlPersonalPreferencesComponent
+        {...args}
+        location={{ pathname: '/blog' }}
+        closeMenu={() => {}}
+      />
+    </Wrapper>
+  );
+}
+
+export const PersonalPreferences = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/PersonalPreferences',
+  component: PersonalPreferences,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};