@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

package/src/components/manage/Controlpanels/Users/RenderUsers.jsx

@@ -1,10 +1,11 @@
 /**
- * Users controlpanel user.
- * @module components/manage/Controlpanels/UsersControlpanelUser
+ * RenderUsers component.
+ * @module components/manage/Controlpanels/Users/RenderUsers
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import editSVG from '@plone/volto/icons/editing.svg';
@@ -13,199 +14,179 @@ import Toast from '@plone/volto/components/manage/Toast/Toast';
 import { ModalForm } from '@plone/volto/components/manage/Form';
 import { updateUser } from '@plone/volto/actions/users/users';
 import ploneSVG from '@plone/volto/icons/plone.svg';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
 import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 import { canAssignRole } from '@plone/volto/helpers/User/User';
 import { toast } from 'react-toastify';
 
 /**
- * UsersControlpanelUser class.
- * @class UsersControlpanelUser
- * @extends Component
+ * RenderUsers functional component.
+ * @function RenderUsers
  */
-class RenderUsers extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    user: PropTypes.shape({
-      username: PropTypes.string,
-      fullname: PropTypes.string,
-      roles: PropTypes.arrayOf(PropTypes.string),
-    }).isRequired,
-    roles: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string,
-      }),
-    ).isRequired,
-    onDelete: PropTypes.func.isRequired,
-    isUserManager: PropTypes.bool.isRequired,
-  };
+const RenderUsers = (props) => {
+  const [user, setUser] = useState({});
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Sharing
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      user: {},
-    };
-    this.onChange = this.onChange.bind(this);
-    this.onEditUserError = this.onEditUserError.bind(this);
-    this.onEditUserSubmit = this.onEditUserSubmit.bind(this);
-  }
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const updateRequest = useSelector((state) => state.users?.update);
+
+  const {
+    user: propsUser,
+    listUsers,
+    updateUser: updateUserRole,
+    isUserManager,
+    roles,
+    inheritedRole,
+    userschema,
+    onDelete,
+  } = props;
+
+  // Use dispatch to call updateUser action
+  const updateUserData = (userId, userData) => {
+    dispatch(updateUser(userId, userData))
+      .then(() => {
+        // Handle success
+        setUser({});
+        if (listUsers) {
+          listUsers();
+        }
+        toast.success(
+          <Toast
+            success
+            title={intl.formatMessage(messages.success)}
+            content={intl.formatMessage(messages.updateUserSuccess)}
+          />,
+        );
+      })
+      .catch(() => {
+        // Handle error
+        toast.error(
+          <Toast
+            error
+            title={intl.formatMessage(messages.error)}
+            content={intl.formatMessage(messages.thereWereSomeErrors)}
+          />,
+        );
+      });
+  };
 
   /**
    * @param {*} event
    * @param {*} { value }
-   * @memberof UsersControlpanelUser
    */
+  const onChange = (_event, { value }) => {
+    const [userId, role] = value.split('&role=');
+    updateUserRole(userId, role);
+  };
 
-  onChange(event, { value }) {
-    const [user, role] = value.split('&role=');
-    this.props.updateUser(user, role);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (
-      prevProps.updateRequest.loading &&
-      this.props.updateRequest.loaded &&
-      this.state?.user?.id === this.props?.user?.id
-    ) {
-      this.setState({ user: {} });
-      this.props.listUsers();
-      return toast.success(
-        <Toast
-          success
-          title={this.props.intl.formatMessage(messages.success)}
-          content={this.props.intl.formatMessage(messages.updateUserSuccess)}
-        />,
-      );
-    }
-  }
-
-  onEditUserSubmit(data, callback) {
+  const onEditUserSubmit = (data) => {
     // Do not handle groups and roles in this form
     delete data.groups;
     delete data.roles;
-    this.props.updateUserData(data.id, data);
-  }
-
-  onEditUserError() {
-    return toast.error(
-      <Toast
-        error
-        title={this.props.intl.formatMessage(messages.error)}
-        content={this.props.intl.formatMessage(
-          messages.addUserFormPasswordAndSendPasswordTogetherNotAllowed,
-        )}
-      />,
-    );
-  }
+    updateUserData(data.id, data);
+  };
 
-  onClickEdit(props) {
-    const { formData } = props;
-    this.setState({ user: { ...formData } });
-  }
+  const onClickEdit = (formProps) => {
+    const { formData } = formProps;
+    setUser({ ...formData });
+  };
 
