From 4503e61ed405aee5300a814ac3b2c5339df52947 Mon Sep 17 00:00:00 2001
From: Cindy Wu <ciindy.wu@gmail.com>
Date: Thu, 21 Nov 2024 21:00:47 -1000
Subject: [PATCH 1/8] wip

---
 .../mobile/accounts/AccountTransactions.tsx   |  11 +-
 ...es.jsx => TransactionListWithBalances.tsx} | 111 ++++++++++++------
 2 files changed, 79 insertions(+), 43 deletions(-)
 rename packages/desktop-client/src/components/mobile/transactions/{TransactionListWithBalances.jsx => TransactionListWithBalances.tsx} (62%)

diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
index 1d72fea856e..868a1c1aea3 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
@@ -46,6 +46,7 @@ import { MobilePageHeader, Page } from '../../Page';
 import { MobileBackButton } from '../MobileBackButton';
 import { AddTransactionButton } from '../transactions/AddTransactionButton';
 import { TransactionListWithBalances } from '../transactions/TransactionListWithBalances';
+import { type SheetFields, type SheetNames } from '../../spreadsheet/index';
 
 export function AccountTransactions({
   account,
@@ -314,16 +315,16 @@ function TransactionListWithPreviews({
   );
 
   const transactionsToDisplay = !isSearching
-    ? previewTransactions.concat(transactions)
-    : transactions;
+    ? [...previewTransactions, ...transactions]
+    : [...transactions];
 
   return (
     <TransactionListWithBalances
       isLoading={isLoading}
       transactions={transactionsToDisplay}
-      balance={balanceQueries.balance}
-      balanceCleared={balanceQueries.cleared}
-      balanceUncleared={balanceQueries.uncleared}
+      balance={balanceQueries.balance.name as SheetFields<SheetNames>}
+      balanceCleared={balanceQueries.cleared.name ? balanceQueries.cleared.name as SheetFields<SheetNames> : undefined}
+      balanceUncleared={balanceQueries.uncleared.name ? balanceQueries.uncleared.name as SheetFields<SheetNames>: undefined}
       onLoadMore={loadMoreTransactions}
       searchPlaceholder={`Search ${accountName}`}
       onSearch={onSearch}
diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
similarity index 62%
rename from packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx
rename to packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
index f884f927ac1..a5bc77c77ea 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
@@ -9,13 +9,15 @@ import { InputWithContent } from '../../common/InputWithContent';
 import { Label } from '../../common/Label';
 import { View } from '../../common/View';
 import { CellValue, CellValueText } from '../../spreadsheet/CellValue';
+import { type SheetFields, type SheetNames } from '../../spreadsheet/index';
 import { useSheetValue } from '../../spreadsheet/useSheetValue';
 import { PullToRefresh } from '../PullToRefresh';
 
 import { TransactionList } from './TransactionList';
+import { TransactionEntity } from 'loot-core/types/models';
 
-function TransactionSearchInput({ placeholder, onSearch }) {
-  const [text, setText] = useState('');
+function TransactionSearchInput({ placeholder, onSearch }: { placeholder: string, onSearch: any}) {
+  const [text, setText] = useState<string>('');
 
   return (
     <View
@@ -57,6 +59,19 @@ function TransactionSearchInput({ placeholder, onSearch }) {
   );
 }
 
+type TransactionListWithBalancesProps = {
+  isLoading: boolean | undefined;
+  transactions: TransactionEntity[];
+  balance: SheetFields<SheetNames>;
+  balanceCleared: SheetFields<SheetNames> | undefined;
+  balanceUncleared: SheetFields<SheetNames> | undefined;
+  searchPlaceholder: string;
+  onSearch: (searchText: string) => void;
+  onLoadMore: (() => void) | undefined;
+  onOpenTransaction: (transaction: TransactionEntity) => void;
+  onRefresh: any;
+};
+
 export function TransactionListWithBalances({
   isLoading,
   transactions,
@@ -68,51 +83,61 @@ export function TransactionListWithBalances({
   onLoadMore,
   onOpenTransaction,
   onRefresh,
-}) {
-  const selectedInst = useSelected('transactions', transactions);
+}: TransactionListWithBalancesProps) {
+  const selectedInst = useSelected('transactions', transactions, []);
 
   return (
     <SelectedProvider instance={selectedInst}>
-      <View
-        style={{
-          flexShrink: 0,
-          marginTop: 10,
-        }}
-      >
+      <>
         <View
           style={{
-            flexDirection: 'row',
-            justifyContent: 'space-evenly',
+            flexShrink: 0,
+            marginTop: 10,
           }}
         >
-          {balanceCleared && balanceUncleared ? (
-            <BalanceWithCleared
-              balance={balance}
-              balanceCleared={balanceCleared}
-              balanceUncleared={balanceUncleared}
-            />
-          ) : (
-            <Balance balance={balance} />
-          )}
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-evenly',
+            }}
+          >
+            {balanceCleared && balanceUncleared ? (
+              <BalanceWithCleared
+                balance={balance}
+                balanceCleared={balanceCleared}
+                balanceUncleared={balanceUncleared}
+              />
+            ) : (
+              <Balance balance={balance as unknown as SheetFields<SheetNames>} />
+            )}
+          </View>
+          <TransactionSearchInput
+            placeholder={searchPlaceholder}
+            onSearch={onSearch}
+          />
         </View>
-        <TransactionSearchInput
-          placeholder={searchPlaceholder}
-          onSearch={onSearch}
-        />
-      </View>
-      <PullToRefresh isPullable={!!onRefresh} onRefresh={onRefresh}>
-        <TransactionList
-          isLoading={isLoading}
-          transactions={transactions}
-          onLoadMore={onLoadMore}
-          onOpenTransaction={onOpenTransaction}
-        />
-      </PullToRefresh>
+        <PullToRefresh isPullable={!!onRefresh} onRefresh={onRefresh}>
+          <TransactionList
+            isLoading={isLoading}
+            transactions={transactions}
+            onLoadMore={onLoadMore}
+            onOpenTransaction={onOpenTransaction}
+          />
+        </PullToRefresh>
+      </>
     </SelectedProvider>
   );
 }
 
-function BalanceWithCleared({ balanceUncleared, balanceCleared, balance }) {
+function BalanceWithCleared({
+  balanceUncleared,
+  balanceCleared,
+  balance,
+}: {
+  balanceUncleared: SheetFields<SheetNames>
+  balanceCleared: SheetFields<SheetNames>
+  balance: SheetFields<SheetNames>
+}) {
   const unclearedAmount = useSheetValue(balanceUncleared);
 
   return (
@@ -127,7 +152,10 @@ function BalanceWithCleared({ balanceUncleared, balanceCleared, balance }) {
           title={t('Cleared')}
           style={{ textAlign: 'center', fontSize: 12 }}
         />
-        <CellValue binding={balanceCleared} type="financial">
+        <CellValue
+          binding={balance}
+          type="financial"
+        >
           {props => (
             <CellValueText
               {...props}
@@ -152,7 +180,10 @@ function BalanceWithCleared({ balanceUncleared, balanceCleared, balance }) {
           title={t('Uncleared')}
           style={{ textAlign: 'center', fontSize: 12 }}
         />
-        <CellValue binding={balanceUncleared} type="financial">
+        <CellValue
+          binding={balance}
+          type="financial"
+        >
           {props => (
             <CellValueText
               {...props}
@@ -170,7 +201,11 @@ function BalanceWithCleared({ balanceUncleared, balanceCleared, balance }) {
   );
 }
 
-function Balance({ balance }) {
+function Balance({
+  balance,
+}: {
+  balance: SheetFields<SheetNames>;
+}) {
   return (
     <View style={{ flexBasis: '33%' }}>
       <Label title={t('Balance')} style={{ textAlign: 'center' }} />

From e1ec31703a68bcc0b5ffee14b561a5a39dd1c7af Mon Sep 17 00:00:00 2001
From: Cindy Wu <ciindy.wu@gmail.com>
Date: Thu, 21 Nov 2024 21:07:02 -1000
Subject: [PATCH 2/8] linting

---
 .../mobile/accounts/AccountTransactions.tsx   | 14 +++++--
 .../TransactionListWithBalances.tsx           | 37 +++++++++----------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
index 868a1c1aea3..2f662d3384e 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
@@ -43,10 +43,10 @@ import { Button } from '../../common/Button2';
 import { Text } from '../../common/Text';
 import { View } from '../../common/View';
 import { MobilePageHeader, Page } from '../../Page';
+import { type SheetFields, type SheetNames } from '../../spreadsheet/index';
 import { MobileBackButton } from '../MobileBackButton';
 import { AddTransactionButton } from '../transactions/AddTransactionButton';
 import { TransactionListWithBalances } from '../transactions/TransactionListWithBalances';
-import { type SheetFields, type SheetNames } from '../../spreadsheet/index';
 
 export function AccountTransactions({
   account,
@@ -323,8 +323,16 @@ function TransactionListWithPreviews({
       isLoading={isLoading}
       transactions={transactionsToDisplay}
       balance={balanceQueries.balance.name as SheetFields<SheetNames>}
-      balanceCleared={balanceQueries.cleared.name ? balanceQueries.cleared.name as SheetFields<SheetNames> : undefined}
-      balanceUncleared={balanceQueries.uncleared.name ? balanceQueries.uncleared.name as SheetFields<SheetNames>: undefined}
+      balanceCleared={
+        balanceQueries.cleared.name
+          ? (balanceQueries.cleared.name as SheetFields<SheetNames>)
+          : undefined
+      }
+      balanceUncleared={
+        balanceQueries.uncleared.name
+          ? (balanceQueries.uncleared.name as SheetFields<SheetNames>)
+          : undefined
+      }
       onLoadMore={loadMoreTransactions}
       searchPlaceholder={`Search ${accountName}`}
       onSearch={onSearch}
diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
index a5bc77c77ea..a588eaa2cd5 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 
 import { t } from 'i18next';
 
+import { type TransactionEntity } from 'loot-core/types/models';
+
 import { SelectedProvider, useSelected } from '../../../hooks/useSelected';
 import { SvgSearchAlternate } from '../../../icons/v2';
 import { styles, theme } from '../../../style';
@@ -14,9 +16,14 @@ import { useSheetValue } from '../../spreadsheet/useSheetValue';
 import { PullToRefresh } from '../PullToRefresh';
 
 import { TransactionList } from './TransactionList';
-import { TransactionEntity } from 'loot-core/types/models';
 
-function TransactionSearchInput({ placeholder, onSearch }: { placeholder: string, onSearch: any}) {
+function TransactionSearchInput({
+  placeholder,
+  onSearch,
+}: {
+  placeholder: string;
+  onSearch: (searchText: string) => void;
+}) {
   const [text, setText] = useState<string>('');
 
   return (
@@ -108,7 +115,9 @@ export function TransactionListWithBalances({
                 balanceUncleared={balanceUncleared}
               />
             ) : (
-              <Balance balance={balance as unknown as SheetFields<SheetNames>} />
+              <Balance
+                balance={balance as unknown as SheetFields<SheetNames>}
+              />
             )}
           </View>
           <TransactionSearchInput
@@ -134,9 +143,9 @@ function BalanceWithCleared({
   balanceCleared,
   balance,
 }: {
-  balanceUncleared: SheetFields<SheetNames>
-  balanceCleared: SheetFields<SheetNames>
-  balance: SheetFields<SheetNames>
+  balanceUncleared: SheetFields<SheetNames>;
+  balanceCleared: SheetFields<SheetNames>;
+  balance: SheetFields<SheetNames>;
 }) {
   const unclearedAmount = useSheetValue(balanceUncleared);
 
@@ -152,10 +161,7 @@ function BalanceWithCleared({
           title={t('Cleared')}
           style={{ textAlign: 'center', fontSize: 12 }}
         />
-        <CellValue
-          binding={balance}
-          type="financial"
-        >
+        <CellValue binding={balance} type="financial">
           {props => (
             <CellValueText
               {...props}
@@ -180,10 +186,7 @@ function BalanceWithCleared({
           title={t('Uncleared')}
           style={{ textAlign: 'center', fontSize: 12 }}
         />
-        <CellValue
-          binding={balance}
-          type="financial"
-        >
+        <CellValue binding={balance} type="financial">
           {props => (
             <CellValueText
               {...props}
@@ -201,11 +204,7 @@ function BalanceWithCleared({
   );
 }
 
-function Balance({
-  balance,
-}: {
-  balance: SheetFields<SheetNames>;
-}) {
+function Balance({ balance }: { balance: SheetFields<SheetNames> }) {
   return (
     <View style={{ flexBasis: '33%' }}>
       <Label title={t('Balance')} style={{ textAlign: 'center' }} />

From 9e797533e9595fe9bf86d90efda0ef3687c837a1 Mon Sep 17 00:00:00 2001
From: Cindy Wu <ciindy.wu@gmail.com>
Date: Thu, 21 Nov 2024 21:08:27 -1000
Subject: [PATCH 3/8] revert unwanted changes

---
 .../mobile/transactions/TransactionListWithBalances.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
index a588eaa2cd5..5bca5150ff8 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
@@ -161,7 +161,7 @@ function BalanceWithCleared({
           title={t('Cleared')}
           style={{ textAlign: 'center', fontSize: 12 }}
         />
-        <CellValue binding={balance} type="financial">
+        <CellValue binding={balanceCleared} type="financial">
           {props => (
             <CellValueText
               {...props}
@@ -186,7 +186,7 @@ function BalanceWithCleared({
           title={t('Uncleared')}
           style={{ textAlign: 'center', fontSize: 12 }}
         />
-        <CellValue binding={balance} type="financial">
+        <CellValue binding={balanceUncleared} type="financial">
           {props => (
             <CellValueText
               {...props}

From 7deeae307a9e4c73375ac4823f1321663bf0dd3e Mon Sep 17 00:00:00 2001
From: Cindy Wu <ciindy.wu@gmail.com>
Date: Thu, 21 Nov 2024 21:25:36 -1000
Subject: [PATCH 4/8] fixes onRefresh

---
 .../src/components/mobile/accounts/AccountTransactions.tsx  | 4 ++--
 .../mobile/transactions/TransactionListWithBalances.tsx     | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
index 2f662d3384e..a34b30560fe 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
@@ -248,9 +248,9 @@ function TransactionListWithPreviews({
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const onRefresh = useCallback(() => {
+  const onRefresh = useCallback(async () => {
     if (accountId) {
-      dispatch(syncAndDownload(accountId));
+      await dispatch(syncAndDownload(accountId));
     }
   }, [accountId, dispatch]);
 
diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
index 5bca5150ff8..5fa41e90a36 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
@@ -76,7 +76,7 @@ type TransactionListWithBalancesProps = {
   onSearch: (searchText: string) => void;
   onLoadMore: (() => void) | undefined;
   onOpenTransaction: (transaction: TransactionEntity) => void;
-  onRefresh: any;
+  onRefresh: () => Promise<void>;
 };
 
 export function TransactionListWithBalances({
@@ -115,9 +115,7 @@ export function TransactionListWithBalances({
                 balanceUncleared={balanceUncleared}
               />
             ) : (
-              <Balance
-                balance={balance as unknown as SheetFields<SheetNames>}
-              />
+              <Balance balance={balance} />
             )}
           </View>
           <TransactionSearchInput

From 328ae64ff3679b3f30a3636ef242515f4d2241d9 Mon Sep 17 00:00:00 2001
From: Cindy Wu <ciindy.wu@gmail.com>
Date: Thu, 21 Nov 2024 21:32:18 -1000
Subject: [PATCH 5/8] fix typecheck

---
 .../components/mobile/accounts/AccountTransactions.tsx    | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
index a34b30560fe..b4c0b9ffbbe 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
@@ -324,14 +324,10 @@ function TransactionListWithPreviews({
       transactions={transactionsToDisplay}
       balance={balanceQueries.balance.name as SheetFields<SheetNames>}
       balanceCleared={
-        balanceQueries.cleared.name
-          ? (balanceQueries.cleared.name as SheetFields<SheetNames>)
-          : undefined
+        (balanceQueries.cleared?.name as SheetFields<SheetNames>) ?? undefined
       }
       balanceUncleared={
-        balanceQueries.uncleared.name
-          ? (balanceQueries.uncleared.name as SheetFields<SheetNames>)
-          : undefined
+        (balanceQueries.uncleared?.name as SheetFields<SheetNames>) ?? undefined
       }
       onLoadMore={loadMoreTransactions}
       searchPlaceholder={`Search ${accountName}`}

From 03cd67c4f9f8799eb1503ba8bfc06ab8c0b6c9cf Mon Sep 17 00:00:00 2001
From: Cindy Wu <ciindy.wu@gmail.com>
Date: Thu, 21 Nov 2024 21:35:40 -1000
Subject: [PATCH 6/8] adds release notes

---
 upcoming-release-notes/3876.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 upcoming-release-notes/3876.md

diff --git a/upcoming-release-notes/3876.md b/upcoming-release-notes/3876.md
new file mode 100644
index 00000000000..2f1fe597723
--- /dev/null
+++ b/upcoming-release-notes/3876.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [cindywu]
+---
+
+Convert TransactionListWithBalances.jsx to .tsx
\ No newline at end of file

From e7bcb1e53dae0eef4508399ea5c9f63c1a2ec9fb Mon Sep 17 00:00:00 2001
From: Cindy Wu <ciindy.wu@gmail.com>
Date: Thu, 21 Nov 2024 21:39:47 -1000
Subject: [PATCH 7/8] simplify

---
 .../mobile/transactions/TransactionListWithBalances.tsx         | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
index 5fa41e90a36..29995bbf3a1 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import { t } from 'i18next';
 
 import { type TransactionEntity } from 'loot-core/types/models';
-
 import { SelectedProvider, useSelected } from '../../../hooks/useSelected';
 import { SvgSearchAlternate } from '../../../icons/v2';
 import { styles, theme } from '../../../style';
@@ -14,7 +13,6 @@ import { CellValue, CellValueText } from '../../spreadsheet/CellValue';
 import { type SheetFields, type SheetNames } from '../../spreadsheet/index';
 import { useSheetValue } from '../../spreadsheet/useSheetValue';
 import { PullToRefresh } from '../PullToRefresh';
-
 import { TransactionList } from './TransactionList';
 
 function TransactionSearchInput({

From 0451d1d828d0dcb84674bac3701cc14ecd15e989 Mon Sep 17 00:00:00 2001
From: Cindy Wu <ciindy.wu@gmail.com>
Date: Fri, 22 Nov 2024 18:40:54 -1000
Subject: [PATCH 8/8] make linter happy

---
 .../mobile/transactions/TransactionListWithBalances.tsx         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
index 29995bbf3a1..5fa41e90a36 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { t } from 'i18next';
 
 import { type TransactionEntity } from 'loot-core/types/models';
+
 import { SelectedProvider, useSelected } from '../../../hooks/useSelected';
 import { SvgSearchAlternate } from '../../../icons/v2';
 import { styles, theme } from '../../../style';
@@ -13,6 +14,7 @@ import { CellValue, CellValueText } from '../../spreadsheet/CellValue';
 import { type SheetFields, type SheetNames } from '../../spreadsheet/index';
 import { useSheetValue } from '../../spreadsheet/useSheetValue';
 import { PullToRefresh } from '../PullToRefresh';
+
 import { TransactionList } from './TransactionList';
 
 function TransactionSearchInput({