From c3c6acd37cb114f7bc9ddc764ac236375ff0ee34 Mon Sep 17 00:00:00 2001
From: Yusef Ouda <YusefOuda@users.noreply.github.com>
Date: Thu, 1 Aug 2024 11:59:04 -0500
Subject: [PATCH] Fix budget type toggle not working the first time (#3169)

* use default 'rollover' for budgetType localPref

* release notes

---------

Co-authored-by: Yusef Ouda <5180063+YusefOuda@users.noreply.github.com>
---
 .../src/components/autocomplete/CategoryAutocomplete.tsx    | 2 +-
 packages/desktop-client/src/components/budget/index.tsx     | 3 +--
 .../desktop-client/src/components/mobile/budget/index.tsx   | 3 +--
 .../src/components/settings/BudgetTypeSettings.tsx          | 2 +-
 .../desktop-client/src/components/settings/Experimental.tsx | 2 +-
 upcoming-release-notes/3169.md                              | 6 ++++++
 6 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 upcoming-release-notes/3169.md

diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index 24612aa8326..067bf43eeb4 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -375,7 +375,7 @@ function CategoryItem({
         borderTop: `1px solid ${theme.pillBorder}`,
       }
     : {};
-  const [budgetType] = useLocalPref('budgetType');
+  const [budgetType = 'rollover'] = useLocalPref('budgetType');
 
   const balance = useSheetValue(
     budgetType === 'rollover'
diff --git a/packages/desktop-client/src/components/budget/index.tsx b/packages/desktop-client/src/components/budget/index.tsx
index 16c0211dbd3..9f417474009 100644
--- a/packages/desktop-client/src/components/budget/index.tsx
+++ b/packages/desktop-client/src/components/budget/index.tsx
@@ -75,8 +75,7 @@ function BudgetInner(props: BudgetInnerProps) {
     start: startMonth,
     end: startMonth,
   });
-  const [budgetTypePref] = useLocalPref('budgetType');
-  const budgetType = budgetTypePref || 'rollover';
+  const [budgetType = 'rollover'] = useLocalPref('budgetType');
   const [maxMonthsPref] = useGlobalPref('maxMonths');
   const maxMonths = maxMonthsPref || 1;
   const [initialized, setInitialized] = useState(false);
diff --git a/packages/desktop-client/src/components/mobile/budget/index.tsx b/packages/desktop-client/src/components/mobile/budget/index.tsx
index 91e84611503..3fa93d7c402 100644
--- a/packages/desktop-client/src/components/mobile/budget/index.tsx
+++ b/packages/desktop-client/src/components/mobile/budget/index.tsx
@@ -461,8 +461,7 @@ function BudgetInner(props: BudgetInnerProps) {
 
 export function Budget() {
   const { list: categories, grouped: categoryGroups } = useCategories();
-  const [_budgetType] = useLocalPref('budgetType');
-  const budgetType = _budgetType || 'rollover';
+  const [budgetType = 'rollover'] = useLocalPref('budgetType');
   const spreadsheet = useSpreadsheet();
   useSetThemeColor(theme.mobileViewTheme);
   return (
diff --git a/packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx b/packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx
index e98d0ea3a59..9fbb26da287 100644
--- a/packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx
+++ b/packages/desktop-client/src/components/settings/BudgetTypeSettings.tsx
@@ -15,7 +15,7 @@ import { Setting } from './UI';
 
 export function BudgetTypeSettings() {
   const dispatch = useDispatch();
-  const [budgetType] = useLocalPref('budgetType');
+  const [budgetType = 'rollover'] = useLocalPref('budgetType');
   const [loading, setLoading] = useState(false);
 
   const currentMonth = monthUtils.currentMonth();
diff --git a/packages/desktop-client/src/components/settings/Experimental.tsx b/packages/desktop-client/src/components/settings/Experimental.tsx
index 79cc91ccb18..0cd2da83834 100644
--- a/packages/desktop-client/src/components/settings/Experimental.tsx
+++ b/packages/desktop-client/src/components/settings/Experimental.tsx
@@ -57,7 +57,7 @@ function FeatureToggle({
 }
 
 function ReportBudgetFeature() {
-  const [budgetType] = useLocalPref('budgetType');
+  const [budgetType = 'rollover'] = useLocalPref('budgetType');
   const enabled = useFeatureFlag('reportBudget');
   const blockToggleOff = budgetType === 'report' && enabled;
   return (
diff --git a/upcoming-release-notes/3169.md b/upcoming-release-notes/3169.md
new file mode 100644
index 00000000000..be8369f8bb5
--- /dev/null
+++ b/upcoming-release-notes/3169.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [YusefOuda]
+---
+
+Fix budget type toggle not working the first time