Add email and password change functionality for a current user, remove deep compare hooks

2025-12-24 01:11:41 +03:00 · 2019-10-18 08:06:34 +05:00
parent b53e5bf94c
commit 680d664279
67 changed files with 1232 additions and 267 deletions
--- a/client/src/components/UserPopup/UserPopup.jsx
+++ b/client/src/components/UserPopup/UserPopup.jsx
@@ -0,0 +1,185 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Menu } from 'semantic-ui-react';
+import { withPopup } from '../../lib/popup';
+import { Popup } from '../../lib/custom-ui';
+
+import { useSteps } from '../../hooks';
+import EditNameStep from './EditNameStep';
+import EditAvatarStep from './EditAvatarStep';
+import EditEmailStep from './EditEmailStep';
+import EditPasswordStep from './EditPasswordStep';
+
+import styles from './UserPopup.module.css';
+
+const StepTypes = {
+  EDIT_NAME: 'EDIT_NAME',
+  EDIT_AVATAR: 'EDIT_AVATAR',
+  EDIT_EMAIL: 'EDIT_EMAIL',
+  EDIT_PASSWORD: 'EDIT_PASSWORD',
+};
+
+const UserStep = React.memo(
+  ({
+    email,
+    name,
+    avatar,
+    isAvatarUploading,
+    emailUpdateForm,
+    passwordUpdateForm,
+    onUpdate,
+    onAvatarUpload,
+    onEmailUpdate,
+    onEmailUpdateMessageDismiss,
+    onPasswordUpdate,
+    onPasswordUpdateMessageDismiss,
+    onLogout,
+    onClose,
+  }) => {
+    const [t] = useTranslation();
+    const [step, openStep, handleBack] = useSteps();
+
+    const handleNameEditClick = useCallback(() => {
+      openStep(StepTypes.EDIT_NAME);
+    }, [openStep]);
+
+    const handleAvatarEditClick = useCallback(() => {
+      openStep(StepTypes.EDIT_AVATAR);
+    }, [openStep]);
+
+    const handleEmailEditClick = useCallback(() => {
+      openStep(StepTypes.EDIT_EMAIL);
+    }, [openStep]);
+
+    const handlePasswordEditClick = useCallback(() => {
+      openStep(StepTypes.EDIT_PASSWORD);
+    }, [openStep]);
+
+    const handleNameUpdate = useCallback(
+      (newName) => {
+        onUpdate({
+          name: newName,
+        });
+      },
+      [onUpdate],
+    );
+
+    const handleAvatarClear = useCallback(() => {
+      onUpdate({
+        avatar: null,
+      });
+    }, [onUpdate]);
+
+    if (step) {
+      switch (step.type) {
+        case StepTypes.EDIT_NAME:
+          return (
+            <EditNameStep
+              defaultValue={name}
+              onUpdate={handleNameUpdate}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
+        case StepTypes.EDIT_AVATAR:
+          return (
+            <EditAvatarStep
+              defaultValue={avatar}
+              name={name}
+              isUploading={isAvatarUploading}
+              onUpload={onAvatarUpload}
+              onClear={handleAvatarClear}
+              onBack={handleBack}
+            />
+          );
+        case StepTypes.EDIT_EMAIL:
+          return (
+            <EditEmailStep
+              defaultData={emailUpdateForm.data}
+              email={email}
+              isSubmitting={emailUpdateForm.isSubmitting}
+              error={emailUpdateForm.error}
+              onUpdate={onEmailUpdate}
+              onMessageDismiss={onEmailUpdateMessageDismiss}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
+        case StepTypes.EDIT_PASSWORD:
+          return (
+            <EditPasswordStep
+              defaultData={passwordUpdateForm.data}
+              isSubmitting={passwordUpdateForm.isSubmitting}
+              error={passwordUpdateForm.error}
+              onUpdate={onPasswordUpdate}
+              onMessageDismiss={onPasswordUpdateMessageDismiss}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
+        default:
+      }
+    }
+
+    return (
+      <>
+        <Popup.Header>{name}</Popup.Header>
+        <Popup.Content>
+          <Menu secondary vertical className={styles.menu}>
+            <Menu.Item className={styles.menuItem} onClick={handleNameEditClick}>
+              {t('action.editName', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleAvatarEditClick}>
+              {t('action.editAvatar', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleEmailEditClick}>
+              {t('action.editEmail', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handlePasswordEditClick}>
+              {t('action.editPassword', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={onLogout}>
+              {t('action.logOut', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          </Menu>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+UserStep.propTypes = {
+  email: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  avatar: PropTypes.string,
+  isAvatarUploading: PropTypes.bool.isRequired,
+  /* eslint-disable react/forbid-prop-types */
+  emailUpdateForm: PropTypes.object.isRequired,
+  passwordUpdateForm: PropTypes.object.isRequired,
+  /* eslint-enable react/forbid-prop-types */
+  onUpdate: PropTypes.func.isRequired,
+  onAvatarUpload: PropTypes.func.isRequired,
+  onEmailUpdate: PropTypes.func.isRequired,
+  onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
+  onPasswordUpdate: PropTypes.func.isRequired,
+  onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+UserStep.defaultProps = {
+  avatar: undefined,
+};
+
+export default withPopup(UserStep);