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

* useSingleActiveEditForm on mobile budget table * Release notes * Remove unused variables

[Cleanup] useSingleActiveEditForm hook on mobile budget table (#2263)
54d7e546 · Joel Jeremy Marquez · GitHub · 43ebe9e0 · 54d7e546 · 54d7e546
Unverified Commit 54d7e546 authored 1 year ago by Joel Jeremy Marquez Committed by GitHub 1 year ago
--- 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}
        />
      )}
    </SyncRefresh>

--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx
-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(() => {
+  const [isEditingBudget, setIsEditingBudget] = useState(false);
-    if (isBalanceActionMenuOpen) {
+  const { onRequestActiveEdit, onClearActiveEdit } = useSingleActiveEditForm();
+  const onEditBudget = () => {
+    onRequestActiveEdit(`${category.id}-budget`, () => {
+      setIsEditingBudget(true);
+      return () => setIsEditingBudget(false);
+    });
+  };
+  const onOpenBalanceActionMenu = () => {
+    onRequestActiveEdit(`${category.id}-balance`, () => {
      balanceTooltip.open();
-    }
+      return () => balanceTooltip.close();
-  }, [isBalanceActionMenuOpen, balanceTooltip]);
+    });
+  };
  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
+    <SingleActiveEditFormProvider formName="mobile-budget-table">
-      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}
-            />
-          );
-        })}
      <View
-        style={{
+        data-testid="budget-groups"
-          alignItems: 'flex-start',
+        style={{ flex: '1 0 auto', overflowY: 'auto', paddingBottom: 15 }}
-          justifyContent: 'flex-start',
-        }}
      >
-        <Button onClick={onAddGroup} style={{ fontSize: 12, margin: 10 }}>
+        {expenseGroups
-          Add Group
+          .filter(group => !group.hidden || showHiddenCategories)
-        </Button>
+          .map(group => {
-      </View>
+            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 && (
+        <View
-        <IncomeGroup
+          style={{
-          type={type}
+            alignItems: 'flex-start',
-          group={incomeGroup}
+            justifyContent: 'flex-start',
-          month={month}
+          }}
-          onAddCategory={onAddCategory}
+        >
-          onSaveCategory={onSaveCategory}
+          <Button onClick={onAddGroup} style={{ fontSize: 12, margin: 10 }}>
-          onDeleteCategory={onDeleteCategory}
+            Add Group
-          showHiddenCategories={showHiddenCategories}
+          </Button>
-          editMode={editMode}
+        </View>
-          onEditGroup={onEditGroup}
-          onEditCategory={onEditCategory}
+        {incomeGroup && (
-          editingBudgetCategoryId={editingBudgetCategoryId}
+          <IncomeGroup
-          onEditCategoryBudget={onEditCategoryBudget}
+            type={type}
-          onBudgetAction={onBudgetAction}
+            group={incomeGroup}
-          pushModal={pushModal}
+            month={month}
-        />
+            onAddCategory={onAddCategory}
-      )}
+            onSaveCategory={onSaveCategory}
-    </View>
+            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}

--- a/upcoming-release-notes/2263.md
+++ b/upcoming-release-notes/2263.md
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+Use useSingleActiveEditForm hook in mobile budget table