From cfa9ac09d7f95a995a7e53746f8374b0346f5d34 Mon Sep 17 00:00:00 2001
From: Ali Gradina <71004080+a-gradina@users.noreply.github.com>
Date: Thu, 12 Sep 2024 21:13:31 +0200
Subject: [PATCH] Translation for MonthCountSelector, index, SidebarCategory &
SidebarGroup Component (#3363)
---
.../src/components/budget/MonthCountSelector.tsx | 5 ++++-
.../src/components/budget/SidebarCategory.tsx | 5 ++++-
.../src/components/budget/SidebarGroup.tsx | 13 ++++++++-----
.../desktop-client/src/components/budget/index.tsx | 7 ++++++-
upcoming-release-notes/3363.md | 6 ++++++
5 files changed, 28 insertions(+), 8 deletions(-)
create mode 100644 upcoming-release-notes/3363.md
diff --git a/packages/desktop-client/src/components/budget/MonthCountSelector.tsx b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
index d64ed0082..22019451a 100644
--- a/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
+++ b/packages/desktop-client/src/components/budget/MonthCountSelector.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { SvgCalendar } from '../../icons/v2';
import { theme } from '../../style';
@@ -29,6 +30,8 @@ export function MonthCountSelector({
maxMonths,
onChange,
}: MonthCountSelectorProps) {
+ const { t } = useTranslation();
+
const { displayMax } = useBudgetMonthCount();
// It doesn't make sense to show anything if we can only fit one
@@ -62,7 +65,7 @@ export function MonthCountSelector({
transform: 'scale(1.2)',
},
}}
- title="Choose the number of months shown at a time"
+ title={t('Choose the number of months shown at a time')}
>
{calendars}
</View>
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index fb4d860cf..7e2034817 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import React, { type CSSProperties, type Ref, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import {
type CategoryGroupEntity,
@@ -45,6 +46,8 @@ export function SidebarCategory({
onDelete,
onHideNewCategory,
}: SidebarCategoryProps) {
+ const { t } = useTranslation();
+
const temporary = category.id === 'new';
const [menuOpen, setMenuOpen] = useState(false);
const triggerRef = useRef(null);
@@ -179,7 +182,7 @@ export function SidebarCategory({
onBlur={() => onEditName(null)}
style={{ paddingLeft: 13, ...(isLast && { borderBottomWidth: 0 }) }}
inputProps={{
- placeholder: temporary ? 'New Category Name' : '',
+ placeholder: temporary ? t('New Category Name') : '',
}}
/>
</View>
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index 417dce8e6..eb342f79f 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -1,6 +1,7 @@
// @ts-strict-ignore
import React, { type CSSProperties, useRef, useState } from 'react';
import { type ConnectDragSource } from 'react-dnd';
+import { useTranslation } from 'react-i18next';
import { SvgExpandArrow } from '../../icons/v0';
import { SvgCheveronDown } from '../../icons/v1';
@@ -50,6 +51,8 @@ export function SidebarGroup({
onHideNewGroup,
onToggleCollapse,
}: SidebarGroupProps) {
+ const { t } = useTranslation();
+
const temporary = group.id === 'new';
const [menuOpen, setMenuOpen] = useState(false);
const triggerRef = useRef(null);
@@ -123,13 +126,13 @@ export function SidebarGroup({
setMenuOpen(false);
}}
items={[
- { name: 'add-category', text: 'Add category' },
- { name: 'rename', text: 'Rename' },
+ { name: 'add-category', text: t('Add category') },
+ { name: 'rename', text: t('Rename') },
!group.is_income && {
name: 'toggle-visibility',
- text: group.hidden ? 'Show' : 'Hide',
+ text: group.hidden ? t('Show') : t('Hide'),
},
- onDelete && { name: 'delete', text: 'Delete' },
+ onDelete && { name: 'delete', text: t('Delete') },
]}
/>
</Popover>
@@ -197,7 +200,7 @@ export function SidebarGroup({
style={{ fontWeight: 600 }}
inputProps={{
style: { marginLeft: 20 },
- placeholder: temporary ? 'New Group Name' : '',
+ placeholder: temporary ? t('New Group Name') : '',
}}
/>
</View>
diff --git a/packages/desktop-client/src/components/budget/index.tsx b/packages/desktop-client/src/components/budget/index.tsx
index 1f2e29995..e1ecb6e9b 100644
--- a/packages/desktop-client/src/components/budget/index.tsx
+++ b/packages/desktop-client/src/components/budget/index.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import React, { memo, useMemo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import {
@@ -63,6 +64,7 @@ type BudgetInnerProps = {
};
function BudgetInner(props: BudgetInnerProps) {
+ const { t } = useTranslation();
const currentMonth = monthUtils.currentMonth();
const spreadsheet = useSpreadsheet();
const dispatch = useDispatch();
@@ -173,7 +175,10 @@ function BudgetInner(props: BudgetInnerProps) {
dispatch(
addNotification({
type: 'error',
- message: `Category ‘${name}’ already exists in group (May be Hidden)`,
+ message: t(
+ 'Category ‘{{name}}‘ already exists in group (May be Hidden)',
+ { name },
+ ),
}),
);
};
diff --git a/upcoming-release-notes/3363.md b/upcoming-release-notes/3363.md
new file mode 100644
index 000000000..4506ff225
--- /dev/null
+++ b/upcoming-release-notes/3363.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [agradina]
+---
+
+Support translations in desktop-client/components/budget.
--
GitLab