From 458fa43d34e936b73f39b858906b65a9f7f48705 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Sat, 13 Apr 2024 08:16:40 -0700
Subject: [PATCH] Code review update

---
 .../components/mobile/MobileBackButton.tsx    |  1 +
 .../mobile/accounts/AccountTransactions.jsx   | 40 ++++++++-----------
 .../transactions/AddTransactionButton.tsx     | 12 ++----
 .../mobile/transactions/ListBox.jsx           |  2 +-
 4 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
index 6128ba3daee..f563dcab834 100644
--- a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
@@ -15,6 +15,7 @@ export function MobileBackButton({ style }: MobileBackButtonProps) {
   return (
     <Button
       type="bare"
+      aria-label="Back"
       style={{
         color: theme.mobileHeaderText,
         justifyContent: 'center',
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
index 69a036571cc..cf9c1c2e278 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
@@ -176,39 +176,31 @@ function TransactionListWithPreviews({ account }) {
     );
   }, []);
 
-  const fetchTransactions = useCallback(async () => {
+  const fetchTransactions = useCallback(() => {
     const query = makeRootQuery();
     setCurrentQuery(query);
     updateQuery(query);
   }, [makeRootQuery, updateQuery]);
 
   useEffect(() => {
-    let unlisten;
-
-    async function setUpAccount() {
-      unlisten = listen('sync-event', ({ type, tables }) => {
-        if (type === 'applied') {
-          if (
-            tables.includes('transactions') ||
-            tables.includes('category_mapping') ||
-            tables.includes('payee_mapping')
-          ) {
-            paged.current?.run();
-          }
-
-          if (tables.includes('payees') || tables.includes('payee_mapping')) {
-            dispatch(getPayees());
-          }
+    const unlisten = listen('sync-event', ({ type, tables }) => {
+      if (type === 'applied') {
+        if (
+          tables.includes('transactions') ||
+          tables.includes('category_mapping') ||
+          tables.includes('payee_mapping')
+        ) {
+          paged.current?.run();
         }
-      });
 
-      await fetchTransactions();
-
-      dispatch(markAccountRead(account.id));
-    }
-
-    setUpAccount();
+        if (tables.includes('payees') || tables.includes('payee_mapping')) {
+          dispatch(getPayees());
+        }
+      }
+    });
 
+    fetchTransactions();
+    dispatch(markAccountRead(account.id));
     return () => unlisten();
   }, [account.id, dispatch, fetchTransactions]);
 
diff --git a/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx b/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx
index 42cc10b21e9..a37822163f2 100644
--- a/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { SvgAdd } from '../../../icons/v1';
 import { theme } from '../../../style';
-import { Link } from '../../common/Link';
+import { Button } from '../../common/Button';
 
 type AddTransactionButtonProps = {
   to: string;
@@ -18,9 +18,7 @@ export function AddTransactionButton({
 }: AddTransactionButtonProps) {
   const navigate = useNavigate();
   return (
-    <Link
-      variant="button"
-      to={to}
+    <Button
       type="bare"
       aria-label="Add transaction"
       style={{
@@ -32,13 +30,11 @@ export function AddTransactionButton({
         color: theme.mobileHeaderText,
         background: theme.mobileHeaderTextHover,
       }}
-      activeStyle={{ background: 'transparent' }}
-      onClick={e => {
-        e.preventDefault();
+      onClick={() => {
         navigate(to, { state: { accountId, categoryId } });
       }}
     >
       <SvgAdd width={20} height={20} />
-    </Link>
+    </Button>
   );
 }
diff --git a/packages/desktop-client/src/components/mobile/transactions/ListBox.jsx b/packages/desktop-client/src/components/mobile/transactions/ListBox.jsx
index 028c1787e3e..402a950d8d3 100644
--- a/packages/desktop-client/src/components/mobile/transactions/ListBox.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/ListBox.jsx
@@ -15,7 +15,7 @@ export function ListBox(props) {
   const { loadMore } = props;
 
   const { hasScrolledToBottom } = useScroll();
-  const scrolledToBottom = hasScrolledToBottom();
+  const scrolledToBottom = hasScrolledToBottom(5);
   const prevScrolledToBottom = usePrevious(scrolledToBottom);
 
   if (!prevScrolledToBottom && scrolledToBottom) {