ref: Creating popups with hook, fix translation keys passing

client/src/components/CardModal/Activities/ItemComment.jsx

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Comment } from 'semantic-ui-react';
+import { usePopup } from '../../../lib/popup';
 import { Markdown } from '../../../lib/custom-ui';
 
 import CommentEdit from './CommentEdit';
 import User from '../../User';
-import DeletePopup from '../../DeletePopup';
+import DeleteStep from '../../DeleteStep';
 
 import styles from './ItemComment.module.scss';
 
@@ -21,6 +22,8 @@ const ItemComment = React.memo(
       commentEdit.current.open();
     }, []);
 
+    const DeletePopup = usePopup(DeleteStep);
+
     return (
       <Comment>
         <span className={styles.user}>
@@ -50,11 +53,9 @@ const ItemComment = React.memo(
                     onClick={handleEditClick}
                   />
                   <DeletePopup
-                    title={t('common.deleteComment', {
-                      context: 'title',
-                    })}
-                    content={t('common.areYouSureYouWantToDeleteThisComment')}
-                    buttonContent={t('action.deleteComment')}
+                    title="common.deleteComment"
+                    content="common.areYouSureYouWantToDeleteThisComment"
+                    buttonContent="action.deleteComment"
                     onConfirm={onDelete}
                   >
                     <Comment.Action

client/src/components/CardModal/AttachmentAddStep.jsx

@@ -2,10 +2,9 @@ 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 { FilePicker, Popup } from '../../lib/custom-ui';
 
-import styles from './AttachmentAddPopup.module.scss';
+import styles from './AttachmentAddStep.module.scss';
 
 const AttachmentAddStep = React.memo(({ onCreate, onClose }) => {
   const [t] = useTranslation();
@@ -51,4 +50,4 @@ AttachmentAddStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(AttachmentAddStep);
+export default AttachmentAddStep;

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)}>

client/src/components/CardModal/CardModal.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, Grid, Icon, Modal } from 'semantic-ui-react';
+import { usePopup } from '../../lib/popup';
 import { Markdown } from '../../lib/custom-ui';
 
 import { startTimer, stopTimer } from '../../utils/timer';
@@ -11,18 +12,18 @@ import DescriptionEdit from './DescriptionEdit';
 import Tasks from './Tasks';
 import Attachments from './Attachments';
 import AttachmentAddZone from './AttachmentAddZone';
-import AttachmentAddPopup from './AttachmentAddPopup';
+import AttachmentAddStep from './AttachmentAddStep';
 import Activities from './Activities';
 import User from '../User';
 import Label from '../Label';
 import DueDate from '../DueDate';
 import Timer from '../Timer';
-import BoardMembershipsPopup from '../BoardMembershipsPopup';
-import LabelsPopup from '../LabelsPopup';
-import DueDateEditPopup from '../DueDateEditPopup';
-import TimerEditPopup from '../TimerEditPopup';
-import CardMovePopup from '../CardMovePopup';
-import DeletePopup from '../DeletePopup';
+import BoardMembershipsStep from '../BoardMembershipsStep';
+import LabelsStep from '../LabelsStep';
+import DueDateEditStep from '../DueDateEditStep';
+import TimerEditStep from '../TimerEditStep';
+import CardMoveStep from '../CardMoveStep';
+import DeleteStep from '../DeleteStep';
 
 import styles from './CardModal.module.scss';
 
@@ -155,6 +156,14 @@ const CardModal = React.memo(
       onClose();
     }, [onClose]);
 
+    const AttachmentAddPopup = usePopup(AttachmentAddStep);
+    const BoardMembershipsPopup = usePopup(BoardMembershipsStep);
+    const LabelsPopup = usePopup(LabelsStep);
+    const DueDateEditPopup = usePopup(DueDateEditStep);
+    const TimerEditPopup = usePopup(TimerEditStep);
+    const CardMovePopup = usePopup(CardMoveStep);
+    const DeletePopup = usePopup(DeleteStep);
+
     const userIds = users.map((user) => user.id);
     const labelIds = labels.map((label) => label.id);
 
@@ -482,11 +491,9 @@ const CardModal = React.memo(
                   </Button>
                 </CardMovePopup>
                 <DeletePopup
-                  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}
                 >
                   <Button fluid className={styles.actionButton}>

client/src/components/CardModal/Tasks/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',
@@ -30,11 +29,9 @@ const ActionsStep = React.memo(({ onNameEdit, onDelete, onClose }) => {
   if (step && step.type === StepTypes.DELETE) {
     return (
       <DeleteStep
-        title={t('common.deleteTask', {
-          context: 'title',
-        })}
-        content={t('common.areYouSureYouWantToDeleteThisTask')}
-        buttonContent={t('action.deleteTask')}
+        title="common.deleteTask"
+        content="common.areYouSureYouWantToDeleteThisTask"
+        buttonContent="action.deleteTask"
         onConfirm={onDelete}
         onBack={handleBack}
       />
@@ -72,4 +69,4 @@ ActionsStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(ActionsStep);
+export default ActionsStep;

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

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Draggable } from 'react-beautiful-dnd';
 import { Button, Checkbox, Icon } from 'semantic-ui-react';
+import { usePopup } from '../../../lib/popup';
 
 import NameEdit from './NameEdit';
-import ActionsPopup from './ActionsPopup';
+import ActionsStep from './ActionsStep';
 
 import styles from './Item.module.scss';
 
@@ -39,6 +40,8 @@ const Item = React.memo(
       nameEdit.current.open();
     }, []);
 
+    const ActionsPopup = usePopup(ActionsStep);
+
     return (
       <Draggable draggableId={id} index={index} isDragDisabled={!isPersisted || !canEdit}>
         {({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {