diff --git a/packages/desktop-client/src/components/accounts/Header.tsx b/packages/desktop-client/src/components/accounts/Header.tsx index 4a68f224f93..f712ddf1842 100644 --- a/packages/desktop-client/src/components/accounts/Header.tsx +++ b/packages/desktop-client/src/components/accounts/Header.tsx @@ -25,7 +25,7 @@ import { type TransactionFilterEntity, } from 'loot-core/types/models'; -import { useGlobalPref } from '../../hooks/useGlobalPref'; +import { useLocale } from '../../hooks/useLocale'; import { useLocalPref } from '../../hooks/useLocalPref'; import { useSplitsExpanded } from '../../hooks/useSplitsExpanded'; import { useSyncServerStatus } from '../../hooks/useSyncServerStatus'; @@ -188,7 +188,6 @@ export function AccountHeader({ onMakeAsNonSplitTransactions, }: AccountHeaderProps) { const { t } = useTranslation(); - const [language] = useGlobalPref('language'); const [menuOpen, setMenuOpen] = useState(false); const [reconcileOpen, setReconcileOpen] = useState(false); @@ -201,6 +200,8 @@ export function AccountHeader({ const isServerOffline = syncServerStatus === 'offline'; const [_, setExpandSplitsPref] = useLocalPref('expand-splits'); + const locale = useLocale(); + let canSync = !!(account?.account_id && isUsingServer); if (!account) { // All accounts - check for any syncable account @@ -388,7 +389,7 @@ export function AccountHeader({ }} content={ account?.last_reconciled - ? `${t('Reconciled')} ${tsToRelativeTime(account.last_reconciled, language || 'en-US')}` + ? `${t('Reconciled')} ${tsToRelativeTime(account.last_reconciled, locale)}` : t('Not yet reconciled') } placement="top" diff --git a/packages/desktop-client/src/components/banksync/AccountRow.tsx b/packages/desktop-client/src/components/banksync/AccountRow.tsx index f0df6fd6f1b..73421fc5c02 100644 --- a/packages/desktop-client/src/components/banksync/AccountRow.tsx +++ b/packages/desktop-client/src/components/banksync/AccountRow.tsx @@ -6,7 +6,6 @@ import { Button } from '@actual-app/components/button'; import { tsToRelativeTime } from 'loot-core/shared/util'; import { type AccountEntity } from 'loot-core/src/types/models'; -import { useGlobalPref } from '../../hooks/useGlobalPref'; import { theme } from '../../style'; import { Row, Cell } from '../table'; @@ -15,15 +14,14 @@ type AccountRowProps = { hovered: boolean; onHover: (id: AccountEntity['id'] | null) => void; onAction: (account: AccountEntity, action: 'link' | 'edit') => void; + locale: Locale; }; export const AccountRow = memo( - ({ account, hovered, onHover, onAction }: AccountRowProps) => { + ({ account, hovered, onHover, onAction, locale }: AccountRowProps) => { const backgroundFocus = hovered; - const [language = 'en-US'] = useGlobalPref('language'); - - const lastSync = tsToRelativeTime(account.last_sync, language, { + const lastSync = tsToRelativeTime(account.last_sync, locale, { capitalize: true, }); diff --git a/packages/desktop-client/src/components/banksync/AccountsList.tsx b/packages/desktop-client/src/components/banksync/AccountsList.tsx index 49469a38e13..42b21c0badc 100644 --- a/packages/desktop-client/src/components/banksync/AccountsList.tsx +++ b/packages/desktop-client/src/components/banksync/AccountsList.tsx @@ -4,6 +4,8 @@ import { View } from '@actual-app/components/view'; import { type AccountEntity } from 'loot-core/src/types/models'; +import { useLocale } from '../../hooks/useLocale'; + import { AccountRow } from './AccountRow'; type AccountsListProps = { @@ -19,6 +21,8 @@ export function AccountsList({ onHover, onAction, }: AccountsListProps) { + const locale = useLocale(); + if (accounts.length === 0) { return null; } @@ -39,6 +43,7 @@ export function AccountsList({ hovered={hovered} onHover={onHover} onAction={onAction} + locale={locale} /> ); })} diff --git a/packages/loot-core/src/shared/util.ts b/packages/loot-core/src/shared/util.ts index 38e9c4f52a0..3448da148e4 100644 --- a/packages/loot-core/src/shared/util.ts +++ b/packages/loot-core/src/shared/util.ts @@ -1,6 +1,5 @@ // @ts-strict-ignore import { formatDistanceToNow } from 'date-fns'; -import * as locales from 'date-fns/locale'; export function last(arr: Array) { return arr[arr.length - 1]; @@ -489,7 +488,7 @@ export function sortByKey(arr: T[], key: keyof T): T[] { export function tsToRelativeTime( ts: string | null, - language: string, + locale: Locale, options: { capitalize: boolean; } = { capitalize: false }, @@ -497,9 +496,6 @@ export function tsToRelativeTime( if (!ts) return 'Unknown'; const parsed = new Date(parseInt(ts, 10)); - const locale = - locales[language.replace('-', '') as keyof typeof locales] ?? - locales['enUS']; let distance = formatDistanceToNow(parsed, { addSuffix: true, locale });