[Mobile] Category activity/transactions page (#2531)

* Mobile category transactions * Release notes * Fix typo * Fix typecheck error * Handle null location state * VRT * Fix account search * Update test * Search placeholder * vrt * Add month to page title * Cleanup * Fix AccountName component * Replace ButtonLink with Link * Fix typecheck * Code review update
actualbudget · Apr 13, 2024 · 2d188b3 · 2d188b3
1 parent e88ea69
commit 2d188b3
Show file tree

Hide file tree

Showing 24 changed files with 861 additions and 650 deletions.
diff --git a/packages/desktop-client/e2e/page-models/mobile-account-page.js b/packages/desktop-client/e2e/page-models/mobile-account-page.js
@@ -5,7 +5,7 @@ export class MobileAccountPage {
     this.page = page;
 
     this.heading = page.getByRole('heading');
-    this.balance = page.getByTestId('account-balance');
+    this.balance = page.getByTestId('transactions-balance');
     this.noTransactionsFoundError = page.getByText('No transactions');
     this.searchBox = page.getByPlaceholder(/^Search/);
     this.transactionList = page.getByLabel('transaction list');

diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx
@@ -27,7 +27,7 @@ import { DevelopmentTopBar } from './DevelopmentTopBar';
 import { FatalError } from './FatalError';
 import { FinancesApp } from './FinancesApp';
 import { ManagementApp } from './manager/ManagementApp';
-import { MobileWebMessage } from './MobileWebMessage';
+import { MobileWebMessage } from './mobile/MobileWebMessage';
 import { UpdateNotification } from './UpdateNotification';
 
 type AppInnerProps = {

diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -30,6 +30,7 @@ import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext';
 import { View } from './common/View';
 import { GlobalKeys } from './GlobalKeys';
 import { ManageRulesPage } from './ManageRulesPage';
+import { Category } from './mobile/budget/Category';
 import { MobileNavTabs } from './mobile/MobileNavTabs';
 import { TransactionEdit } from './mobile/transactions/TransactionEdit';
 import { Modals } from './Modals';
@@ -210,7 +211,7 @@ function FinancesAppWithoutContext() {
                 />
 
                 <Route
-                  path="/accounts/:id/transactions/:transactionId"
+                  path="/transactions/:transactionId"
                   element={
                     <WideNotSupported>
                       <TransactionEdit />
@@ -219,18 +220,10 @@ function FinancesAppWithoutContext() {
                 />
 
                 <Route
-                  path="/accounts/:id/transactions/new"
+                  path="/categories/:id"
                   element={
                     <WideNotSupported>
-                      <TransactionEdit />
-                    </WideNotSupported>
-                  }
-                />
-                <Route
-                  path="/transactions/new"
-                  element={
-                    <WideNotSupported>
-                      <TransactionEdit />
+                      <Category />
                     </WideNotSupported>
                   }
                 />

diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx
@@ -8,10 +8,7 @@ import { bindActionCreators } from 'redux';
 import { validForTransfer } from 'loot-core/client/transfer';
 import * as actions from 'loot-core/src/client/actions';
 import { useFilters } from 'loot-core/src/client/data-hooks/filters';
-import {
-  SchedulesProvider,
-  useCachedSchedules,
-} from 'loot-core/src/client/data-hooks/schedules';
+import { SchedulesProvider } from 'loot-core/src/client/data-hooks/schedules';
 import * as queries from 'loot-core/src/client/queries';
 import { runQuery, pagedQuery } from 'loot-core/src/client/query-helpers';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
@@ -33,6 +30,7 @@ import { useDateFormat } from '../../hooks/useDateFormat';
 import { useFailedAccounts } from '../../hooks/useFailedAccounts';
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { usePayees } from '../../hooks/usePayees';
+import { usePreviewTransactions } from '../../hooks/usePreviewTransactions';
 import { SelectedProviderWithItems } from '../../hooks/useSelected';
 import {
   SplitsExpandedProvider,
@@ -94,38 +92,14 @@ function AllTransactions({
   filtered,
   children,
 }) {
-  const { id: accountId } = account;
-  const scheduleData = useCachedSchedules();
+  const accountId = account.id;
+  const prependTransactions = usePreviewTransactions().map(trans => ({
+    ...trans,
+    _inverse: accountId ? accountId !== trans.account : false,
+  }));
 
   transactions ??= [];
 
-  const schedules = useMemo(
-    () =>
-      scheduleData
-        ? scheduleData.schedules.filter(
-            s =>
-              !s.completed &&
-              ['due', 'upcoming', 'missed'].includes(
-                scheduleData.statuses.get(s.id),
-              ),
-          )
-        : [],
-    [scheduleData],
-  );
-
-  const prependTransactions = useMemo(() => {
-    return schedules.map(schedule => ({
-      id: `preview/${schedule.id}`,
-      payee: schedule._payee,
-      account: schedule._account,
-      amount: schedule._amount,
-      date: schedule.next_date,
-      notes: scheduleData.statuses.get(schedule.id),
-      schedule: schedule.id,
-      _inverse: accountId ? accountId !== schedule._account : false,
-    }));
-  }, [schedules, accountId]);
-
   let runningBalance = useMemo(() => {
     if (!showBalances) {
       return 0;
@@ -172,7 +146,7 @@ function AllTransactions({
     return balances;
   }, [filtered, prependBalances, balances]);
 
-  if (scheduleData == null) {
+  if (!prependTransactions) {
     return children(transactions, balances);
   }
   return children(allTransactions, allBalances);

diff --git a/packages/desktop-client/src/components/common/Link.tsx b/packages/desktop-client/src/components/common/Link.tsx
@@ -102,7 +102,9 @@ const ButtonLink = ({ to, style, activeStyle, ...props }: ButtonLinkProps) => {
       {...props}
       onClick={e => {
         props.onClick?.(e);
-        navigate(path);
+        if (!e.defaultPrevented) {
+          navigate(path);
+        }
       }}
     />
   );

diff --git a/...lient/src/components/MobileBackButton.tsx → ...rc/components/mobile/MobileBackButton.tsx b/...lient/src/components/MobileBackButton.tsx → ...rc/components/mobile/MobileBackButton.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { useNavigate } from '../hooks/useNavigate';
-import { SvgCheveronLeft } from '../icons/v1';
-import { type CSSProperties, styles, theme } from '../style';
-
-import { Button } from './common/Button';
-import { Text } from './common/Text';
+import { useNavigate } from '../../hooks/useNavigate';
+import { SvgCheveronLeft } from '../../icons/v1';
+import { type CSSProperties, styles, theme } from '../../style';
+import { Button } from '../common/Button';
+import { Text } from '../common/Text';
 
 type MobileBackButtonProps = {
   style?: CSSProperties;
@@ -16,6 +15,7 @@ export function MobileBackButton({ style }: MobileBackButtonProps) {
   return (
     <Button
       type="bare"
+      aria-label="Back"
       style={{
         color: theme.mobileHeaderText,
         justifyContent: 'center',

diff --git a/...lient/src/components/MobileWebMessage.tsx → ...rc/components/mobile/MobileWebMessage.tsx b/...lient/src/components/MobileWebMessage.tsx → ...rc/components/mobile/MobileWebMessage.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 
-import { useLocalPref } from '../hooks/useLocalPref';
-import { useResponsive } from '../ResponsiveProvider';
-import { theme, styles } from '../style';
-
-import { Button } from './common/Button';
-import { Text } from './common/Text';
-import { View } from './common/View';
-import { Checkbox } from './forms';
+import { useLocalPref } from '../../hooks/useLocalPref';
+import { useResponsive } from '../../ResponsiveProvider';
+import { theme, styles } from '../../style';
+import { Button } from '../common/Button';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+import { Checkbox } from '../forms';
 
 const buttonStyle = { border: 0, fontSize: 15, padding: '10px 13px' };