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

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

@@ -1,25 +1,16 @@
-/**
- * Change password component.
- * @module components/manage/Preferences/ChangePassword
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link, withRouter } from 'react-router-dom';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
-import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 
-import { Icon, Toast, Toolbar } from '@plone/volto/components';
-import { Form } from '@plone/volto/components/manage/Form';
+import { Helmet } from '@plone/volto/helpers';
+import { useClient } from '@plone/volto/hooks';
+import { Form, Icon, Toast, Toolbar } from '@plone/volto/components';
 import { updatePassword } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
-
 import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
@@ -70,169 +61,100 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ChangePassword class.
- * @class ChangePassword
- * @extends Component
- */
-class ChangePassword extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    loading: PropTypes.bool.isRequired,
-    updatePassword: PropTypes.func.isRequired,
-    pathname: PropTypes.string.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);
-    this.state = { isClient: false };
-  }
+const ChangePassword = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const isClient = useClient();
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.setState({ isClient: true });
-  }
+  const userId = useSelector(
+    (state) =>
+      state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+    shallowEqual,
+  );
+  const loading = useSelector((state) => state.users.update_password.loading);
+  const { pathname } = useLocation();
+  const history = useHistory();
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
+  const onSubmit = (data) => {
     if (data.newPassword === data.newPasswordRepeat) {
-      this.props.updatePassword(
-        this.props.userId,
-        data.oldPassword,
-        data.newPassword,
-      );
-      toast.success(
-        <Toast
-          success
-          title={this.props.intl.formatMessage(messages.success)}
-          content={this.props.intl.formatMessage(messages.saved)}
-        />,
+      dispatch(updatePassword(userId, data.oldPassword, data.newPassword)).then(
+        () => {
+          toast.success(
+            <Toast
+              success
+              title={intl.formatMessage(messages.success)}
+              content={intl.formatMessage(messages.saved)}
+            />,
+          );
+        },
       );
     }
-  }
+  };
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.goBack();
-  }
+  const onCancel = () => {
+    history.goBack();
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Container id="page-change-password">
-        <Helmet
-          title={this.props.intl.formatMessage(messages.changePassword)}
-        />
-        <Form
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
-              },
-            ],
-            properties: {
-              oldPassword: {
-                description: this.props.intl.formatMessage(
-                  messages.oldPasswordDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.oldPasswordTitle),
-                type: 'string',
-                widget: 'password',
-              },
-              newPassword: {
-                description: this.props.intl.formatMessage(
-                  messages.newPasswordDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.newPasswordTitle),
-                type: 'string',
-                widget: 'password',
-              },
-              newPasswordRepeat: {
-                description: this.props.intl.formatMessage(
-                  messages.newPasswordRepeatDescription,
-                ),
-                title: this.props.intl.formatMessage(
-                  messages.newPasswordRepeatTitle,
-                ),
-                type: 'string',
-                widget: 'password',
-              },
+  return (
+    <Container id="page-change-password">
+      <Helmet title={intl.formatMessage(messages.changePassword)} />
+      <Form
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
             },
-            required: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
-          }}
-          onSubmit={this.onSubmit}
-          onCancel={this.onCancel}
-          loading={this.props.loading}
-        />
-        {this.state.isClient &&
-          createPortal(
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <Link
-                  to={`${getBaseUrl(this.props.pathname)}`}
-                  className="item"
-                >
-                  <Icon
-                    name={backSVG}
-                    className="contents circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.back)}
-                  />
-                </Link>
-              }
-            />,
-            document.getElementById('toolbar'),
-          )}
-      </Container>
-    );
-  }
-}
+          ],
+          properties: {
+            oldPassword: {
+              description: intl.formatMessage(messages.oldPasswordDescription),
+              title: intl.formatMessage(messages.oldPasswordTitle),
+              type: 'string',
+              widget: 'password',
+            },
+            newPassword: {
+              description: intl.formatMessage(messages.newPasswordDescription),
+              title: intl.formatMessage(messages.newPasswordTitle),
+              type: 'string',
+              widget: 'password',
+            },
+            newPasswordRepeat: {
+              description: intl.formatMessage(
+                messages.newPasswordRepeatDescription,
+              ),
+              title: intl.formatMessage(messages.newPasswordRepeatTitle),
+              type: 'string',
+              widget: 'password',
+            },
+          },
+          required: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
+        }}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        loading={loading}
+      />
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to={`${getBaseUrl(pathname)}`} className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />,
+          document.getElementById('toolbar'),
+        )}
+    </Container>
+  );
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      userId: state.userSession.token
-        ? jwtDecode(state.userSession.token).sub
-        : '',
-      loading: state.users.update_password.loading,
-      pathname: props.location.pathname,
-    }),
-    { updatePassword },
-  ),
-)(ChangePassword);
+export default ChangePassword;

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

@@ -0,0 +1,41 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ChangePasswordComponent from './ChangePassword';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+const IntlChangePasswordComponent = injectIntl(ChangePasswordComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+        users: {
+          update_password: {
+            loading: false,
+          },
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlChangePasswordComponent {...args} location={{ pathname: '/blog' }} />
+    </Wrapper>
+  );
+}
+
+export const ChangePassword = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/ChangePassword',
+  component: ChangePassword,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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