ref: Creating popups with hook, fix translation keys passing

client/src/components/BoardActions/Filters.jsx

@@ -1,11 +1,12 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { usePopup } from '../../lib/popup';
 
 import User from '../User';
 import Label from '../Label';
-import BoardMembershipsPopup from '../BoardMembershipsPopup';
-import LabelsPopup from '../LabelsPopup';
+import BoardMembershipsStep from '../BoardMembershipsStep';
+import LabelsStep from '../LabelsStep';
 
 import styles from './Filters.module.scss';
 
@@ -41,15 +42,16 @@ const Filters = React.memo(
       [onLabelRemove],
     );
 
+    const BoardMembershipsPopup = usePopup(BoardMembershipsStep);
+    const LabelsPopup = usePopup(LabelsStep);
+
     return (
       <>
         <span className={styles.filter}>
           <BoardMembershipsPopup
             items={allBoardMemberships}
             currentUserIds={users.map((user) => user.id)}
-            title={t('common.filterByMembers', {
-              context: 'title',
-            })}
+            title="common.filterByMembers"
             onUserSelect={onUserAdd}
             onUserDeselect={onUserRemove}
           >
@@ -73,9 +75,7 @@ const Filters = React.memo(
           <LabelsPopup
             items={allLabels}
             currentIds={labels.map((label) => label.id)}
-            title={t('common.filterByLabels', {
-              context: 'title',
-            })}
+            title="common.filterByLabels"
             canEdit={canEdit}
             onSelect={onLabelAdd}
             onDeselect={onLabelRemove}