From af5fd5b3efeef1628ad583b661fa0539d4d0f63e Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Sat, 17 Aug 2024 05:44:37 -0500
Subject: [PATCH] Translation: desktop-client/components/autocomplete (#3275)
---
.../autocomplete/AccountAutocomplete.tsx | 8 +++++---
.../autocomplete/CategoryAutocomplete.tsx | 9 ++++++---
.../src/components/autocomplete/FilterList.tsx | 4 +++-
.../autocomplete/PayeeAutocomplete.tsx | 17 ++++++++++-------
.../src/components/autocomplete/ReportList.tsx | 4 +++-
upcoming-release-notes/3275.md | 6 ++++++
6 files changed, 33 insertions(+), 15 deletions(-)
create mode 100644 upcoming-release-notes/3275.md
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
index ba66fee26..29fafa3f4 100644
--- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
@@ -5,6 +5,7 @@ import React, {
type ComponentPropsWithoutRef,
type ReactElement,
} from 'react';
+import { useTranslation } from 'react-i18next';
import { css } from 'glamor';
@@ -44,6 +45,7 @@ function AccountList({
renderAccountItemGroupHeader = defaultRenderAccountItemGroupHeader,
renderAccountItem = defaultRenderAccountItem,
}: AccountListProps) {
+ const { t } = useTranslation();
let lastItem = null;
return (
@@ -63,10 +65,10 @@ function AccountList({
const group = `${
item.closed
- ? 'Closed Accounts'
+ ? t('Closed Accounts')
: item.offbudget
- ? 'Off Budget'
- : 'For Budget'
+ ? t('Off Budget')
+ : t('For Budget')
}`;
lastItem = item;
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index 41bc750bc..c5d0a2462 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -9,6 +9,7 @@ import React, {
type ReactElement,
useCallback,
} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
import { css } from 'glamor';
@@ -71,6 +72,7 @@ function CategoryList({
showHiddenItems,
showBalances,
}: CategoryListProps) {
+ const { t } = useTranslation();
let lastGroup: string | undefined | null = null;
const filteredItems = useMemo(
@@ -101,7 +103,7 @@ function CategoryList({
}
const showGroup = item.cat_group !== lastGroup;
- const groupName = `${item.group?.name}${item.group?.hidden ? ' (hidden)' : ''}`;
+ const groupName = `${item.group?.name}${item.group?.hidden ? ' ' + t('(hidden)') : ''}`;
lastGroup = item.cat_group;
return (
<Fragment key={item.id}>
@@ -339,7 +341,7 @@ function SplitTransactionButton({
<SvgSplit width={10} height={10} style={{ marginRight: 5 }} />
)}
</Text>
- Split Transaction
+ <Trans>Split Transaction</Trans>
</View>
);
}
@@ -368,6 +370,7 @@ function CategoryItem({
showBalances,
...props
}: CategoryItemProps) {
+ const { t } = useTranslation();
const { isNarrowWidth } = useResponsive();
const narrowStyle = isNarrowWidth
? {
@@ -416,7 +419,7 @@ function CategoryItem({
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<TextOneLine>
{item.name}
- {item.hidden ? ' (hidden)' : null}
+ {item.hidden ? ' ' + t('(hidden)') : null}
</TextOneLine>
<TextOneLine
style={{
diff --git a/packages/desktop-client/src/components/autocomplete/FilterList.tsx b/packages/desktop-client/src/components/autocomplete/FilterList.tsx
index 7a8350b27..1e4e0191b 100644
--- a/packages/desktop-client/src/components/autocomplete/FilterList.tsx
+++ b/packages/desktop-client/src/components/autocomplete/FilterList.tsx
@@ -1,4 +1,5 @@
import React, { type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
import { theme } from '../../style/theme';
import { View } from '../common/View';
@@ -16,6 +17,7 @@ export function FilterList<T extends { id: string; name: string }>({
highlightedIndex: number;
embedded?: boolean;
}) {
+ const { t } = useTranslation();
return (
<View>
<View
@@ -25,7 +27,7 @@ export function FilterList<T extends { id: string; name: string }>({
...(!embedded && { maxHeight: 175 }),
}}
>
- <ItemHeader title="Saved Filters" type="filter" />
+ <ItemHeader title={t('Saved Filters')} type="filter" />
{items.map((item, idx) => {
return [
<div
diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
index 4d30eb934..6c15af7e2 100644
--- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
@@ -10,6 +10,7 @@ import React, {
type ComponentPropsWithoutRef,
type ReactElement,
} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { css } from 'glamor';
@@ -158,6 +159,8 @@ function PayeeList({
renderPayeeItem = defaultRenderPayeeItem,
footer,
}: PayeeListProps) {
+ const { t } = useTranslation();
+
let createNew = null;
items = [...items];
@@ -195,11 +198,11 @@ function PayeeList({
let title;
if (itemType === 'common_payee' && lastType !== itemType) {
- title = 'Suggested Payees';
+ title = t('Suggested Payees');
} else if (itemType === 'payee' && lastType !== itemType) {
- title = 'Payees';
+ title = t('Payees');
} else if (itemType === 'account' && lastType !== itemType) {
- title = 'Transfer To/From';
+ title = t('Transfer To/From');
}
const showMoreMessage =
idx === items.length - 1 && items.length > 100;
@@ -230,7 +233,7 @@ function PayeeList({
textAlign: 'center',
}}
>
- More payees are available, search to find them
+ <Trans>More payees are available, search to find them</Trans>
</div>
)}
</Fragment>
@@ -445,12 +448,12 @@ export function PayeeAutocomplete({
setFocusTransferPayees(!focusTransferPayees);
}}
>
- Make Transfer
+ <Trans>Make Transfer</Trans>
</Button>
)}
{showManagePayees && (
<Button type="menu" onClick={() => onManagePayees()}>
- Manage Payees
+ <Trans>Manage Payees</Trans>
</Button>
)}
</AutocompleteFooter>
@@ -520,7 +523,7 @@ export function CreatePayeeButton({
style={{ marginRight: 5, display: 'inline-block' }}
/>
)}
- Create Payee “{payeeName}â€
+ <Trans>Create Payee “{{ payeeName }}â€</Trans>
</View>
);
}
diff --git a/packages/desktop-client/src/components/autocomplete/ReportList.tsx b/packages/desktop-client/src/components/autocomplete/ReportList.tsx
index 81e3ff978..f4fb2cb55 100644
--- a/packages/desktop-client/src/components/autocomplete/ReportList.tsx
+++ b/packages/desktop-client/src/components/autocomplete/ReportList.tsx
@@ -1,4 +1,5 @@
import React, { Fragment, type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
import { theme } from '../../style/theme';
import { View } from '../common/View';
@@ -16,6 +17,7 @@ export function ReportList<T extends { id: string; name: string }>({
highlightedIndex: number;
embedded?: boolean;
}) {
+ const { t } = useTranslation();
return (
<View>
<View
@@ -25,7 +27,7 @@ export function ReportList<T extends { id: string; name: string }>({
...(!embedded && { maxHeight: 175 }),
}}
>
- <Fragment>{ItemHeader({ title: 'Saved Reports' })}</Fragment>
+ <Fragment>{ItemHeader({ title: t('Saved Reports') })}</Fragment>
{items.map((item, idx) => {
return [
<div
diff --git a/upcoming-release-notes/3275.md b/upcoming-release-notes/3275.md
new file mode 100644
index 000000000..e74cc1744
--- /dev/null
+++ b/upcoming-release-notes/3275.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Support translations in desktop-client/components/autocomplete.
--
GitLab