ref: Creating popups with hook, fix translation keys passing

client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -2,14 +2,15 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Dropdown, Header, Tab } from 'semantic-ui-react';
+import { usePopup } from '../../../lib/popup';
 
 import locales from '../../../locales';
-import AvatarEditPopup from './AvatarEditPopup';
+import AvatarEditStep from './AvatarEditStep';
 import User from '../../User';
 import UserInformationEdit from '../../UserInformationEdit';
-import UserUsernameEditPopup from '../../UserUsernameEditPopup';
-import UserEmailEditPopup from '../../UserEmailEditPopup';
-import UserPasswordEditPopup from '../../UserPasswordEditPopup';
+import UserUsernameEditStep from '../../UserUsernameEditStep';
+import UserEmailEditStep from '../../UserEmailEditStep';
+import UserPasswordEditStep from '../../UserPasswordEditStep';
 
 import styles from './AccountPane.module.scss';
 
@@ -51,6 +52,11 @@ const AccountPane = React.memo(
       [onLanguageUpdate],
     );
 
+    const AvatarEditPopup = usePopup(AvatarEditStep);
+    const UserUsernameEditPopup = usePopup(UserUsernameEditStep);
+    const UserEmailEditPopup = usePopup(UserEmailEditStep);
+    const UserPasswordEditPopup = usePopup(UserPasswordEditStep);
+
     return (
       <Tab.Pane attached={false} className={styles.wrapper}>
         <AvatarEditPopup

client/src/components/UserSettingsModal/AccountPane/AvatarEditStep.jsx

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { withPopup } from '../../../lib/popup';
 import { FilePicker, Popup } from '../../../lib/custom-ui';
 
-import styles from './AvatarEditPopup.module.scss';
+import styles from './AvatarEditStep.module.scss';
 
 const AvatarEditStep = React.memo(({ defaultValue, onUpdate, onDelete, onClose }) => {
   const [t] = useTranslation();
@@ -68,4 +67,4 @@ AvatarEditStep.defaultProps = {
   defaultValue: undefined,
 };
 
-export default withPopup(AvatarEditStep);
+export default AvatarEditStep;