[Cleanup] useSingleActiveEditForm hook on mobile budget table (#2263)

* useSingleActiveEditForm on mobile budget table

* Release notes

* Remove unused variables

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}
         />
       )}
     </SyncRefresh>

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}
       />
       <View
         role="button"
@@ -244,10 +249,6 @@ const ExpenseCategory = memo(function ExpenseCategory({
   style,
   month,
   onEdit,
-  isEditingBudget,
-  onEditBudget,
-  isBalanceActionMenuOpen,
-  onOpenBalanceActionMenu,
   onBudgetAction,
   show3Cols,
   showBudgetedCol,
@@ -255,11 +256,22 @@ const ExpenseCategory = memo(function ExpenseCategory({
   const opacity = blank ? 0 : 1;
   const balanceTooltip = useTooltip();
 
-  useEffect(() => {
-    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}
         />
         <View
           style={{
@@ -349,7 +362,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
         >
           <span
             role="button"
-            onPointerUp={() => onOpenBalanceActionMenu?.(category.id)}
+            onPointerUp={() => onOpenBalanceActionMenu?.()}
             onPointerDown={e => e.preventDefault()}
           >
             <BalanceWithCarryover
@@ -371,7 +384,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
                   monthIndex={monthUtils.getMonthIndex(month)}
                   onBudgetAction={_onBudgetAction}
                   onClose={() => {
-                    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 (
             <ExpenseCategory
               key={category.id}
@@ -915,10 +920,6 @@ const ExpenseGroup = memo(function ExpenseGroup({
               showBudgetedCol={showBudgetedCol}
               editMode={editMode}
               onEdit={onEditCategory}
-              isEditingBudget={isEditingCategoryBudget}
-              onEditBudget={onEditCategoryBudget}
-              isBalanceActionMenuOpen={isBalanceActionMenuOpen}
-              onOpenBalanceActionMenu={onOpenBalanceActionMenu}
               // gestures={gestures}
               month={month}
               // onReorder={onReorderCategory}
@@ -1019,10 +1020,6 @@ function BudgetGroups({
   categoryGroups,
   onEditGroup,
   onEditCategory,
-  editingBudgetCategoryId,
-  onEditCategoryBudget,
-  openBalanceActionMenuId,
-  onOpenBalanceActionMenu,
   editMode,
   gestures,
   month,
@@ -1048,71 +1045,67 @@ function BudgetGroups({
   const { incomeGroup, expenseGroups } = separateGroups(categoryGroups);
 
   return (
-    <View
-      data-testid="budget-groups"
-      style={{ flex: '1 0 auto', overflowY: 'auto', paddingBottom: 15 }}
-    >
-      {expenseGroups
-        .filter(group => !group.hidden || showHiddenCategories)
-        .map(group => {
-          return (
-            <ExpenseGroup
-              key={group.id}
-              type={type}
-              group={group}
-              showBudgetedCol={showBudgetedCol}
-              gestures={gestures}
-              month={month}
-              editMode={editMode}
-              onEditGroup={onEditGroup}
-              onEditCategory={onEditCategory}
-              editingBudgetCategoryId={editingBudgetCategoryId}
-              onEditCategoryBudget={onEditCategoryBudget}
-              openBalanceActionMenuId={openBalanceActionMenuId}
-              onOpenBalanceActionMenu={onOpenBalanceActionMenu}
-              onSaveCategory={onSaveCategory}
-              onDeleteCategory={onDeleteCategory}
-              onAddCategory={onAddCategory}
-              onReorderCategory={onReorderCategory}
-              onReorderGroup={onReorderGroup}
-              onBudgetAction={onBudgetAction}
-              show3Cols={show3Cols}
-              showHiddenCategories={showHiddenCategories}
-              pushModal={pushModal}
-            />
-          );
-        })}
-
+    <SingleActiveEditFormProvider formName="mobile-budget-table">
       <View
-        style={{
-          alignItems: 'flex-start',
-          justifyContent: 'flex-start',
-        }}
+        data-testid="budget-groups"
+        style={{ flex: '1 0 auto', overflowY: 'auto', paddingBottom: 15 }}
       >
-        <Button onClick={onAddGroup} style={{ fontSize: 12, margin: 10 }}>
-          Add Group
-        </Button>
-      </View>
+        {expenseGroups
+          .filter(group => !group.hidden || showHiddenCategories)
+          .map(group => {
+            return (
+              <ExpenseGroup
+                key={group.id}
+                type={type}
+                group={group}
+                showBudgetedCol={showBudgetedCol}
+                gestures={gestures}
+                month={month}
+                editMode={editMode}
+                onEditGroup={onEditGroup}
+                onEditCategory={onEditCategory}
+                onSaveCategory={onSaveCategory}
+                onDeleteCategory={onDeleteCategory}
+                onAddCategory={onAddCategory}
+                onReorderCategory={onReorderCategory}
+                onReorderGroup={onReorderGroup}
+                onBudgetAction={onBudgetAction}
+                show3Cols={show3Cols}
+                showHiddenCategories={showHiddenCategories}
+                pushModal={pushModal}
+              />
+            );
+          })}
 
-      {incomeGroup && (
-        <IncomeGroup
-          type={type}
-          group={incomeGroup}
-          month={month}
-          onAddCategory={onAddCategory}
-          onSaveCategory={onSaveCategory}
-          onDeleteCategory={onDeleteCategory}
-          showHiddenCategories={showHiddenCategories}
-          editMode={editMode}
-          onEditGroup={onEditGroup}
-          onEditCategory={onEditCategory}
-          editingBudgetCategoryId={editingBudgetCategoryId}
-          onEditCategoryBudget={onEditCategoryBudget}
-          onBudgetAction={onBudgetAction}
-          pushModal={pushModal}
-        />
-      )}
-    </View>
+        <View
+          style={{
+            alignItems: 'flex-start',
+            justifyContent: 'flex-start',
+          }}
+        >
+          <Button onClick={onAddGroup} style={{ fontSize: 12, margin: 10 }}>
+            Add Group
+          </Button>
+        </View>
+
+        {incomeGroup && (
+          <IncomeGroup
+            type={type}
+            group={incomeGroup}
+            month={month}
+            onAddCategory={onAddCategory}
+            onSaveCategory={onSaveCategory}
+            onDeleteCategory={onDeleteCategory}
+            showHiddenCategories={showHiddenCategories}
+            editMode={editMode}
+            onEditGroup={onEditGroup}
+            onEditCategory={onEditCategory}
+            onBudgetAction={onBudgetAction}
+            pushModal={pushModal}
+          />
+        )}
+      </View>
+    </SingleActiveEditFormProvider>
   );
 }
 
@@ -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}

upcoming-release-notes/2263.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use useSingleActiveEditForm hook in mobile budget table