ref: Creating popups with hook, fix translation keys passing

client/src/components/UserStep/UserStep.jsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Menu } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import styles from './UserStep.module.scss';
+
+const UserStep = React.memo(({ isLogouting, onSettingsClick, onLogout, onClose }) => {
+  const [t] = useTranslation();
+
+  const handleSettingsClick = useCallback(() => {
+    onSettingsClick();
+    onClose();
+  }, [onSettingsClick, onClose]);
+
+  let logoutMenuItemProps;
+  if (isLogouting) {
+    logoutMenuItemProps = {
+      as: Button,
+      fluid: true,
+      basic: true,
+      loading: true,
+      disabled: true,
+    };
+  }
+
+  return (
+    <>
+      <Popup.Header>
+        {t('common.userActions', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Menu secondary vertical className={styles.menu}>
+          <Menu.Item className={styles.menuItem} onClick={handleSettingsClick}>
+            {t('common.settings', {
+              context: 'title',
+            })}
+          </Menu.Item>
+          <Menu.Item
+            {...logoutMenuItemProps} // eslint-disable-line react/jsx-props-no-spreading
+            className={styles.menuItem}
+            onClick={onLogout}
+          >
+            {t('action.logOut', {
+              context: 'title',
+            })}
+          </Menu.Item>
+        </Menu>
+      </Popup.Content>
+    </>
+  );
+});
+
+UserStep.propTypes = {
+  isLogouting: PropTypes.bool.isRequired,
+  onSettingsClick: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default UserStep;

client/src/components/UserStep/UserStep.module.scss

@@ -0,0 +1,11 @@
+:global(#app) {
+  .menu {
+    margin: -7px -12px -5px;
+    width: calc(100% + 24px);
+  }
+
+  .menuItem {
+    margin: 0;
+    padding-left: 14px;
+  }
+}

client/src/components/UserStep/index.js

@@ -0,0 +1,3 @@
+import UserStep from './UserStep';
+
+export default UserStep;