From 5df02c19dce7ca77ebf68e0c14bc7170ea9858de Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Mon, 22 Apr 2024 08:39:01 -0700
Subject: [PATCH] [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
---
.../desktop-client/src/components/Modals.tsx | 1 +
.../src/components/modals/CoverModal.tsx | 20 +++++++-------
.../src/components/modals/TransferModal.tsx | 27 +++++++++++--------
upcoming-release-notes/2635.md | 6 +++++
4 files changed, 34 insertions(+), 20 deletions(-)
create mode 100644 upcoming-release-notes/2635.md
diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
index 21845c0fb..999849eb9 100644
--- a/packages/desktop-client/src/components/Modals.tsx
+++ b/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}
diff --git a/packages/desktop-client/src/components/modals/CoverModal.tsx b/packages/desktop-client/src/components/modals/CoverModal.tsx
index e11baeb6e..228c358d2 100644
--- a/packages/desktop-client/src/components/modals/CoverModal.tsx
+++ b/packages/desktop-client/src/components/modals/CoverModal.tsx
@@ -1,4 +1,4 @@
-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
diff --git a/packages/desktop-client/src/components/modals/TransferModal.tsx b/packages/desktop-client/src/components/modals/TransferModal.tsx
index dae973f5a..43bf3995d 100644
--- a/packages/desktop-client/src/components/modals/TransferModal.tsx
+++ b/packages/desktop-client/src/components/modals/TransferModal.tsx
@@ -1,4 +1,4 @@
-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,
diff --git a/upcoming-release-notes/2635.md b/upcoming-release-notes/2635.md
new file mode 100644
index 000000000..19fa5e5f9
--- /dev/null
+++ b/upcoming-release-notes/2635.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Add To Be Budgeted category to cover and transfer modal
--
GitLab