From 76b80a6553b6bcac13f47b2db70b1b559eb96f10 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Sat, 20 Jan 2024 16:24:17 -0800 Subject: [PATCH] useSingleActiveEditForm on mobile budget table --- .../src/components/budget/MobileBudget.tsx | 30 --- .../components/budget/MobileBudgetTable.jsx | 189 ++++++++---------- 2 files changed, 85 insertions(+), 134 deletions(-) diff --git a/packages/desktop-client/src/components/budget/MobileBudget.tsx b/packages/desktop-client/src/components/budget/MobileBudget.tsx index 2a426909a4c..2bc21b488da 100644 --- a/packages/desktop-client/src/components/budget/MobileBudget.tsx +++ b/packages/desktop-client/src/components/budget/MobileBudget.tsx @@ -22,9 +22,6 @@ import { SyncRefresh } from '../SyncRefresh'; import { BudgetTable } from './MobileBudgetTable'; import { prewarmMonth, switchBudgetType } from './util'; -const CATEGORY_BUDGET_EDIT_ACTION = 'category-budget'; -const BALANCE_MENU_OPEN_ACTION = 'balance-menu'; - type BudgetInnerProps = { categories: CategoryEntity[]; categoryGroups: CategoryGroupEntity[]; @@ -360,29 +357,6 @@ function BudgetInner(props: BudgetInnerProps) { }); }; - const onEditCategoryBudget = id => { - onEdit(CATEGORY_BUDGET_EDIT_ACTION, id); - }; - - const onOpenBalanceActionMenu = id => { - onEdit(BALANCE_MENU_OPEN_ACTION, id); - }; - - const onEdit = (action, id) => { - // Do not allow editing if another field is currently being edited. - // Cancel the currently editing field in that case. - const currentlyEditing = editingBudgetCategoryId || openBalanceActionMenuId; - - setEditingBudgetCategoryId( - action === CATEGORY_BUDGET_EDIT_ACTION && !currentlyEditing ? id : null, - ); - setOpenBalanceActionMenuId( - action === BALANCE_MENU_OPEN_ACTION && !currentlyEditing ? id : null, - ); - - return { action, editingId: !currentlyEditing ? id : null }; - }; - const numberFormat = prefs?.numberFormat || 'comma-dot'; const hideFraction = prefs?.hideFraction || false; @@ -445,10 +419,6 @@ function BudgetInner(props: BudgetInnerProps) { pushModal={pushModal} onEditGroup={onEditGroup} onEditCategory={onEditCategory} - editingBudgetCategoryId={editingBudgetCategoryId} - onEditCategoryBudget={onEditCategoryBudget} - openBalanceActionMenuId={openBalanceActionMenuId} - onOpenBalanceActionMenu={onOpenBalanceActionMenu} /> )} diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx index 3c2251d77b3..ab49438ce22 100644 --- a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx +++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx @@ -1,4 +1,4 @@ -import React, { memo, useEffect, useRef, useState } from 'react'; +import React, { memo, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import memoizeOne from 'memoize-one'; @@ -7,6 +7,10 @@ import { rolloverBudget, reportBudget } from 'loot-core/src/client/queries'; import * as monthUtils from 'loot-core/src/shared/months'; import { useFeatureFlag } from '../../hooks/useFeatureFlag'; +import { + SingleActiveEditFormProvider, + useSingleActiveEditForm, +} from '../../hooks/useSingleActiveEditForm'; import { SvgArrowThinLeft, SvgArrowThinRight, @@ -134,6 +138,7 @@ function BudgetCell({ month, onBudgetAction, onEdit, + onBlur, isEditing, }) { const sheetValue = useSheetValue(binding); @@ -146,7 +151,7 @@ function BudgetCell({ } function onAmountClick(e) { - onEdit?.(categoryId); + onEdit?.(); } return ( @@ -162,7 +167,7 @@ function BudgetCell({ focused={isEditing} textStyle={{ ...styles.smallText, ...textStyle }} onUpdate={updateBudgetAmount} - onBlur={() => onEdit?.(null)} + onBlur={onBlur} /> { - if (isBalanceActionMenuOpen) { + const [isEditingBudget, setIsEditingBudget] = useState(false); + const { onRequestActiveEdit, onClearActiveEdit } = useSingleActiveEditForm(); + + const onEditBudget = () => { + onRequestActiveEdit(`${category.id}-budget`, () => { + setIsEditingBudget(true); + return () => setIsEditingBudget(false); + }); + }; + + const onOpenBalanceActionMenu = () => { + onRequestActiveEdit(`${category.id}-balance`, () => { balanceTooltip.open(); - } - }, [isBalanceActionMenuOpen, balanceTooltip]); + return () => balanceTooltip.close(); + }); + }; const listItemRef = useRef(); @@ -318,6 +330,7 @@ const ExpenseCategory = memo(function ExpenseCategory({ onBudgetAction={onBudgetAction} isEditing={isEditingBudget} onEdit={onEditBudget} + onBlur={onClearActiveEdit} /> onOpenBalanceActionMenu?.(category.id)} + onPointerUp={() => onOpenBalanceActionMenu?.()} onPointerDown={e => e.preventDefault()} > { - onOpenBalanceActionMenu?.(null); + onClearActiveEdit(); }} /> ) : ( @@ -383,7 +396,7 @@ const ExpenseCategory = memo(function ExpenseCategory({ monthIndex={monthUtils.getMonthIndex(month)} onBudgetAction={_onBudgetAction} onClose={() => { - onOpenBalanceActionMenu?.(null); + onClearActiveEdit(); }} /> ))} @@ -798,10 +811,6 @@ const ExpenseGroup = memo(function ExpenseGroup({ editMode, onEditGroup, onEditCategory, - editingBudgetCategoryId, - onEditCategoryBudget, - openBalanceActionMenuId, - onOpenBalanceActionMenu, // gestures, month, // onReorderCategory, @@ -876,10 +885,6 @@ const ExpenseGroup = memo(function ExpenseGroup({ {group.categories .filter(category => !category.hidden || showHiddenCategories) .map((category, index) => { - const isEditingCategoryBudget = - editingBudgetCategoryId === category.id; - const isBalanceActionMenuOpen = - openBalanceActionMenuId === category.id; return ( - {expenseGroups - .filter(group => !group.hidden || showHiddenCategories) - .map(group => { - return ( - - ); - })} - + - - + {expenseGroups + .filter(group => !group.hidden || showHiddenCategories) + .map(group => { + return ( + + ); + })} - {incomeGroup && ( - - )} - + + + + + {incomeGroup && ( + + )} + + ); } @@ -1150,10 +1143,6 @@ export function BudgetTable({ pushModal, onEditGroup, onEditCategory, - editingBudgetCategoryId, - onEditCategoryBudget, - openBalanceActionMenuId, - onOpenBalanceActionMenu, ...props }) { const { width } = useResponsive(); @@ -1393,10 +1382,6 @@ export function BudgetTable({ editMode={editMode} onEditGroup={onEditGroup} onEditCategory={onEditCategory} - editingBudgetCategoryId={editingBudgetCategoryId} - onEditCategoryBudget={onEditCategoryBudget} - openBalanceActionMenuId={openBalanceActionMenuId} - onOpenBalanceActionMenu={onOpenBalanceActionMenu} onSaveCategory={onSaveCategory} onDeleteCategory={onDeleteCategory} onAddCategory={onAddCategory} @@ -1431,10 +1416,6 @@ export function BudgetTable({ editMode={editMode} onEditGroup={onEditGroup} onEditCategory={onEditCategory} - editingBudgetCategoryId={editingBudgetCategoryId} - onEditCategoryBudget={onEditCategoryBudget} - openBalanceActionMenuId={openBalanceActionMenuId} - onOpenBalanceActionMenu={onOpenBalanceActionMenu} onSaveCategory={onSaveCategory} onDeleteCategory={onDeleteCategory} onAddCategory={onAddCategory}