diff --git a/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.jsx b/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.tsx
similarity index 78%
rename from packages/desktop-client/src/components/transactions/SimpleTransactionsTable.jsx
rename to packages/desktop-client/src/components/transactions/SimpleTransactionsTable.tsx
index 9001c17fbb..40a5b99f53 100644
--- a/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.jsx
+++ b/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.tsx
@@ -1,4 +1,10 @@
-import React, { memo, useMemo, useCallback } from 'react';
+import React, {
+ memo,
+ useMemo,
+ useCallback,
+ type CSSProperties,
+ type ReactNode,
+} from 'react';
import {
format as formatDate,
@@ -7,45 +13,48 @@ import {
} from 'date-fns';
import { t } from 'i18next';
-import {
- getAccountsById,
- getCategoriesById,
-} from 'loot-core/src/client/reducers/queries';
+import * as monthUtils from 'loot-core/src/shared/months';
import { integerToCurrency } from 'loot-core/src/shared/util';
+import { type TransactionEntity } from 'loot-core/types/models';
-import { useAccounts } from '../../hooks/useAccounts';
-import { useCategories } from '../../hooks/useCategories';
+import { useAccount } from '../../hooks/useAccount';
+import { useCategory } from '../../hooks/useCategory';
import { useDateFormat } from '../../hooks/useDateFormat';
-import { usePayees } from '../../hooks/usePayees';
import { useSelectedItems, useSelectedDispatch } from '../../hooks/useSelected';
import { SvgArrowsSynchronize } from '../../icons/v2';
import { styles, theme } from '../../style';
import { Cell, Field, Row, SelectCell, Table } from '../table';
import { DisplayId } from '../util/DisplayId';
-function serializeTransaction(transaction, dateFormat) {
+function serializeTransaction(
+ transaction: TransactionEntity,
+ dateFormat: string,
+): TransactionEntity {
let { date } = transaction;
if (!isDateValid(parseISO(date))) {
- date = null;
+ date = monthUtils.currentDay();
}
return {
...transaction,
- date: date ? formatDate(parseISO(date), dateFormat) : null,
+ date: formatDate(parseISO(date), dateFormat),
};
}
+type TransactionRowProps = {
+ transaction: TransactionEntity;
+ fields: string[];
+ selected: boolean;
+};
+
const TransactionRow = memo(function TransactionRow({
transaction,
fields,
- categories,
- accounts,
selected,
-}) {
- // TODO: Convert these to use fetched queries
- const c = getCategoriesById(categories)[transaction.category];
- const a = getAccountsById(accounts)[transaction.account];
+}: TransactionRowProps) {
+ const category = useCategory(transaction.category || '');
+ const account = useAccount(transaction.account);
const dispatchSelected = useSelectedDispatch();
@@ -100,21 +109,23 @@ const TransactionRow = memo(function TransactionRow({
}}
/>
)}
-
+ {transaction.payee && (
+
+ )}
>
)}
);
case 'category':
return (
-
- {c ? c.name : ''}
+
+ {category?.name || ''}
);
case 'account':
return (
-
- {a.name}
+
+ {account?.name || 'No account'}
);
case 'notes':
@@ -141,38 +152,39 @@ const TransactionRow = memo(function TransactionRow({
);
});
+type SimpleTransactionsTableProps = {
+ transactions: readonly TransactionEntity[];
+ renderEmpty: ReactNode;
+ fields?: string[];
+ style?: CSSProperties;
+};
+
export function SimpleTransactionsTable({
transactions,
renderEmpty,
fields = ['date', 'payee', 'amount'],
style,
-}) {
- const { grouped: categories } = useCategories();
- const payees = usePayees();
- const accounts = useAccounts();
+}: SimpleTransactionsTableProps) {
const dateFormat = useDateFormat() || 'MM/dd/yyyy';
const selectedItems = useSelectedItems();
const dispatchSelected = useSelectedDispatch();
- const memoFields = useMemo(() => fields, [JSON.stringify(fields)]);
+ const memoFields = useMemo(() => fields, [fields]);
const serializedTransactions = useMemo(() => {
return transactions.map(trans => serializeTransaction(trans, dateFormat));
- }, [transactions]);
+ }, [transactions, dateFormat]);
const renderItem = useCallback(
- ({ item }) => {
+ ({ item }: { item: TransactionEntity }) => {
return (
);
},
- [payees, categories, memoFields, selectedItems],
+ [memoFields, selectedItems],
);
return (
diff --git a/upcoming-release-notes/3870.md b/upcoming-release-notes/3870.md
new file mode 100644
index 0000000000..9744036bac
--- /dev/null
+++ b/upcoming-release-notes/3870.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Convert SimpleTransactionsTable.jsx to tsx