Initial commit

client/src/components/Header/UserPopup/UserPopup.jsx

@@ -0,0 +1,116 @@
+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 styles from './UserPopup.module.css';
+
+const StepTypes = {
+  EDIT_NAME: 'EDIT_NAME',
+  EDIT_AVATAR: 'EDIT_AVATAR',
+};
+
+const UserStep = React.memo(
+  ({
+    name, avatar, isAvatarUploading, onUpdate, onAvatarUpload, 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 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}
+            />
+          );
+        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={onLogout}>
+              {t('action.logOut', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          </Menu>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+UserStep.propTypes = {
+  name: PropTypes.string.isRequired,
+  avatar: PropTypes.string,
+  isAvatarUploading: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onAvatarUpload: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+UserStep.defaultProps = {
+  avatar: undefined,
+};
+
+export default withPopup(UserStep);