ref: Creating popups with hook, fix translation keys passing

client/src/components/Memberships/ActionsStep.jsx

@@ -3,13 +3,12 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { withPopup } from '../../lib/popup';
 
 import { useSteps } from '../../hooks';
 import User from '../User';
 import DeleteStep from '../DeleteStep';
 
-import styles from './ActionsPopup.module.scss';
+import styles from './ActionsStep.module.scss';
 
 const StepTypes = {
   EDIT_PERMISSIONS: 'EDIT_PERMISSIONS',
@@ -73,20 +72,15 @@ const ActionsStep = React.memo(
         case StepTypes.DELETE:
           return (
             <DeleteStep
-              title={t(
-                membership.user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle,
-                {
-                  context: 'title',
-                },
-              )}
-              content={t(
-                membership.user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent,
-              )}
-              buttonContent={t(
+              title={membership.user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle}
+              content={
+                membership.user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent
+              }
+              buttonContent={
                 membership.user.isCurrent
                   ? leaveConfirmationButtonContent
-                  : deleteConfirmationButtonContent,
-              )}
+                  : deleteConfirmationButtonContent
+              }
               onConfirm={onDelete}
               onBack={handleBack}
             />
@@ -165,4 +159,4 @@ ActionsStep.defaultProps = {
   onUpdate: undefined,
 };
 
-export default withPopup(ActionsStep);
+export default ActionsStep;

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

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

client/src/components/Memberships/AddStep/AddStep.jsx

@@ -1,13 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { withPopup } from '../../../lib/popup';
 import { Input, Popup } from '../../../lib/custom-ui';
 
 import { useField, useSteps } from '../../../hooks';
 import UserItem from './UserItem';
 
-import styles from './AddPopup.module.scss';
+import styles from './AddStep.module.scss';
 
 const StepTypes = {
   SELECT_PERMISSIONS: 'SELECT_PERMISSIONS',
@@ -143,4 +142,4 @@ AddStep.defaultProps = {
   title: 'common.addMember',
 };
 
-export default withPopup(AddStep);
+export default AddStep;

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

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

client/src/components/Memberships/Memberships.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'semantic-ui-react';
+import { usePopup } from '../../lib/popup';
 
-import AddPopup from './AddPopup';
-import ActionsPopup from './ActionsPopup';
+import AddStep from './AddStep';
+import ActionsStep from './ActionsStep';
 import User from '../User';
 
 import styles from './Memberships.module.scss';
@@ -28,6 +29,9 @@ const Memberships = React.memo(
     onUpdate,
     onDelete,
   }) => {
+    const AddPopup = usePopup(AddStep);
+    const ActionsPopup = usePopup(ActionsStep);
+
     return (
       <>
         <span className={styles.users}>