From 2ebaa527be9330e48850758fa88c59ace5c57d48 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 21 Nov 2024 16:01:26 -0800
Subject: [PATCH] Convert mobile Accounts.jsx to tsx (#3862)

* Convert mobile Accounts.jsx to TS

* Release notes

* Fix lint
---
 .../src/components/accounts/Account.tsx       |   8 +-
 .../accounts/{Accounts.jsx => Accounts.tsx}   | 103 ++++++++++++------
 .../loot-core/src/client/reducers/queries.ts  |   1 -
 .../src/client/state-types/queries.d.ts       |  19 ++--
 upcoming-release-notes/3862.md                |   6 +
 5 files changed, 91 insertions(+), 46 deletions(-)
 rename packages/desktop-client/src/components/mobile/accounts/{Accounts.jsx => Accounts.tsx} (73%)
 create mode 100644 upcoming-release-notes/3862.md

diff --git a/packages/desktop-client/src/components/accounts/Account.tsx b/packages/desktop-client/src/components/accounts/Account.tsx
index 65783c08914..fc21cfe093a 100644
--- 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/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.tsx
similarity index 73%
rename from packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
rename to packages/desktop-client/src/components/mobile/accounts/Accounts.tsx
index 396cead5b2e..f17806dc4a8 100644
--- a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
+++ b/packages/desktop-client/src/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
index eb858f82491..b95214d0b02 100644
--- 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
index a4a32432c5e..5a423edaf94 100644
--- 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
new file mode 100644
index 00000000000..1181cd0fa2d
--- /dev/null
+++ b/upcoming-release-notes/3862.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Convert mobile Accounts.jsx to Typescript.