Extract menus to separate files (change split from #2472)

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

@@ -39,7 +39,7 @@ import { DynamicBudgetTable } from './DynamicBudgetTable';
 import * as report from './report/ReportComponents';
 import { ReportProvider } from './report/ReportContext';
 import * as rollover from './rollover/RolloverComponents';
-import { RolloverContext } from './rollover/RolloverContext';
+import { RolloverProvider } from './rollover/RolloverContext';
 import { prewarmAllMonths, prewarmMonth, switchBudgetType } from './util';
 
 type ReportComponents = {
@@ -378,7 +378,7 @@ function BudgetInner(props: BudgetInnerProps) {
     );
   } else {
     table = (
-      <RolloverContext
+      <RolloverProvider
         summaryCollapsed={summaryCollapsed}
         onBudgetAction={onBudgetAction}
         onToggleSummaryCollapse={onToggleCollapse}
@@ -400,7 +400,7 @@ function BudgetInner(props: BudgetInnerProps) {
           onReorderCategory={onReorderCategory}
           onReorderGroup={onReorderGroup}
         />
-      </RolloverContext>
+      </RolloverProvider>
     );
   }
 

packages/desktop-client/src/components/budget/report/BalanceMenu.tsx

@@ -0,0 +1,44 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+
+import { reportBudget } from 'loot-core/src/client/queries';
+
+import { Menu } from '../../common/Menu';
+import { useSheetValue } from '../../spreadsheet/useSheetValue';
+
+export type BalanceMenuProps = Omit<
+  ComponentPropsWithoutRef<typeof Menu>,
+  'onMenuSelect' | 'items'
+> & {
+  categoryId: string;
+  onCarryover: (carryover: boolean) => void;
+};
+
+export function BalanceMenu({
+  categoryId,
+  onCarryover,
+  ...props
+}: BalanceMenuProps) {
+  const carryover = useSheetValue(reportBudget.catCarryover(categoryId));
+  return (
+    <Menu
+      {...props}
+      onMenuSelect={name => {
+        switch (name) {
+          case 'carryover':
+            onCarryover?.(!carryover);
+            break;
+          default:
+            throw new Error(`Unsupported item: ${name}`);
+        }
+      }}
+      items={[
+        {
+          name: 'carryover',
+          text: carryover
+            ? 'Remove overspending rollover'
+            : 'Rollover overspending',
+        },
+      ]}
+    />
+  );
+}

packages/desktop-client/src/components/budget/report/BalanceTooltip.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 
-import { reportBudget } from 'loot-core/src/client/queries';
-
-import { Menu } from '../../common/Menu';
-import { useSheetValue } from '../../spreadsheet/useSheetValue';
 import { Tooltip } from '../../tooltips';
 
+import { BalanceMenu } from './BalanceMenu';
+
 type BalanceTooltipProps = {
   categoryId: string;
   tooltip: { close: () => void };
@@ -22,8 +20,6 @@ export function BalanceTooltip({
   onClose,
   ...tooltipProps
 }: BalanceTooltipProps) {
-  const carryover = useSheetValue(reportBudget.catCarryover(categoryId));
-
   const _onClose = () => {
     tooltip.close();
     onClose?.();
@@ -37,22 +33,14 @@ export function BalanceTooltip({
       onClose={_onClose}
       {...tooltipProps}
     >
-      <Menu
-        onMenuSelect={() => {
-          onBudgetAction(monthIndex, 'carryover', {
+      <BalanceMenu
+        categoryId={categoryId}
+        onCarryover={carryover => {
+          onBudgetAction?.(monthIndex, 'carryover', {
             category: categoryId,
             flag: !carryover,
           });
-          _onClose();
         }}
-        items={[
-          {
-            name: 'carryover',
-            text: carryover
-              ? 'Remove overspending rollover'
-              : 'Rollover overspending',
-          },
-        ]}
       />
     </Tooltip>
   );

packages/desktop-client/src/components/budget/rollover/BalanceMenu.tsx

@@ -0,0 +1,67 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+
+import { rolloverBudget } from 'loot-core/src/client/queries';
+
+import { Menu } from '../../common/Menu';
+import { useSheetValue } from '../../spreadsheet/useSheetValue';
+
+type BalanceMenuProps = Omit<
+  ComponentPropsWithoutRef<typeof Menu>,
+  'onMenuSelect' | 'items'
+> & {
+  categoryId: string;
+  onTransfer: () => void;
+  onCarryover: (carryOver: boolean) => void;
+  onCover: () => void;
+};
+
+export function BalanceMenu({
+  categoryId,
+  onTransfer,
+  onCarryover,
+  onCover,
+  ...props
+}: BalanceMenuProps) {
+  const carryover = useSheetValue(rolloverBudget.catCarryover(categoryId));
+  const balance = useSheetValue(rolloverBudget.catBalance(categoryId));
+  return (
+    <Menu
+      {...props}
+      onMenuSelect={name => {
+        switch (name) {
+          case 'transfer':
+            onTransfer?.();
+            break;
+          case 'carryover':
+            onCarryover?.(!carryover);
+            break;
+          case 'cover':
+            onCover?.();
+            break;
+          default:
+            throw new Error(`Unsupported item: ${name}`);
+        }
+      }}
+      items={[
+        {
+          name: 'transfer',
+          text: 'Transfer to another category',
+        },
+        {
+          name: 'carryover',
+          text: carryover
+            ? 'Remove overspending rollover'
+            : 'Rollover overspending',
+        },
+        ...(balance < 0
+          ? [
+              {
+                name: 'cover',
+                text: 'Cover overspending',
+              },
+            ]
+          : []),
+      ]}
+    />
+  );
+}

packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 
 import { rolloverBudget } from 'loot-core/src/client/queries';
 
-import { Menu } from '../../common/Menu';
 import { useSheetValue } from '../../spreadsheet/useSheetValue';
 import { Tooltip } from '../../tooltips';
 
+import { BalanceMenu } from './BalanceMenu';
 import { CoverTooltip } from './CoverTooltip';
 import { TransferTooltip } from './TransferTooltip';
 
@@ -16,6 +16,7 @@ type BalanceTooltipProps = {
   onBudgetAction: (idx: number, action: string, arg?: unknown) => void;
   onClose?: () => void;
 };
+
 export function BalanceTooltip({
   categoryId,
   tooltip,
@@ -24,8 +25,7 @@ export function BalanceTooltip({
   onClose,
   ...tooltipProps
 }: BalanceTooltipProps) {
-  const carryover = useSheetValue(rolloverBudget.catCarryover(categoryId));
-  const balance = useSheetValue(rolloverBudget.catBalance(categoryId));
+  const catBalance = useSheetValue(rolloverBudget.catBalance(categoryId));
   const [menu, setMenu] = useState('menu');
 
   const _onClose = () => {
@@ -43,52 +43,31 @@ export function BalanceTooltip({
           onClose={_onClose}
           {...tooltipProps}
         >
-          <Menu
-            onMenuSelect={type => {
-              if (type === 'carryover') {
-                onBudgetAction(monthIndex, 'carryover', {
-                  category: categoryId,
-                  flag: !carryover,
-                });
-                _onClose();
-              } else {
-                setMenu(type);
-              }
+          <BalanceMenu
+            categoryId={categoryId}
+            onCarryover={carryover => {
+              onBudgetAction(monthIndex, 'carryover', {
+                category: categoryId,
+                flag: carryover,
+              });
+              _onClose();
             }}
-            items={[
-              {
-                name: 'transfer',
-                text: 'Transfer to another category',
-              },
-              {
-                name: 'carryover',
-                text: carryover
-                  ? 'Remove overspending rollover'
-                  : 'Rollover overspending',
-              },
-              ...(balance < 0
-                ? [
-                    {
-                      name: 'cover',
-                      text: 'Cover overspending',
-                    },
-                  ]
-                : []),
-            ]}
+            onTransfer={() => setMenu('transfer')}
+            onCover={() => setMenu('cover')}
           />
         </Tooltip>
       )}
 
       {menu === 'transfer' && (
         <TransferTooltip
-          initialAmountName={rolloverBudget.catBalance(categoryId)}
+          initialAmount={catBalance}
           showToBeBudgeted={true}
           onClose={_onClose}
-          onSubmit={(amount, toCategory) => {
+          onSubmit={(amount, toCategoryId) => {
             onBudgetAction(monthIndex, 'transfer-category', {
               amount,
               from: categoryId,
-              to: toCategory,
+              to: toCategoryId,
             });
           }}
         />
@@ -97,10 +76,10 @@ export function BalanceTooltip({
       {menu === 'cover' && (
         <CoverTooltip
           onClose={_onClose}
-          onSubmit={fromCategory => {
+          onSubmit={fromCategoryId => {
             onBudgetAction(monthIndex, 'cover', {
               to: categoryId,
-              from: fromCategory,
+              from: fromCategoryId,
             });
           }}
         />

packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx

@@ -10,26 +10,18 @@ import { addToBeBudgetedGroup } from '../util';
 
 type CoverTooltipProps = {
   tooltipProps?: ComponentProps<typeof Tooltip>;
-  onSubmit: (category: unknown) => void;
+  onSubmit: (categoryId: string) => void;
   onClose: () => void;
 };
 export function CoverTooltip({
   tooltipProps,
   onSubmit,
   onClose,
 }: CoverTooltipProps) {
-  const { grouped } = useCategories();
-  const categoryGroups = addToBeBudgetedGroup(
-    grouped.filter(g => !g.is_income),
-  );
-  const [category, setCategory] = useState<string | null>(null);
-
-  function submit() {
-    if (category) {
-      onSubmit(category);
-      onClose();
-    }
-  }
+  const _onSubmit = (categoryId: string) => {
+    onSubmit?.(categoryId);
+    onClose?.();
+  };
 
   return (
     <Tooltip
@@ -39,23 +31,46 @@ export function CoverTooltip({
       {...tooltipProps}
       onClose={onClose}
     >
+      <Cover onSubmit={_onSubmit} />
+    </Tooltip>
+  );
+}
+
+type CoverProps = {
+  onSubmit: (categoryId: string) => void;
+};
+
+function Cover({ onSubmit }: CoverProps) {
+  let { grouped: categoryGroups } = useCategories();
+  categoryGroups = addToBeBudgetedGroup(
+    categoryGroups.filter(g => !g.is_income),
+  );
+  const [categoryId, setCategoryId] = useState<string | null>(null);
+
+  function submit() {
+    if (categoryId) {
+      onSubmit(categoryId);
+    }
+  }
+  return (
+    <>
       <View style={{ marginBottom: 5 }}>Cover from category:</View>
 
       <InitialFocus>
         {node => (
           <CategoryAutocomplete
             categoryGroups={categoryGroups}
-            value={null}
+            value={categoryGroups.find(g => g.id === categoryId)}
             openOnFocus={true}
-            onUpdate={() => {}}
-            onSelect={(id: string | undefined) => setCategory(id || null)}
+            onSelect={(id: string | undefined) => setCategoryId(id || null)}
             inputProps={{
               inputRef: node,
               onKeyDown: e => {
                 if (e.key === 'Enter') {
                   submit();
                 }
               },
+              placeholder: '(none)',
             }}
             showHiddenCategories={false}
           />
@@ -79,6 +94,6 @@ export function CoverTooltip({
           Transfer
         </Button>
       </View>
-    </Tooltip>
+    </>
   );
 }