-  canDeleteUser() {
-    if (this.props.isUserManager) return true;
-    return !this.props.user.roles.includes('Manager');
-  }
+  const canDeleteUser = () => {
+    if (isUserManager) return true;
+    return !propsUser.roles.includes('Manager');
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Table.Row key={this.props.user.username}>
-        <Table.Cell className="fullname">
-          {this.props.user.fullname
-            ? this.props.user.fullname
-            : this.props.user.username}{' '}
-          ({this.props.user.username})
+  return (
+    <Table.Row key={propsUser.username}>
+      <Table.Cell className="fullname">
+        {propsUser.fullname ? propsUser.fullname : propsUser.username} (
+        {propsUser.username})
+      </Table.Cell>
+      {roles.map((role) => (
+        <Table.Cell key={role.id}>
+          {inheritedRole && inheritedRole.includes(role.id) ? (
+            <Icon
+              name={ploneSVG}
+              size="20px"
+              color="#007EB1"
+              title={'plone-svg'}
+            />
+          ) : (
+            <Checkbox
+              checked={propsUser.roles.includes(role.id)}
+              onChange={onChange}
+              value={`${propsUser.id}&role=${role.id}`}
+              disabled={!canAssignRole(isUserManager, role)}
+            />
+          )}
         </Table.Cell>
-        {this.props.roles.map((role) => (
-          <Table.Cell key={role.id}>
-            {this.props.inheritedRole &&
-            this.props.inheritedRole.includes(role.id) ? (
-              <Icon
-                name={ploneSVG}
-                size="20px"
-                color="#007EB1"
-                title={'plone-svg'}
-              />
-            ) : (
-              <Checkbox
-                checked={this.props.user.roles.includes(role.id)}
-                onChange={this.onChange}
-                value={`${this.props.user.id}&role=${role.id}`}
-                disabled={!canAssignRole(this.props.isUserManager, role)}
-              />
-            )}
-          </Table.Cell>
-        ))}
-        <Table.Cell textAlign="right">
-          {this.canDeleteUser() && (
-            <Dropdown icon="ellipsis horizontal">
-              <Dropdown.Menu className="left">
-                {this.props.userschema && (
-                  <Dropdown.Item
-                    id="edit-user-button"
-                    onClick={() => {
-                      this.onClickEdit({ formData: this.props.user });
-                    }}
-                    value={this.props.user['@id']}
-                  >
-                    <Icon name={editSVG} size="15px" />
-                    <FormattedMessage id="Edit" defaultMessage="Edit" />
-                  </Dropdown.Item>
-                )}
+      ))}
+      <Table.Cell textAlign="right">
+        {canDeleteUser() && (
+          <Dropdown icon="ellipsis horizontal">
+            <Dropdown.Menu className="left">
+              {userschema && (
                 <Dropdown.Item
-                  id="delete-user-button"
-                  onClick={this.props.onDelete}
-                  value={this.props.user['@id']}
+                  id="edit-user-button"
+                  onClick={() => {
+                    onClickEdit({ formData: propsUser });
+                  }}
+                  value={propsUser['@id']}
                 >
-                  <Icon name={trashSVG} size="15px" />
-                  <FormattedMessage id="Delete" defaultMessage="Delete" />
+                  <Icon name={editSVG} size="15px" />
+                  <FormattedMessage id="Edit" defaultMessage="Edit" />
                 </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
-          )}
-        </Table.Cell>
-        {Object.keys(this.state.user).length > 0 &&
-          this.props.userschema.loaded && (
-            <ModalForm
-              className="modal"
-              onSubmit={this.onEditUserSubmit}
-              submitError={this.state.editUserError}
-              formData={this.state.user}
-              onCancel={() => this.setState({ user: {} })}
-              title={this.props.intl.formatMessage(
-                messages.updateUserFormTitle,
               )}
-              loading={this.props.updateRequest.loading}
-              schema={this.props.userschema.userschema}
-            />
-          )}
-      </Table.Row>
-    );
-  }
-}
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      updateRequest: state.users?.update,
+              <Dropdown.Item
+                id="delete-user-button"
+                onClick={onDelete}
+                value={propsUser['@id']}
+              >
+                <Icon name={trashSVG} size="15px" />
+                <FormattedMessage id="Delete" defaultMessage="Delete" />
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+      </Table.Cell>
+      {Object.keys(user).length > 0 && userschema.loaded && (
+        <ModalForm
+          className="modal"
+          onSubmit={onEditUserSubmit}
+          submitError={user.editUserError}
+          formData={user}
+          onCancel={() => setUser({})}
+          title={intl.formatMessage(messages.updateUserFormTitle)}
+          loading={updateRequest.loading}
+          schema={userschema.userschema}
+        />
+      )}
+    </Table.Row>
+  );
+};
+
+// PropTypes to the component
+RenderUsers.propTypes = {
+  user: PropTypes.shape({
+    id: PropTypes.string,
+    username: PropTypes.string,
+    fullname: PropTypes.string,
+    roles: PropTypes.arrayOf(PropTypes.string),
+    '@id': PropTypes.string,
+  }).isRequired,
+  roles: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
     }),
-    { updateUserData: updateUser },
-  ),
-)(RenderUsers);
+  ).isRequired,
+  onDelete: PropTypes.func.isRequired,
+  isUserManager: PropTypes.bool.isRequired,
+  listUsers: PropTypes.func,
+  updateUser: PropTypes.func.isRequired,
+  inheritedRole: PropTypes.arrayOf(PropTypes.string),
+  userschema: PropTypes.shape({
+    loaded: PropTypes.bool,
+    userschema: PropTypes.object,
+  }),
+};
+
+export default RenderUsers;