ref: Creating popups with hook, fix translation keys passing

client/src/components/Card/ActionsStep.jsx

@@ -3,7 +3,6 @@ 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';
@@ -14,7 +13,7 @@ import TimerEditStep from '../TimerEditStep';
 import CardMoveStep from '../CardMoveStep';
 import DeleteStep from '../DeleteStep';
 
-import styles from './ActionsPopup.module.scss';
+import styles from './ActionsStep.module.scss';
 
 const StepTypes = {
   USERS: 'USERS',
@@ -158,11 +157,9 @@ const ActionsStep = React.memo(
         case StepTypes.DELETE:
           return (
             <DeleteStep
-              title={t('common.deleteCard', {
-                context: 'title',
-              })}
-              content={t('common.areYouSureYouWantToDeleteThisCard')}
-              buttonContent={t('action.deleteCard')}
+              title="common.deleteCard"
+              content="common.areYouSureYouWantToDeleteThisCard"
+              buttonContent="action.deleteCard"
               onConfirm={onDelete}
               onBack={handleBack}
             />
@@ -248,4 +245,4 @@ ActionsStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(ActionsStep);
+export default ActionsStep;

client/src/components/Card/Card.jsx

@@ -4,12 +4,13 @@ import classNames from 'classnames';
 import { Button, Icon } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';
+import { usePopup } from '../../lib/popup';
 
 import { startTimer, stopTimer } from '../../utils/timer';
 import Paths from '../../constants/Paths';
 import Tasks from './Tasks';
 import NameEdit from './NameEdit';
-import ActionsPopup from './ActionsPopup';
+import ActionsStep from './ActionsStep';
 import User from '../User';
 import Label from '../Label';
 import DueDate from '../DueDate';
@@ -83,6 +84,8 @@ const Card = React.memo(
       nameEdit.current.open();
     }, []);
 
+    const ActionsPopup = usePopup(ActionsStep);
+
     const contentNode = (
       <>
         {coverUrl && <img src={coverUrl} alt="" className={styles.cover} />}