fix(reconiled-balance):Re-render on reconcile

src/extension/features/accounts/reconcile-balance/index.js → src/extension/features/accounts/reconcile-balance/index.ts

@@ -12,23 +12,23 @@ export class ReconcileBalance extends Feature {
   }
 
   shouldInvoke() {
-    let { selectedAccountId } = controllerLookup('accounts');
-    return selectedAccountId && isCurrentRouteAccountsPage();
+    return isCurrentRouteAccountsPage();
   }
 
   invoke() {
     // Get the current account id and calculate the current reconciled balance
-    let { selectedAccountId } = controllerLookup('accounts');
+    let accountsController = controllerLookup<YNABAccountsController>('accounts');
+    if (accountsController === undefined) return;
+    let { selectedAccountId } = accountsController;
     let reconciledBalance = formatCurrency(this._calculateReconciledBalance(selectedAccountId));
-
     // Retrieve or create the reconcile balance container
     let balanceContainer = $(`#${TK_RECONCILE_BALANCE_ID}`);
     if (!balanceContainer || balanceContainer.length === 0) {
       $(YNAB_ACCOUNTS_HEADER_BALANCES).prepend(
         `<div class="tk-accounts-header-balances-reconciled">
-        <span id="${TK_RECONCILE_BALANCE_ID}">${reconciledBalance}</span>
-        <div class="tk-accounts-header-reconcile-balance-label">Reconciled Balance</div>
-      </div>`
+          <span id="${TK_RECONCILE_BALANCE_ID}">${reconciledBalance}</span>
+          <div class="tk-accounts-header-reconcile-balance-label">Reconciled Balance</div>
+        </div>`
       );
     }
 
@@ -49,37 +49,37 @@ export class ReconcileBalance extends Feature {
     }
   }
 
-  observe(changedNodes) {
+  observe(changedNodes: Set<string>) {
     if (!this.shouldInvoke()) return;
 
     // When the reconciled balance icon changes, reevaluate our balance
-    if (changedNodes.has('is-reconciled-icon svg-icon lock')) {
+    if (
+      changedNodes.has('is-reconciled-icon svg-icon lock') ||
+      changedNodes.has('modal-account-reconcile-reconciled')
+    ) {
       this.invoke();
     }
   }
 
   /**
+   *
    * Calculate the a given accounts reconciled balance
-   * @param {String} accountId The account id to get the reconciled balance for
-   * @returns {Number} balance The reconciled balance of the account
+   *
    */
-  _calculateReconciledBalance = (accountId) => {
+
+  _calculateReconciledBalance = (accountId: string) => {
     const account = getEntityManager().getAccountById(accountId);
 
     return account.getTransactions().reduce((reduced, transaction) => {
-      if (transaction.cleared && !transaction.isTombstone && transaction.isReconciled()) {
+      if (transaction.cleared && !transaction.isTombstone && transaction.isReconciled?.()) {
         return reduced + transaction.amount;
       }
 
       return reduced;
     }, 0);
   };
 
-  /**
-   * Helper method to show and hide the reconcile balance container
-   * @param {Boolean} visible True to show the container, false to hide
-   */
-  _setFeatureVisibility = (visible) => {
+  _setFeatureVisibility = (visible: boolean) => {
     let featureContainer = $('.tk-accounts-header-balances-reconciled');
     if (featureContainer && featureContainer.length) {
       featureContainer.toggle(visible);

src/extension/features/feature.ts

@@ -44,7 +44,7 @@ export class Feature {
     });
   }
 
-  observe(): void {
+  observe(changedNodes: Set<string>): void {
     /* stubbed listener function */
   }
 

src/types/ynab/data/transaction.d.ts

@@ -46,4 +46,5 @@ export interface YNABTransaction {
   ynabId: string | null;
 
   isUncleared?: () => boolean;
+  isReconciled?: () => boolean;
 }