ref: Creating popups with hook, fix translation keys passing

client/src/components/CardModal/Attachments/EditStep.jsx

@@ -3,13 +3,12 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
-import { withPopup } from '../../../lib/popup';
 import { Input, Popup } from '../../../lib/custom-ui';
 
 import { useForm, useSteps } from '../../../hooks';
 import DeleteStep from '../../DeleteStep';
 
-import styles from './EditPopup.module.scss';
+import styles from './EditStep.module.scss';
 
 const StepTypes = {
   DELETE: 'DELETE',
@@ -56,11 +55,9 @@ const EditStep = React.memo(({ defaultData, onUpdate, onDelete, onClose }) => {
   if (step && step.type === StepTypes.DELETE) {
     return (
       <DeleteStep
-        title={t('common.deleteAttachment', {
-          context: 'title',
-        })}
-        content={t('common.areYouSureYouWantToDeleteThisAttachment')}
-        buttonContent={t('action.deleteAttachment')}
+        title="common.deleteAttachment"
+        content="common.areYouSureYouWantToDeleteThisAttachment"
+        buttonContent="action.deleteAttachment"
         onConfirm={onDelete}
         onBack={handleBack}
       />
@@ -104,4 +101,4 @@ EditStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(EditStep);
+export default EditStep;

client/src/components/CardModal/Attachments/Item.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, Icon, Label, Loader } from 'semantic-ui-react';
+import { usePopup } from '../../../lib/popup';
 
-import EditPopup from './EditPopup';
+import EditStep from './EditStep';
 
 import styles from './Item.module.scss';
 
@@ -49,6 +50,8 @@ const Item = React.forwardRef(
       [isCover, onCoverSelect, onCoverDeselect],
     );
 
+    const EditPopup = usePopup(EditStep);
+
     if (!isPersisted) {
       return (
         <div className={classNames(styles.wrapper, styles.wrapperSubmitting)}>