ref: Creating popups with hook, fix translation keys passing

client/src/components/Boards/AddPopup/index.js

@@ -1,3 +0,0 @@
-import AddPopup from './AddPopup';
-
-export default AddPopup;

client/src/components/Boards/AddStep/AddStep.jsx

@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Icon } from 'semantic-ui-react';
 import { useDidUpdate, useToggle } from '../../../lib/hooks';
-import { withPopup } from '../../../lib/popup';
 import { Input, Popup } from '../../../lib/custom-ui';
 
 import { useForm, useSteps } from '../../../hooks';
 import ImportStep from './ImportStep';
 
-import styles from './AddPopup.module.scss';
+import styles from './AddStep.module.scss';
 
 const StepTypes = {
   IMPORT: 'IMPORT',
@@ -114,4 +113,4 @@ AddStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(AddStep);
+export default AddStep;

client/src/components/Boards/AddStep/index.js

@@ -0,0 +1,3 @@
+import AddStep from './AddStep';
+
+export default AddStep;

client/src/components/Boards/Boards.jsx

@@ -5,12 +5,12 @@ import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { Button, Icon } from 'semantic-ui-react';
-import { closePopup } from '../../lib/popup';
+import { closePopup, usePopup } from '../../lib/popup';
 
 import Paths from '../../constants/Paths';
 import DroppableTypes from '../../constants/DroppableTypes';
-import AddPopup from './AddPopup';
-import EditPopup from './EditPopup';
+import AddStep from './AddStep';
+import EditStep from './EditStep';
 
 import styles from './Boards.module.scss';
 
@@ -52,6 +52,9 @@ const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMo
     [onDelete],
   );
 
+  const AddPopup = usePopup(AddStep);
+  const EditPopup = usePopup(EditStep);
+
   const itemsNode = items.map((item, index) => (
     <Draggable
       key={item.id}

client/src/components/Boards/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.deleteBoard', {
-          context: 'title',
-        })}
-        content={t('common.areYouSureYouWantToDeleteThisBoard')}
-        buttonContent={t('action.deleteBoard')}
+        title="common.deleteBoard"
+        content="common.areYouSureYouWantToDeleteThisBoard"
+        buttonContent="action.deleteBoard"
         onConfirm={onDelete}
         onBack={handleBack}
       />
@@ -104,4 +101,4 @@ EditStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(EditStep);
+export default EditStep;