(null);
diff --git a/packages/desktop-client/src/components/modals/EditRuleModal.jsx b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
index e9bb7208136..649a9236472 100644
--- a/packages/desktop-client/src/components/modals/EditRuleModal.jsx
+++ b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
@@ -1,8 +1,8 @@
import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { css } from '@emotion/css';
-import { t } from 'i18next';
import { v4 as uuid } from 'uuid';
import {
@@ -304,6 +304,7 @@ function formatAmount(amount) {
}
function ScheduleDescription({ id }) {
+ const { t } = useTranslation();
const dateFormat = useDateFormat() || 'MM/dd/yyyy';
const scheduleQuery = useMemo(
() => q('schedules').filter({ id }).select('*'),
@@ -373,6 +374,7 @@ const splitActionFields = actionFields.filter(
);
const allocationMethodOptions = Object.entries(ALLOCATION_METHODS);
function ActionEditor({ action, editorStyle, onChange, onDelete, onAdd }) {
+ const { t } = useTranslation();
const {
field,
op,
@@ -762,6 +764,7 @@ const conditionFields = [
]);
export function EditRuleModal({ defaultRule, onSave: originalOnSave }) {
+ const { t } = useTranslation();
const [conditions, setConditions] = useState(
defaultRule.conditions.map(parse).map(c => ({ ...c, inputKey: uuid() })),
);
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
index f4d9e655f13..5dc42192978 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
@@ -2,8 +2,7 @@ import React, {
type ComponentPropsWithoutRef,
type CSSProperties,
} from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
import { envelopeBudget } from 'loot-core/client/queries';
@@ -41,6 +40,7 @@ export function EnvelopeBalanceMenuModal({
borderTop: `1px solid ${theme.pillBorder}`,
};
+ const { t } = useTranslation();
const category = useCategory(categoryId);
if (!category) {
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
index 5dcb473172a..a7f1d9eb5a3 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
@@ -4,8 +4,7 @@ import React, {
useEffect,
type CSSProperties,
} from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
import { envelopeBudget } from 'loot-core/client/queries';
import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
@@ -45,6 +44,7 @@ export function EnvelopeBudgetMenuModal({
borderTop: `1px solid ${theme.pillBorder}`,
};
+ const { t } = useTranslation();
const budgeted = useEnvelopeSheetValue(
envelopeBudget.catBudgeted(categoryId),
);
diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx
index ce048809010..c1e25425928 100644
--- a/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx
+++ b/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx
@@ -1,8 +1,7 @@
// @ts-strict-ignore
import React, { useState } from 'react';
import { Form } from 'react-aria-components';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
import { type FinanceModals } from 'loot-core/src/client/state-types/modals';
import { send } from 'loot-core/src/platform/client/fetch';
@@ -33,6 +32,7 @@ export function FixEncryptionKeyModal({
}: FixEncryptionKeyModalProps) {
const { hasExistingKey, cloudFileId, onSuccess } = options;
+ const { t } = useTranslation();
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
diff --git a/packages/desktop-client/src/components/modals/GoCardlessInitialiseModal.tsx b/packages/desktop-client/src/components/modals/GoCardlessInitialiseModal.tsx
index 188b5d57331..a2c01a79448 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessInitialiseModal.tsx
+++ b/packages/desktop-client/src/components/modals/GoCardlessInitialiseModal.tsx
@@ -1,7 +1,6 @@
// @ts-strict-ignore
import React, { useState } from 'react';
-
-import { t } from 'i18next'; // Ensure this import is correct
+import { useTranslation } from 'react-i18next';
import { send } from 'loot-core/src/platform/client/fetch';
@@ -27,6 +26,7 @@ type GoCardlessInitialiseProps = {
export const GoCardlessInitialiseModal = ({
onSuccess,
}: GoCardlessInitialiseProps) => {
+ const { t } = useTranslation();
const [secretId, setSecretId] = useState('');
const [secretKey, setSecretKey] = useState('');
const [isValid, setIsValid] = useState(true);
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx
index 7ed84edca8e..530b2d10324 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx
@@ -1,11 +1,17 @@
import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
import deepEqual from 'deep-equal';
-import { t } from 'i18next';
+import {
+ getPayees,
+ importPreviewTransactions,
+ importTransactions,
+ parseTransactions,
+} from 'loot-core/client/actions';
import { amountToInteger } from 'loot-core/src/shared/util';
-import { useActions } from '../../../hooks/useActions';
import { useDateFormat } from '../../../hooks/useDateFormat';
import { useSyncedPrefs } from '../../../hooks/useSyncedPrefs';
import { theme } from '../../../style';
@@ -135,14 +141,10 @@ function parseCategoryFields(trans, categories) {
}
export function ImportTransactionsModal({ options }) {
+ const { t } = useTranslation();
const dateFormat = useDateFormat() || 'MM/dd/yyyy';
const [prefs, savePrefs] = useSyncedPrefs();
- const {
- parseTransactions,
- importTransactions,
- importPreviewTransactions,
- getPayees,
- } = useActions();
+ const dispatch = useDispatch();
const [multiplierAmount, setMultiplierAmount] = useState('');
const [loadingState, setLoadingState] = useState('parsing');
@@ -263,9 +265,8 @@ export function ImportTransactionsModal({ options }) {
}
// Retreive the transactions that would be updated (along with the existing trx)
- const previewTrx = await importPreviewTransactions(
- accountId,
- previewTransactions,
+ const previewTrx = await dispatch(
+ importPreviewTransactions(accountId, previewTransactions),
);
const matchedUpdateMap = previewTrx.reduce((map, entry) => {
map[entry.transaction.trx_id] = entry;
@@ -309,7 +310,7 @@ export function ImportTransactionsModal({ options }) {
return next;
}, []);
},
- [accountId, categories.list, clearOnImport, importPreviewTransactions],
+ [accountId, categories.list, clearOnImport, dispatch],
);
const parse = useCallback(
@@ -320,8 +321,9 @@ export function ImportTransactionsModal({ options }) {
setFilename(filename);
setFileType(filetype);
- const { errors, transactions: parsedTransactions = [] } =
- await parseTransactions(filename, options);
+ const { errors, transactions: parsedTransactions = [] } = await dispatch(
+ parseTransactions(filename, options),
+ );
let index = 0;
const transactions = parsedTransactions.map(trans => {
@@ -399,11 +401,11 @@ export function ImportTransactionsModal({ options }) {
},
[
accountId,
+ dispatch,
getImportPreview,
inOutMode,
multiplierAmount,
outValue,
- parseTransactions,
prefs,
],
);
@@ -427,7 +429,6 @@ export function ImportTransactionsModal({ options }) {
parse(options.filename, parseOptions);
}, [
- parseTransactions,
options.filename,
delimiter,
hasHeaderRow,
@@ -653,13 +654,11 @@ export function ImportTransactionsModal({ options }) {
});
}
- const didChange = await importTransactions(
- accountId,
- finalTransactions,
- reconcile,
+ const didChange = await dispatch(
+ importTransactions(accountId, finalTransactions, reconcile),
);
if (didChange) {
- await getPayees();
+ await dispatch(getPayees());
}
if (onImported) {
diff --git a/packages/desktop-client/src/components/modals/ManageRulesModal.tsx b/packages/desktop-client/src/components/modals/ManageRulesModal.tsx
index 9b52fda9bc7..fe61ce7f984 100644
--- a/packages/desktop-client/src/components/modals/ManageRulesModal.tsx
+++ b/packages/desktop-client/src/components/modals/ManageRulesModal.tsx
@@ -1,9 +1,8 @@
// @ts-strict-ignore
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
-import { t } from 'i18next';
-
import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
@@ -14,6 +13,7 @@ type ManageRulesModalProps = {
};
export function ManageRulesModal({ payeeId }: ManageRulesModalProps) {
+ const { t } = useTranslation();
const [loading, setLoading] = useState(true);
const location = useLocation();
if (isNonProductionEnvironment()) {
diff --git a/packages/desktop-client/src/components/modals/MergeUnusedPayeesModal.tsx b/packages/desktop-client/src/components/modals/MergeUnusedPayeesModal.tsx
index 164143cd73e..acd5ae9b388 100644
--- a/packages/desktop-client/src/components/modals/MergeUnusedPayeesModal.tsx
+++ b/packages/desktop-client/src/components/modals/MergeUnusedPayeesModal.tsx
@@ -1,8 +1,7 @@
import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
-import { t } from 'i18next';
-
import { replaceModal } from 'loot-core/src/client/actions/modals';
import { send } from 'loot-core/src/platform/client/fetch';
import { type PayeeEntity } from 'loot-core/types/models';
@@ -27,6 +26,7 @@ export function MergeUnusedPayeesModal({
payeeIds,
targetPayeeId,
}: MergeUnusedPayeesModalProps) {
+ const { t } = useTranslation();
const allPayees = usePayees();
const modalStack = useSelector(state => state.modals.modalStack);
const isEditingRule = !!modalStack.find(m => m.name === 'edit-rule');
diff --git a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
index 7fab5513fe7..77a22652546 100644
--- a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
+++ b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx
@@ -1,6 +1,5 @@
import React, { type ComponentPropsWithoutRef } from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
import { useAccounts } from '../../hooks/useAccounts';
import { useNavigate } from '../../hooks/useNavigate';
@@ -24,6 +23,7 @@ export function PayeeAutocompleteModal({
autocompleteProps,
onClose,
}: PayeeAutocompleteModalProps) {
+ const { t } = useTranslation();
const payees = usePayees() || [];
const accounts = useAccounts() || [];
const navigate = useNavigate();
diff --git a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
index a2ba2396df2..2866152c142 100644
--- a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
@@ -3,8 +3,7 @@ import React, {
type ComponentPropsWithoutRef,
type CSSProperties,
} from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
import { useSchedules } from 'loot-core/client/data-hooks/schedules';
import { format } from 'loot-core/shared/months';
@@ -28,6 +27,7 @@ export function ScheduledTransactionMenuModal({
onSkip,
onPost,
}: ScheduledTransactionMenuModalProps) {
+ const { t } = useTranslation();
const defaultMenuItemStyle: CSSProperties = {
...styles.mobileMenuItem,
color: theme.menuItemText,
@@ -98,6 +98,7 @@ function ScheduledTransactionMenu({
onPost,
...props
}: ScheduledTransactionMenuProps) {
+ const { t } = useTranslation();
return (