From 54d7e5460ad8c3e8c0b04352b43fc30cfc307671 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Tue, 30 Jan 2024 14:37:06 -0800 Subject: [PATCH] [Cleanup] useSingleActiveEditForm hook on mobile budget table (#2263) * useSingleActiveEditForm on mobile budget table * Release notes * Remove unused variables --- .../src/components/budget/MobileBudget.tsx | 32 --- .../components/budget/MobileBudgetTable.jsx | 189 ++++++++---------- upcoming-release-notes/2263.md | 6 + 3 files changed, 91 insertions(+), 136 deletions(-) create mode 100644 upcoming-release-notes/2263.md diff --git a/packages/desktop-client/src/components/budget/MobileBudget.tsx b/packages/desktop-client/src/components/budget/MobileBudget.tsx index b1b59f76c8c..b8f5d86eceb 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[]; @@ -76,8 +73,6 @@ function BudgetInner(props: BudgetInnerProps) { const [currentMonth, setCurrentMonth] = useState(currMonth); const [initialized, setInitialized] = useState(false); const [editMode, setEditMode] = useState(false); - const [editingBudgetCategoryId, setEditingBudgetCategoryId] = useState(null); - const [openBalanceActionMenuId, setOpenBalanceActionMenuId] = useState(null); useEffect(() => { async function init() { @@ -360,29 +355,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; @@ -438,10 +410,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 cb75b90eef9..93346b51bc0 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() { - 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(); @@ -317,6 +329,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(); }} /> ) : ( @@ -382,7 +395,7 @@ const ExpenseCategory = memo(function ExpenseCategory({ monthIndex={monthUtils.getMonthIndex(month)} onBudgetAction={_onBudgetAction} onClose={() => { - onOpenBalanceActionMenu?.(null); + onClearActiveEdit(); }} /> ))} @@ -795,10 +808,6 @@ const ExpenseGroup = memo(function ExpenseGroup({ editMode, onEditGroup, onEditCategory, - editingBudgetCategoryId, - onEditCategoryBudget, - openBalanceActionMenuId, - onOpenBalanceActionMenu, // gestures, month, // onReorderCategory, @@ -873,10 +882,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 && ( + + )} + + ); } @@ -1143,10 +1136,6 @@ export function BudgetTable({ pushModal, onEditGroup, onEditCategory, - editingBudgetCategoryId, - onEditCategoryBudget, - openBalanceActionMenuId, - onOpenBalanceActionMenu, }) { const { width } = useResponsive(); const show3Cols = width >= 360; @@ -1385,10 +1374,6 @@ export function BudgetTable({ editMode={editMode} onEditGroup={onEditGroup} onEditCategory={onEditCategory} - editingBudgetCategoryId={editingBudgetCategoryId} - onEditCategoryBudget={onEditCategoryBudget} - openBalanceActionMenuId={openBalanceActionMenuId} - onOpenBalanceActionMenu={onOpenBalanceActionMenu} onSaveCategory={onSaveCategory} onDeleteCategory={onDeleteCategory} onAddCategory={onAddCategory} @@ -1423,10 +1408,6 @@ export function BudgetTable({ editMode={editMode} onEditGroup={onEditGroup} onEditCategory={onEditCategory} - editingBudgetCategoryId={editingBudgetCategoryId} - onEditCategoryBudget={onEditCategoryBudget} - openBalanceActionMenuId={openBalanceActionMenuId} - onOpenBalanceActionMenu={onOpenBalanceActionMenu} onSaveCategory={onSaveCategory} onDeleteCategory={onDeleteCategory} onAddCategory={onAddCategory} diff --git a/upcoming-release-notes/2263.md b/upcoming-release-notes/2263.md new file mode 100644 index 00000000000..0241b5010eb --- /dev/null +++ b/upcoming-release-notes/2263.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [joel-jeremy] +--- + +Use useSingleActiveEditForm hook in mobile budget table