Fix switching budget from rollover budget to report budget and immediately back does not work

packages/desktop-client/src/components/Titlebar.tsx

@@ -12,6 +12,7 @@ import { Routes, Route, useLocation } from 'react-router-dom';
 import * as Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
 import { listen } from 'loot-core/src/platform/client/fetch';
+import { type LocalPrefs } from 'loot-core/src/types/prefs';
 
 import { useActions } from '../hooks/useActions';
 import useFeatureFlag from '../hooks/useFeatureFlag';
@@ -41,9 +42,20 @@ import useSheetValue from './spreadsheet/useSheetValue';
 import { ThemeSelector } from './ThemeSelector';
 import { Tooltip } from './tooltips';
 
+export const SWITCH_BUDGET_MESSAGE_TYPE = 'budget/switch-type';
+
+type SwitchBudgetTypeMessage = {
+  type: typeof SWITCH_BUDGET_MESSAGE_TYPE;
+  payload: {
+    newBudgetType: LocalPrefs['budgetType'];
+  };
+};
+export type TitlebarMessage = SwitchBudgetTypeMessage;
+
+type Listener = (msg: TitlebarMessage) => void;
 export type TitlebarContextValue = {
-  sendEvent: (msg: string) => void;
-  subscribe: (listener) => () => void;
+  sendEvent: (msg: TitlebarMessage) => void;
+  subscribe: (listener: Listener) => () => void;
 };
 
 export let TitlebarContext = createContext<TitlebarContextValue>(null);
@@ -53,13 +65,13 @@ type TitlebarProviderProps = {
 };
 
 export function TitlebarProvider({ children }: TitlebarProviderProps) {
-  let listeners = useRef([]);
+  let listeners = useRef<Listener[]>([]);
 
-  function sendEvent(msg: string) {
+  function sendEvent(msg: TitlebarMessage) {
     listeners.current.forEach(func => func(msg));
   }
 
-  function subscribe(listener) {
+  function subscribe(listener: Listener) {
     listeners.current.push(listener);
     return () =>
       (listeners.current = listeners.current.filter(func => func !== listener));
@@ -268,7 +280,13 @@ function BudgetTitlebar() {
   function onSwitchType() {
     setLoading(true);
     if (!loading) {
-      sendEvent('budget/switch-type');
+      const newBudgetType = budgetType === 'rollover' ? 'report' : 'rollover';
+      sendEvent({
+        type: SWITCH_BUDGET_MESSAGE_TYPE,
+        payload: {
+          newBudgetType,
+        },
+      });
     }
   }
 

packages/desktop-client/src/components/budget/MobileBudget.js

@@ -328,8 +328,13 @@ class Budget extends Component {
 
     this.setState({ initialized: false });
 
-    await switchBudgetType(budgetType, spreadsheet, bounds, currentMonth, () =>
-      loadPrefs(),
+    const newBudgetType = budgetType === 'rollover' ? 'report' : 'rollover';
+    await switchBudgetType(
+      newBudgetType,
+      spreadsheet,
+      bounds,
+      currentMonth,
+      () => loadPrefs(),
     );
 
     this.setState({ initialized: true });

packages/desktop-client/src/components/budget/index.tsx

@@ -36,7 +36,12 @@ import useFeatureFlag from '../../hooks/useFeatureFlag';
 import useNavigate from '../../hooks/useNavigate';
 import { styles } from '../../style';
 import View from '../common/View';
-import { TitlebarContext, type TitlebarContextValue } from '../Titlebar';
+import {
+  SWITCH_BUDGET_MESSAGE_TYPE,
+  TitlebarContext,
+  type TitlebarContextValue,
+  type TitlebarMessage,
+} from '../Titlebar';
 
 import DynamicBudgetTable from './DynamicBudgetTable';
 import * as report from './report/ReportComponents';
@@ -406,11 +411,11 @@ function Budget(props: BudgetProps) {
     props.savePrefs({ 'budget.summaryCollapsed': collapsed });
   };
 
-  const onTitlebarEvent = async msg => {
-    switch (msg) {
-      case 'budget/switch-type': {
+  const onTitlebarEvent = async ({ type, payload }: TitlebarMessage) => {
+    switch (type) {
+      case SWITCH_BUDGET_MESSAGE_TYPE: {
         await switchBudgetType(
-          props.budgetType,
+          payload.newBudgetType,
           props.spreadsheet,
           bounds,
           prewarmStartMonth,

packages/desktop-client/src/components/budget/util.ts

@@ -165,18 +165,15 @@ export async function prewarmAllMonths(
 }
 
 export async function switchBudgetType(
-  budgetType: LocalPrefs['budgetType'],
+  newBudgetType: LocalPrefs['budgetType'],
   spreadsheet: ReturnType<typeof useSpreadsheet>,
   bounds: { start: string; end: string },
   startMonth: string,
   onSuccess: () => Promise<void> | undefined,
 ) {
-  let newType: 'rollover' | 'report' =
-    budgetType === 'rollover' ? 'report' : 'rollover';
-
   spreadsheet.disableObservers();
-  await send('budget-set-type', { type: newType });
-  await prewarmAllMonths(newType, spreadsheet, bounds, startMonth);
+  await send('budget-set-type', { type: newBudgetType });
+  await prewarmAllMonths(newBudgetType, spreadsheet, bounds, startMonth);
   spreadsheet.enableObservers();
   await onSuccess?.();
 }

upcoming-release-notes/1933.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [paulsukow]
+---
+
+Fix switching budget from rollover budget to report budget and immediately back does not work