Convert mobile Accounts.jsx to tsx (actualbudget#3862)

* Convert mobile Accounts.jsx to TS * Release notes * Fix lint
tlesicka · Nov 22, 2024 · 2ebaa52 · 2ebaa52
1 parent c541151
commit 2ebaa52
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 46 deletions.
diff --git a/packages/desktop-client/src/components/accounts/Account.tsx b/packages/desktop-client/src/components/accounts/Account.tsx
@@ -266,8 +266,8 @@ type AccountInternalProps = {
   accounts: AccountEntity[];
   getPayees: () => Promise<PayeeEntity[]>;
   updateAccount: (newAccount: AccountEntity) => void;
-  newTransactions: string[];
-  matchedTransactions: string[];
+  newTransactions: Array<TransactionEntity['id']>;
+  matchedTransactions: Array<TransactionEntity['id']>;
   splitsExpandedDispatch: ReturnType<typeof useSplitsExpanded>['dispatch'];
   expandSplits?: boolean;
   savedFilters: TransactionFilterEntity[];
@@ -870,11 +870,11 @@ class AccountInternal extends PureComponent<
     return amount;
   };
 
-  isNew = (id: string) => {
+  isNew = (id: TransactionEntity['id']) => {
     return this.props.newTransactions.includes(id);
   };
 
-  isMatched = (id: string) => {
+  isMatched = (id: TransactionEntity['id']) => {
     return this.props.matchedTransactions.includes(id);
   };
 

diff --git a/...c/components/mobile/accounts/Accounts.jsx → ...c/components/mobile/accounts/Accounts.tsx b/...c/components/mobile/accounts/Accounts.jsx → ...c/components/mobile/accounts/Accounts.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { type CSSProperties, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { t } from 'i18next';
 
 import { replaceModal, syncAndDownload } from 'loot-core/src/client/actions';
 import * as queries from 'loot-core/src/client/queries';
+import { type AccountEntity } from 'loot-core/types/models';
 
 import { useAccounts } from '../../../hooks/useAccounts';
 import { useFailedAccounts } from '../../../hooks/useFailedAccounts';
@@ -18,11 +19,22 @@ import { Text } from '../../common/Text';
 import { TextOneLine } from '../../common/TextOneLine';
 import { View } from '../../common/View';
 import { MobilePageHeader, Page } from '../../Page';
+import { type Binding, type SheetFields } from '../../spreadsheet';
 import { CellValue, CellValueText } from '../../spreadsheet/CellValue';
 import { MOBILE_NAV_HEIGHT } from '../MobileNavTabs';
 import { PullToRefresh } from '../PullToRefresh';
 
-function AccountHeader({ name, amount, style = {} }) {
+type AccountHeaderProps<SheetFieldName extends SheetFields<'account'>> = {
+  name: string;
+  amount: Binding<'account', SheetFieldName>;
+  style?: CSSProperties;
+};
+
+function AccountHeader<SheetFieldName extends SheetFields<'account'>>({
+  name,
+  amount,
+  style = {},
+}: AccountHeaderProps<SheetFieldName>) {
   return (
     <View
       style={{
@@ -48,13 +60,26 @@ function AccountHeader({ name, amount, style = {} }) {
       </View>
       <CellValue binding={amount} type="financial">
         {props => (
-          <CellValueText {...props} style={{ ...styles.text, fontSize: 14 }} />
+          <CellValueText<'account', SheetFieldName>
+            {...props}
+            style={{ ...styles.text, fontSize: 14 }}
+          />
         )}
       </CellValue>
     </View>
   );
 }
 
+type AccountCardProps = {
+  account: AccountEntity;
+  updated: boolean;
+  connected: boolean;
+  pending: boolean;
+  failed: boolean;
+  getBalanceQuery: (account: AccountEntity) => Binding<'account', 'balance'>;
+  onSelect: (id: string) => void;
+};
+
 function AccountCard({
   account,
   updated,
@@ -63,7 +88,7 @@ function AccountCard({
   failed,
   getBalanceQuery,
   onSelect,
-}) {
+}: AccountCardProps) {
   return (
     <Button
       onPress={() => onSelect(account.id)}
@@ -87,23 +112,26 @@ function AccountCard({
             alignItems: 'center',
           }}
         >
-          {account.bankId && (
-            <View
-              style={{
-                backgroundColor: pending
-                  ? theme.sidebarItemBackgroundPending
-                  : failed
-                    ? theme.sidebarItemBackgroundFailed
-                    : theme.sidebarItemBackgroundPositive,
-                marginRight: '8px',
-                width: 8,
-                flexShrink: 0,
-                height: 8,
-                borderRadius: 8,
-                opacity: connected ? 1 : 0,
-              }}
-            />
-          )}
+          {
+            /* TODO: Should bankId be part of the AccountEntity type? */
+            'bankId' in account && account.bankId ? (
+              <View
+                style={{
+                  backgroundColor: pending
+                    ? theme.sidebarItemBackgroundPending
+                    : failed
+                      ? theme.sidebarItemBackgroundFailed
+                      : theme.sidebarItemBackgroundPositive,
+                  marginRight: '8px',
+                  width: 8,
+                  flexShrink: 0,
+                  height: 8,
+                  borderRadius: 8,
+                  opacity: connected ? 1 : 0,
+                }}
+              />
+            ) : null
+          }
           <TextOneLine
             style={{
               ...styles.text,
@@ -120,11 +148,10 @@ function AccountCard({
       </View>
       <CellValue binding={getBalanceQuery(account)} type="financial">
         {props => (
-          <CellValueText
+          <CellValueText<'account', 'balance'>
             {...props}
             style={{
               fontSize: 16,
-              color: 'inherit',
               ...makeAmountFullStyle(props.value),
             }}
             data-testid="account-balance"
@@ -147,6 +174,17 @@ function EmptyMessage() {
   );
 }
 
+type AccountListProps = {
+  accounts: AccountEntity[];
+  updatedAccounts: Array<AccountEntity['id']>;
+  getBalanceQuery: (account: AccountEntity) => Binding<'account', 'balance'>;
+  getOnBudgetBalance: () => Binding<'account', 'budgeted-accounts-balance'>;
+  getOffBudgetBalance: () => Binding<'account', 'offbudget-accounts-balance'>;
+  onAddAccount: () => void;
+  onSelectAccount: (id: string) => void;
+  onSync: () => Promise<void>;
+};
+
 function AccountList({
   accounts,
   updatedAccounts,
@@ -156,7 +194,7 @@ function AccountList({
   onAddAccount,
   onSelectAccount,
   onSync,
-}) {
+}: AccountListProps) {
   const failedAccounts = useFailedAccounts();
   const syncingAccountIds = useSelector(state => state.account.accountsSyncing);
   const budgetedAccounts = accounts.filter(account => account.offbudget === 0);
@@ -238,17 +276,20 @@ export function Accounts() {
 
   const navigate = useNavigate();
 
-  const onSelectAccount = id => {
-    navigate(`/accounts/${id}`);
-  };
+  const onSelectAccount = useCallback(
+    (id: AccountEntity['id']) => {
+      navigate(`/accounts/${id}`);
+    },
+    [navigate],
+  );
 
-  const onAddAccount = () => {
+  const onAddAccount = useCallback(() => {
     dispatch(replaceModal('add-account'));
-  };
+  }, [dispatch]);
 
-  const onSync = () => {
+  const onSync = useCallback(async () => {
     dispatch(syncAndDownload());
-  };
+  }, [dispatch]);
 
   return (
     <View style={{ flex: 1 }}>

diff --git a/packages/loot-core/src/client/reducers/queries.ts b/packages/loot-core/src/client/reducers/queries.ts
@@ -23,7 +23,6 @@ const initialState: QueriesState = {
   commonPayeesLoaded: false,
   payees: [],
   payeesLoaded: false,
-  earliestTransaction: null,
 };
 
 export function update(state = initialState, action: Action): QueriesState {

diff --git a/packages/loot-core/src/client/state-types/queries.d.ts b/packages/loot-core/src/client/state-types/queries.d.ts
@@ -1,12 +1,12 @@
 import type { Handlers } from '../../types/handlers';
-import { type AccountEntity } from '../../types/models';
+import { type TransactionEntity, type AccountEntity } from '../../types/models';
 import type * as constants from '../constants';
 
 export type QueriesState = {
-  newTransactions: string[];
-  matchedTransactions: string[];
-  lastTransaction: unknown | null;
-  updatedAccounts: string[];
+  newTransactions: Array<TransactionEntity['id']>;
+  matchedTransactions: Array<TransactionEntity['id']>;
+  lastTransaction: TransactionEntity | null;
+  updatedAccounts: Array<AccountEntity['id']>;
   accounts: AccountEntity[];
   accountsLoaded: boolean;
   categories: Awaited<ReturnType<Handlers['get-categories']>>;
@@ -15,14 +15,13 @@ export type QueriesState = {
   commonPayees: Awaited<ReturnType<Handlers['common-payees-get']>>;
   payees: Awaited<ReturnType<Handlers['payees-get']>>;
   payeesLoaded: boolean;
-  earliestTransaction: unknown | null;
 };
 
 type SetNewTransactionsAction = {
   type: typeof constants.SET_NEW_TRANSACTIONS;
-  newTransactions?: string[];
-  matchedTransactions?: string[];
-  updatedAccounts?: string[];
+  newTransactions?: Array<TransactionEntity['id']>;
+  matchedTransactions?: Array<TransactionEntity['id']>;
+  updatedAccounts?: Array<AccountEntity['id']>;
 };
 
 type UpdateNewTransactionsAction = {
@@ -32,7 +31,7 @@ type UpdateNewTransactionsAction = {
 
 type SetLastTransactionAction = {
   type: typeof constants.SET_LAST_TRANSACTION;
-  transaction: unknown;
+  transaction: TransactionEntity;
 };
 
 type MarkAccountReadAction = {

diff --git a/upcoming-release-notes/3862.md b/upcoming-release-notes/3862.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Convert mobile Accounts.jsx to Typescript.