Translation for MonthCountSelector, index, SidebarCategory & SidebarGroup Component (#3363)

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>

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>

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>

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 },
+        ),
       }),
     );
   };

upcoming-release-notes/3363.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [agradina]
+---
+
+Support translations in desktop-client/components/budget.