fix(TDOPS-1186): useTranslation (#5029)

* TDOPS-1186: useTranslation * TDOPS-1186: changeset
Talend · Dec 4, 2023 · 38dad22 · 38dad22
1 parent c0cd9db
commit 38dad22
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/.changeset/curvy-monkeys-act.md b/.changeset/curvy-monkeys-act.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': patch
+---
+
+Fix translation of BadgeCheckboxesForm
diff --git a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js
@@ -1,9 +1,12 @@
 import { useMemo } from 'react';
+
 import PropTypes from 'prop-types';
+
 import Badge from '@talend/react-components/lib/Badge';
-import { BadgeCheckboxesForm } from './BadgeCheckboxesForm.component';
-import { BadgeFaceted } from '../BadgeFaceted';
+
 import { operatorPropTypes, operatorsPropTypes } from '../../facetedSearch.propTypes';
+import { BadgeFaceted } from '../BadgeFaceted';
+import { BadgeCheckboxesForm } from './BadgeCheckboxesForm.component';
 
 const getSelectBadgeLabel = (value, t) => {
 	const labelAll = t('FACETED_SEARCH_VALUE_ALL', { defaultValue: 'All' });
@@ -73,7 +76,6 @@ export const BadgeCheckboxes = ({
 					feature={category || label}
 					filterBarPlaceholder={filterBarPlaceholder}
 					allSelector={allSelector}
-					t={t}
 					{...rest}
 				/>
 			)}

diff --git a/...ges/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxesForm.component.js b/...ges/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxesForm.component.js
@@ -1,15 +1,21 @@
 /* eslint-disable jsx-a11y/no-autofocus */
-import { Fragment, useState, useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
+import { Fragment, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import get from 'lodash/get';
+import PropTypes from 'prop-types';
+
+import { Rich } from '@talend/react-components';
 import { Action } from '@talend/react-components/lib/Actions';
 import FilterBar from '@talend/react-components/lib/FilterBar';
-import { Rich } from '@talend/react-components';
-import { Checkbox } from '@talend/react-components/lib/Toggle';
 import { getTheme } from '@talend/react-components/lib/theme';
-import cssModule from './BadgeCheckboxes.module.scss';
+import { Checkbox } from '@talend/react-components/lib/Toggle';
+
+import { I18N_DOMAIN_FACETED_SEARCH } from '../../../constants';
 import { getApplyDataFeature, getDataAttributesFrom } from '../../../helpers/usage.helpers';
 
+import cssModule from './BadgeCheckboxes.module.scss';
+
 const theme = getTheme(cssModule);
 
 const BadgeCheckbox = ({ checked, id, label, onChange }) => {
@@ -68,9 +74,9 @@ const BadgeCheckboxesForm = ({
 	feature,
 	filterBarPlaceholder,
 	allSelector,
-	t,
 	...rest
 }) => {
+	const { t } = useTranslation(I18N_DOMAIN_FACETED_SEARCH);
 	const [filter, setFilter] = useState('');
 
 	const badgeCheckBoxesFormId = `${id}-checkboxes-form`;
@@ -181,7 +187,6 @@ BadgeCheckboxesForm.propTypes = {
 	feature: PropTypes.string.isRequired,
 	filterBarPlaceholder: PropTypes.string,
 	allSelector: PropTypes.bool,
-	t: PropTypes.func.isRequired,
 };
 
 // eslint-disable-next-line import/prefer-default-export