ref: Creating popups with hook, fix translation keys passing

client/src/components/List/ActionsStep.jsx

@@ -2,13 +2,12 @@ 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 DeleteStep from '../DeleteStep';
 
-import styles from './ActionsPopup.module.scss';
+import styles from './ActionsStep.module.scss';
 
 const StepTypes = {
   DELETE: 'DELETE',
@@ -35,11 +34,9 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
   if (step && step.type === StepTypes.DELETE) {
     return (
       <DeleteStep
-        title={t('common.deleteList', {
-          context: 'title',
-        })}
-        content={t('common.areYouSureYouWantToDeleteThisList')}
-        buttonContent={t('action.deleteList')}
+        title="common.deleteList"
+        content="common.areYouSureYouWantToDeleteThisList"
+        buttonContent="action.deleteList"
         onConfirm={onDelete}
         onBack={handleBack}
       />
@@ -83,4 +80,4 @@ ActionsStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(ActionsStep);
+export default ActionsStep;

client/src/components/List/List.jsx

@@ -4,12 +4,13 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import { Button, Icon } from 'semantic-ui-react';
+import { usePopup } from '../../lib/popup';
 
 import DroppableTypes from '../../constants/DroppableTypes';
 import CardContainer from '../../containers/CardContainer';
 import NameEdit from './NameEdit';
 import CardAdd from './CardAdd';
-import ActionsPopup from './ActionsPopup';
+import ActionsStep from './ActionsStep';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
 
 import styles from './List.module.scss';
@@ -59,6 +60,8 @@ const List = React.memo(
       }
     }, [cardIds, isAddCardOpened]);
 
+    const ActionsPopup = usePopup(ActionsStep);
+
     const cardsNode = (
       <Droppable
         droppableId={`list:${id}`}