From 66dc593fa58488dd9b4bf244461b44aa50bedc77 Mon Sep 17 00:00:00 2001
From: David Kus <davidkus@users.noreply.github.com>
Date: Thu, 4 Apr 2024 11:04:19 -0400
Subject: [PATCH] Show/hide reconciled transactions in the account view (#2542)

* Show/hide reconciled transactions

* Adding release note

* Fixing lint issues

* Filters should still apply after hiding/showing reconciled

* Using fetch transactions with filter parameter
---
 .../src/components/accounts/Account.jsx       | 24 +++++++++++++++++++
 .../src/components/accounts/Header.jsx        |  8 +++++++
 packages/loot-core/src/types/prefs.d.ts       |  1 +
 upcoming-release-notes/2542.md                |  6 +++++
 4 files changed, 39 insertions(+)
 create mode 100644 upcoming-release-notes/2542.md

diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx
index 5b51fe436e0..4147a1aefd2 100644
--- a/packages/desktop-client/src/components/accounts/Account.jsx
+++ b/packages/desktop-client/src/components/accounts/Account.jsx
@@ -213,6 +213,7 @@ class AccountInternal extends PureComponent {
       showBalances: props.showBalances,
       balances: null,
       showCleared: props.showCleared,
+      showReconciled: props.showReconciled,
       editingName: false,
       isAdding: false,
       latestDate: null,
@@ -359,6 +360,11 @@ class AccountInternal extends PureComponent {
       this.paged.unsubscribe();
     }
 
+    // Filter out reconciled transactions if necessary.
+    if (!this.state.showReconciled) {
+      query = query.filter({ reconciled: { $eq: false } });
+    }
+
     this.paged = pagedQuery(
       query.select('*'),
       async (data, prevData) => {
@@ -420,6 +426,7 @@ class AccountInternal extends PureComponent {
           showBalances: nextProps.showBalances,
           balances: null,
           showCleared: nextProps.showCleared,
+          showReconciled: nextProps.showReconciled,
           reconcileAmount: null,
         },
         () => {
@@ -651,6 +658,19 @@ class AccountInternal extends PureComponent {
           this.setState({ showCleared: true });
         }
         break;
+      case 'toggle-reconciled':
+        if (this.state.showReconciled) {
+          this.props.savePrefs({ ['hide-reconciled-' + accountId]: true });
+          this.setState({ showReconciled: false }, () =>
+            this.fetchTransactions(this.state.filters),
+          );
+        } else {
+          this.props.savePrefs({ ['hide-reconciled-' + accountId]: false });
+          this.setState({ showReconciled: true }, () =>
+            this.fetchTransactions(this.state.filters),
+          );
+        }
+        break;
       default:
     }
   };
@@ -1404,6 +1424,7 @@ class AccountInternal extends PureComponent {
       showBalances,
       balances,
       showCleared,
+      showReconciled,
     } = this.state;
 
     const account = accounts.find(account => account.id === accountId);
@@ -1462,6 +1483,7 @@ class AccountInternal extends PureComponent {
                 showBalances={showBalances}
                 showExtraBalances={showExtraBalances}
                 showCleared={showCleared}
+                showReconciled={showReconciled}
                 showEmptyMessage={showEmptyMessage}
                 balanceQuery={balanceQuery}
                 canCalculateBalance={this.canCalculateBalance}
@@ -1605,6 +1627,7 @@ export function Account() {
   const [expandSplits] = useLocalPref('expand-splits');
   const [showBalances] = useLocalPref(`show-balances-${params.id}`);
   const [hideCleared] = useLocalPref(`hide-cleared-${params.id}`);
+  const [hideReconciled] = useLocalPref(`hide-reconciled-${params.id}`);
   const [showExtraBalances] = useLocalPref(
     `show-extra-balances-${params.id || 'all-accounts'}`,
   );
@@ -1626,6 +1649,7 @@ export function Account() {
     expandSplits,
     showBalances,
     showCleared: !hideCleared,
+    showReconciled: !hideReconciled,
     showExtraBalances,
     payees,
     modalShowing,
diff --git a/packages/desktop-client/src/components/accounts/Header.jsx b/packages/desktop-client/src/components/accounts/Header.jsx
index 1dea67b9ffc..339225a38d3 100644
--- a/packages/desktop-client/src/components/accounts/Header.jsx
+++ b/packages/desktop-client/src/components/accounts/Header.jsx
@@ -46,6 +46,7 @@ export function AccountHeader({
   showBalances,
   showExtraBalances,
   showCleared,
+  showReconciled,
   showEmptyMessage,
   balanceQuery,
   reconcileAmount,
@@ -323,6 +324,7 @@ export function AccountHeader({
                   isSorted={isSorted}
                   showBalances={showBalances}
                   showCleared={showCleared}
+                  showReconciled={showReconciled}
                   onMenuSelect={item => {
                     setMenuOpen(false);
                     onMenuSelect(item);
@@ -382,6 +384,7 @@ function AccountMenu({
   showBalances,
   canShowBalances,
   showCleared,
+  showReconciled,
   onClose,
   isSorted,
   onReconcile,
@@ -419,6 +422,11 @@ function AccountMenu({
             name: 'toggle-cleared',
             text: (showCleared ? 'Hide' : 'Show') + ' “cleared” checkboxes',
           },
+          {
+            name: 'toggle-reconciled',
+            text:
+              (showReconciled ? 'Hide' : 'Show') + ' reconciled transactions',
+          },
           { name: 'export', text: 'Export' },
           { name: 'reconcile', text: 'Reconcile' },
           account &&
diff --git a/packages/loot-core/src/types/prefs.d.ts b/packages/loot-core/src/types/prefs.d.ts
index 0db98547329..9989c0fe0f3 100644
--- a/packages/loot-core/src/types/prefs.d.ts
+++ b/packages/loot-core/src/types/prefs.d.ts
@@ -26,6 +26,7 @@ export type LocalPrefs = Partial<
     'expand-splits': boolean;
     [key: `show-extra-balances-${string}`]: boolean;
     [key: `hide-cleared-${string}`]: boolean;
+    [key: `hide-reconciled-${string}`]: boolean;
     'budget.collapsed': string[];
     'budget.summaryCollapsed': boolean;
     'budget.showHiddenCategories': boolean;
diff --git a/upcoming-release-notes/2542.md b/upcoming-release-notes/2542.md
new file mode 100644
index 00000000000..d34650155db
--- /dev/null
+++ b/upcoming-release-notes/2542.md
@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [davidkus]
+---
+
+Adding menu item to show/hide reconciled transactions in the account view.