[Mobile] Add To Be Budgeted category to cover and transfer modal (#2635)

* Add To Be Budgeted category to cover and transfer modal

* Release notes

* Fix To Be Budgeted input selection

* Fix typecheck error

* Fix duplicate modals in firefox

* Fix lint error

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

@@ -286,6 +286,7 @@ export function Modals() {
               autocompleteProps={{
                 value: null,
                 onSelect: options.onSelect,
+                categoryGroups: options.categoryGroups,
                 showHiddenCategories: options.showHiddenCategories,
               }}
               month={options.month}

packages/desktop-client/src/components/modals/CoverModal.tsx

-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { pushModal } from 'loot-core/client/actions';
@@ -26,10 +26,14 @@ export function CoverModal({
   month,
   onSubmit,
 }: CoverModalProps) {
-  const { grouped: originalCategoryGroups, list: categories } = useCategories();
-  const categoryGroups = addToBeBudgetedGroup(
-    originalCategoryGroups.filter(g => !g.is_income),
-  );
+  const { grouped: originalCategoryGroups } = useCategories();
+  const [categoryGroups, categories] = useMemo(() => {
+    const expenseGroups = addToBeBudgetedGroup(
+      originalCategoryGroups.filter(g => !g.is_income),
+    );
+    const expenseCategories = expenseGroups.flatMap(g => g.categories || []);
+    return [expenseGroups, expenseCategories];
+  }, [originalCategoryGroups]);
 
   const [fromCategoryId, setFromCategoryId] = useState<string | null>(null);
   const dispatch = useDispatch();
@@ -62,6 +66,7 @@ export function CoverModal({
     }
   }, [initialMount, onCategoryClick]);
 
+  const fromCategory = categories.find(c => c.id === fromCategoryId);
   const category = categories.find(c => c.id === categoryId);
 
   if (!category) {
@@ -86,10 +91,7 @@ export function CoverModal({
         <>
           <View>
             <FieldLabel title="Cover from category:" />
-            <TapField
-              value={categories.find(c => c.id === fromCategoryId)?.name}
-              onClick={onCategoryClick}
-            />
+            <TapField value={fromCategory?.name} onClick={onCategoryClick} />
           </View>
 
           <View

packages/desktop-client/src/components/modals/TransferModal.tsx

-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { pushModal } from 'loot-core/client/actions';
@@ -32,11 +32,15 @@ export function TransferModal({
   showToBeBudgeted,
   onSubmit,
 }: TransferModalProps) {
-  const { grouped: originalCategoryGroups, list: categories } = useCategories();
-  let categoryGroups = originalCategoryGroups.filter(g => !g.is_income);
-  if (showToBeBudgeted) {
-    categoryGroups = addToBeBudgetedGroup(categoryGroups);
-  }
+  const { grouped: originalCategoryGroups } = useCategories();
+  const [categoryGroups, categories] = useMemo(() => {
+    let expenseGroups = originalCategoryGroups.filter(g => !g.is_income);
+    expenseGroups = showToBeBudgeted
+      ? addToBeBudgetedGroup(expenseGroups)
+      : expenseGroups;
+    const expenseCategories = expenseGroups.flatMap(g => g.categories || []);
+    return [expenseGroups, expenseCategories];
+  }, [originalCategoryGroups, showToBeBudgeted]);
 
   const _initialAmount = integerToCurrency(Math.max(initialAmount, 0));
   const [amount, setAmount] = useState<string | null>(null);
@@ -65,6 +69,8 @@ export function TransferModal({
     modalProps.onClose();
   };
 
+  const toCategory = categories.find(c => c.id === toCategoryId);
+
   return (
     <Modal
       title={title}
@@ -86,7 +92,7 @@ export function TransferModal({
             <InitialFocus>
               <InputField
                 inputMode="decimal"
-                tabIndex={1}
+                tabIndex={0}
                 defaultValue={_initialAmount}
                 onUpdate={setAmount}
                 onEnter={() => {
@@ -100,10 +106,9 @@ export function TransferModal({
 
           <FieldLabel title="To:" />
           <TapField
-            tabIndex={2}
-            value={categories.find(c => c.id === toCategoryId)?.name}
+            tabIndex={0}
+            value={toCategory?.name}
             onClick={openCategoryModal}
-            onFocus={openCategoryModal}
           />
 
           <View
@@ -115,7 +120,7 @@ export function TransferModal({
           >
             <Button
               type="primary"
-              tabIndex={3}
+              tabIndex={0}
               style={{
                 height: styles.mobileMinHeight,
                 marginLeft: styles.mobileEditingPadding,

upcoming-release-notes/2635.md

+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Add To Be Budgeted category to cover and transfer modal