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