fix: adapt multiple features to glimmer (#2975)

src/extension/features/accounts/toggle-transaction-filters/index.js

@@ -40,6 +40,10 @@ export class ToggleTransactionFilters extends Feature {
     return true;
   }
 
+  invoke() {
+    //
+  }
+
   observe(changedNodes) {
     if (!this.shouldInvoke()) return;
 

src/extension/features/budget/collapse-inspector/index.js

@@ -16,11 +16,17 @@ export class CollapseInspector extends Feature {
   }
 
   invoke() {
-    this.addToolkitEmberHook('budget/budget-inspector', 'didRender', this.updateDOM);
-
     this.setInspectorCollapsed(getToolkitStorageKey('collapse-inspector', false));
   }
 
+  observe(changedNodes) {
+    if (!this.shouldInvoke()) return;
+
+    if (changedNodes.has('budget-inspector')) {
+      this.updateDOM();
+    }
+  }
+
   collapseButton() {
     return $(`
       <button class="sidebar-collapse">

src/extension/features/budget/custom-average-budgeting/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { controllerLookup, getEmberView } from 'toolkit/extension/utils/ember';
-import { getBudgetController, getEntityManager } from 'toolkit/extension/utils/ynab';
+import { getEmberView } from 'toolkit/extension/utils/ember';
+import { getBudgetService, getEntityManager } from 'toolkit/extension/utils/ynab';
 import { formatCurrency } from 'toolkit/extension/utils/currency';
 import { Feature } from '../../feature';
 import { componentAfter } from 'toolkit/extension/utils/react';
@@ -35,7 +35,15 @@ export class CustomAverageBudgeting extends Feature {
   }
 
   invoke() {
-    this.addToolkitEmberHook('budget-breakdown', 'didRender', this._renderButton);
+    //
+  }
+
+  observe(changedNodes: Set<string>) {
+    if (!this.shouldInvoke()) return;
+
+    if (changedNodes.has('budget-inspector-button')) {
+      this._renderButton();
+    }
   }
 
   _calculateAverage = () => {
@@ -49,7 +57,7 @@ export class CustomAverageBudgeting extends Feature {
     );
 
     const endDate = new Date();
-    endDate.setMonth(startDate.getMonth() - 1);
+    endDate.setMonth(endDate.getMonth() - 1);
     const endMonth = ynab.utilities.DateWithoutTime.createFromYearMonthDate(
       endDate.getFullYear(),
       endDate.getMonth(),
@@ -101,8 +109,8 @@ export class CustomAverageBudgeting extends Feature {
   };
 
   _getSelectedCategoryId = () => {
-    if (getBudgetController()?.checkedRowsCount === 1) {
-      return getBudgetController()?.checkedRows[0].categoryId;
+    if (getBudgetService()?.checkedRowsCount === 1) {
+      return getBudgetService()?.checkedRows[0].categoryId;
     }
 
     return null;
@@ -118,12 +126,9 @@ export class CustomAverageBudgeting extends Feature {
     }
   };
 
-  _renderButton = (element: Element) => {
+  _renderButton = () => {
     if (this._getSelectedCategoryId() == null) return;
-    const target = $(
-      '.inspector-quick-budget .option-groups button:contains("Average Spent")',
-      element
-    );
+    const target = $('.inspector-quick-budget .option-groups button:contains("Average Spent")');
     if (target.length === 0 || document.querySelector('#tk-average-months') !== null) {
       return;
     }

src/extension/features/budget/display-total-overspent/index.js

@@ -1,15 +1,22 @@
 import { Feature } from 'toolkit/extension/features/feature';
 import { getEmberView } from 'toolkit/extension/utils/ember';
 import { formatCurrency } from 'toolkit/extension/utils/currency';
-import { addToolkitEmberHook } from 'toolkit/extension/utils/toolkit';
 
 export class DisplayTotalOverspent extends Feature {
   shouldInvoke() {
     return true;
   }
 
   invoke() {
-    addToolkitEmberHook(this, 'budget/budget-inspector', 'didRender', this.addTotalOverspent);
+    //
+  }
+
+  observe(changedNodes) {
+    if (!this.shouldInvoke()) return;
+
+    if (changedNodes.has('budget-inspector-button')) {
+      this.addTotalOverspent();
+    }
   }
 
   destroy() {

src/extension/features/budget/live-on-last-months-income/index.js

@@ -9,14 +9,22 @@ export class LiveOnLastMonthsIncome extends Feature {
   }
 
   invoke() {
-    this.addToolkitEmberHook('budget-breakdown', 'didRender', this.injectLastMonthsIncome);
+    //
+  }
+
+  observe(changedNodes) {
+    if (!this.shouldInvoke()) return;
+
+    if (changedNodes.has('budget-inspector-button')) {
+      this.injectLastMonthsIncome();
+    }
   }
 
   destroy() {
     document.querySelector('#tk-last-months-income')?.remove();
   }
 
-  injectLastMonthsIncome(element) {
+  injectLastMonthsIncome() {
     // Get current month and year
     const currentBudgetDate = getCurrentBudgetDate();
     const currentYear = parseInt(currentBudgetDate.year);
@@ -54,7 +62,7 @@ export class LiveOnLastMonthsIncome extends Feature {
 
     // Add the income from last month section and structure, if not already in place
     if ($('#tk-last-months-income').length === 0) {
-      $('.budget-breakdown-monthly-totals', element).after(
+      $('.budget-breakdown-monthly-totals').after(
         $('<section>', {
           class: 'card',
           id: 'tk-last-months-income',
@@ -91,15 +99,15 @@ export class LiveOnLastMonthsIncome extends Feature {
     const budgeted = currentBudgetCalculation?.budgeted || 0;
 
     // Create variance line
-    $('#tk-last-months-income .tk-title', element).text(
+    $('#tk-last-months-income .tk-title').text(
       `${l10n('toolkit.incomeIn', 'Income In')} ${incomeMonthName}`
     );
-    $('#tk-last-months-income .tk-value', element).text(formatCurrency(income));
+    $('#tk-last-months-income .tk-value').text(formatCurrency(income));
 
-    $('#tk-assigned-in-month .tk-title', element).text(
+    $('#tk-assigned-in-month .tk-title').text(
       `${l10n('toolkit.assignedIn', 'Assigned in')} ${currentMonthName}`
     );
-    $('#tk-assigned-in-month .tk-value', element).text(formatCurrency(budgeted));
-    $('#tk-variance-in-month .tk-value', element).text(formatCurrency(income - budgeted));
+    $('#tk-assigned-in-month .tk-value').text(formatCurrency(budgeted));
+    $('#tk-variance-in-month .tk-value').text(formatCurrency(income - budgeted));
   }
 }

src/extension/features/budget/show-available-after-savings/index.js

@@ -1,6 +1,6 @@
-import { getEmberView } from 'toolkit/extension/utils/ember';
 import { Feature } from 'toolkit/extension/features/feature';
 import { l10n } from 'toolkit/extension/utils/toolkit';
+import { getBudgetService } from 'toolkit/extension/utils/ynab';
 import { getBudgetBreakdownEntries } from '../subtract-upcoming-from-available/budget-breakdown-monthly-totals';
 import { isSavingsCategory } from '../subtract-upcoming-from-available/categories';
 
@@ -10,7 +10,15 @@ export class ShowAvailableAfterSavings extends Feature {
   }
 
   invoke() {
-    this.addToolkitEmberHook('budget-breakdown', 'didRender', this.handleBudgetBreakdown);
+    //
+  }
+
+  observe(changedNodes) {
+    if (!this.shouldInvoke()) return;
+
+    if (changedNodes.has('budget-inspector-button')) {
+      this.handleBudgetBreakdown();
+    }
   }
 
   destroy() {
@@ -21,21 +29,20 @@ export class ShowAvailableAfterSavings extends Feature {
     $('#tk-total-available-after-savings').remove();
   }
 
-  handleBudgetBreakdown(element) {
+  handleBudgetBreakdown() {
     this.removeAvailableAfterSavings();
 
-    const $budgetBreakdownMonthlyTotals = $('.budget-breakdown-monthly-totals', element);
+    const $budgetBreakdownMonthlyTotals = $('.budget-breakdown-monthly-totals');
     if (!$budgetBreakdownMonthlyTotals.length) return;
 
-    const budgetBreakdown = getEmberView(element.id);
-    if (!budgetBreakdown) return;
-
-    this.showAvailableAfterSavings(budgetBreakdown, $budgetBreakdownMonthlyTotals);
+    this.showAvailableAfterSavings($budgetBreakdownMonthlyTotals);
   }
 
-  showAvailableAfterSavings(budgetBreakdown, context) {
-    const totalAvailable = budgetBreakdown.budgetTotals.available;
-    const totalSavings = getTotalSavings(budgetBreakdown);
+  showAvailableAfterSavings(context) {
+    const inspectorCategories = getBudgetService().inspectorCategories;
+
+    const totalAvailable = inspectorCategories.reduce((p, c) => p + c.available);
+    const totalSavings = getTotalSavings(inspectorCategories);
     const totalAvailableAfterSavings = totalAvailable - totalSavings;
 
     if (totalAvailableAfterSavings === totalAvailable) return;
@@ -52,10 +59,10 @@ export class ShowAvailableAfterSavings extends Feature {
   }
 }
 
-export function getTotalSavings(budgetBreakdown) {
+export function getTotalSavings(inspectorCategories) {
   let totalSavings = 0;
 
-  for (const category of budgetBreakdown.inspectorCategories) {
+  for (const category of inspectorCategories) {
     if (isSavingsCategory(category))
       totalSavings += category.available < 0 ? 0 : category.available; // If available is less than 0, it will already have been subtracted from YNAB's total available.
   }

src/extension/features/budget/subtract-upcoming-from-available/budget-breakdown-available-balance.js

@@ -1,29 +1,29 @@
 /* eslint-disable no-continue */
 import { formatCurrency, getCurrencyClass } from 'toolkit/extension/utils/currency';
-import { getEmberView } from 'toolkit/extension/utils/ember';
 import { l10n } from 'toolkit/extension/utils/toolkit';
+import { getBudgetService } from 'toolkit/extension/utils/ynab';
 import * as categories from './categories';
 import { resetInspectorMessage } from './destroy-helpers';
 import { setInspectorMessageOriginalValues } from './destroy-helpers';
 import { shouldRun } from './index';
 
 // This file handles the case when YNAB provides its own available after upcoming when one category is selected.
 
-export function handleBudgetBreakdownAvailableBalance(element) {
+export function handleBudgetBreakdownAvailableBalance() {
   resetInspectorMessage();
 
   if (!shouldRun()) return;
 
-  const $budgetBreakdownAvailableBalance = $('.budget-breakdown-available-balance', element);
+  const $budgetBreakdownAvailableBalance = $('.budget-breakdown-available-balance');
   if (!$budgetBreakdownAvailableBalance.length) return;
 
   const $inspectorMessageObjects = getInspectorMessageObjects();
   if (!$inspectorMessageObjects) return;
 
-  const budgetBreakdown = getEmberView(element.id);
-  if (!budgetBreakdown) return;
+  const inspectorCategories = getBudgetService()?.inspectorCategories;
+  if (!inspectorCategories) return;
 
-  const totals = categories.getTotals(budgetBreakdown);
+  const totals = categories.getTotals(inspectorCategories);
   if (!totals) return;
 
   inspectorMessageValues(totals, $inspectorMessageObjects);

src/extension/features/budget/subtract-upcoming-from-available/budget-breakdown-monthly-totals.js

@@ -1,24 +1,24 @@
 /* eslint-disable no-continue */
 import { formatCurrency, getCurrencyClass } from 'toolkit/extension/utils/currency';
-import { getEmberView } from 'toolkit/extension/utils/ember';
 import { l10n } from 'toolkit/extension/utils/toolkit';
+import { getBudgetService } from 'toolkit/extension/utils/ynab';
 import * as categories from './categories';
 import { removeBudgetBreakdownEntries } from './destroy-helpers';
 import { shouldRun } from './index';
 
-export function handleBudgetBreakdownMonthlyTotals(element) {
+export function handleBudgetBreakdownMonthlyTotals() {
   // Remove budget breakdown entries if they exist.
   removeBudgetBreakdownEntries();
 
   if (!shouldRun()) return;
 
-  const $budgetBreakdownMonthlyTotals = $('.budget-breakdown-monthly-totals', element);
+  const $budgetBreakdownMonthlyTotals = $('.budget-breakdown-monthly-totals');
   if (!$budgetBreakdownMonthlyTotals.length) return;
 
-  const budgetBreakdown = getEmberView(element.id);
-  if (!budgetBreakdown) return;
+  const inspectorCategories = getBudgetService()?.inspectorCategories;
+  if (!inspectorCategories) return;
 
-  const totals = categories.getTotals(budgetBreakdown);
+  const totals = categories.getTotals(inspectorCategories);
   if (!totals) return;
 
   setBudgetBreakdown(totals, $budgetBreakdownMonthlyTotals);

src/extension/features/budget/subtract-upcoming-from-available/categories.js

@@ -44,15 +44,16 @@ export function setAndGetCategoryData(category) {
 }
 
 // Get totals for selected month.
-export function getTotals(budgetBreakdown) {
+export function getTotals(inspectorCategories) {
   const totals = {
     totalPreviousUpcoming: 0,
     totalUpcoming: 0,
     totalCCPayments: 0,
+    totalAvailable: 0,
     totalAvailableAfterUpcoming: 0,
   };
 
-  const filteredInspectorCategories = budgetBreakdown.inspectorCategories.filter((category) => {
+  const filteredInspectorCategories = inspectorCategories.filter((category) => {
     return isRelevantCategory(category);
   });
 
@@ -64,6 +65,7 @@ export function getTotals(budgetBreakdown) {
 
     totals.totalPreviousUpcoming += categoryData.previousUpcoming;
     totals.totalUpcoming += categoryData.upcoming;
+    totals.totalAvailable += categoryData.available;
 
     if (!noCC && category.isCreditCardPaymentCategory) {
       /*
@@ -81,9 +83,9 @@ export function getTotals(budgetBreakdown) {
   }
 
   const totalSavings = ynabToolKit.options.ShowAvailableAfterSavings
-    ? getTotalSavings(budgetBreakdown)
+    ? getTotalSavings(inspectorCategories)
     : 0;
-  const totalAvailable = budgetBreakdown.budgetTotals.available - totalSavings;
+  const totalAvailable = totals.totalAvailable - totalSavings;
 
   totals.totalAvailableAfterUpcoming =
     totalAvailable + totals.totalPreviousUpcoming + totals.totalUpcoming - totals.totalCCPayments;

src/extension/features/budget/subtract-upcoming-from-available/index.js

@@ -13,10 +13,18 @@ export class SubtractUpcomingFromAvailable extends Feature {
 
   invoke() {
     setCategoriesObject();
-    this.addToolkitEmberHook('budget-breakdown', 'didRender', this.handleBudgetBreakdown);
     this.addToolkitEmberHook('budget-table-row', 'didRender', handleBudgetTableRow);
   }
 
+  observe(changedNodes) {
+    if (!this.shouldInvoke()) return;
+
+    if (changedNodes.has('budget-inspector-button')) {
+      handleBudgetBreakdownAvailableBalance();
+      handleBudgetBreakdownMonthlyTotals();
+    }
+  }
+
   onRouteChanged() {
     setCategoriesObject();
   }
@@ -26,11 +34,6 @@ export class SubtractUpcomingFromAvailable extends Feature {
     destroyHelpers.removeBudgetBreakdownEntries();
     destroyHelpers.resetCategoryValues();
   }
-
-  handleBudgetBreakdown(element) {
-    handleBudgetBreakdownAvailableBalance(element);
-    handleBudgetBreakdownMonthlyTotals(element);
-  }
 }
 
 export function shouldRun() {