Skip to content

Commit

Permalink
useSingleActiveEditForm on mobile budget table
Browse files Browse the repository at this point in the history
  • Loading branch information
@joel-jeremy
joel-jeremy committed Jan 21, 2024
1 parent dd29e02 commit 76b80a6
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 134 deletions.
30 changes: 0 additions & 30 deletions packages/desktop-client/src/components/budget/MobileBudget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -445,10 +419,6 @@ function BudgetInner(props: BudgetInnerProps) {
pushModal={pushModal}
onEditGroup={onEditGroup}
onEditCategory={onEditCategory}
editingBudgetCategoryId={editingBudgetCategoryId}
onEditCategoryBudget={onEditCategoryBudget}
openBalanceActionMenuId={openBalanceActionMenuId}
onOpenBalanceActionMenu={onOpenBalanceActionMenu}
/>
)}
</SyncRefresh>
Expand Down
189 changes: 85 additions & 104 deletions packages/desktop-client/src/components/budget/MobileBudgetTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -134,6 +138,7 @@ function BudgetCell({
month,
onBudgetAction,
onEdit,
onBlur,
isEditing,
}) {
const sheetValue = useSheetValue(binding);
Expand All @@ -146,7 +151,7 @@ function BudgetCell({
}

function onAmountClick(e) {
onEdit?.(categoryId);
onEdit?.();
}

return (
Expand All @@ -162,7 +167,7 @@ function BudgetCell({
focused={isEditing}
textStyle={{ ...styles.smallText, ...textStyle }}
onUpdate={updateBudgetAmount}
onBlur={() => onEdit?.(null)}
onBlur={onBlur}
/>
<View
role="button"
Expand Down Expand Up @@ -245,22 +250,29 @@ const ExpenseCategory = memo(function ExpenseCategory({
month,
editMode,
onEdit,
isEditingBudget,
onEditBudget,
isBalanceActionMenuOpen,
onOpenBalanceActionMenu,
onBudgetAction,
show3Cols,
showBudgetedCol,
}) {
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();

Expand Down Expand Up @@ -318,6 +330,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
onBudgetAction={onBudgetAction}
isEditing={isEditingBudget}
onEdit={onEditBudget}
onBlur={onClearActiveEdit}
/>
<View
style={{
Expand Down Expand Up @@ -350,7 +363,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
>
<span
role="button"
onPointerUp={() => onOpenBalanceActionMenu?.(category.id)}
onPointerUp={() => onOpenBalanceActionMenu?.()}
onPointerDown={e => e.preventDefault()}
>
<BalanceWithCarryover
Expand All @@ -372,7 +385,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
monthIndex={monthUtils.getMonthIndex(month)}
onBudgetAction={_onBudgetAction}
onClose={() => {
onOpenBalanceActionMenu?.(null);
onClearActiveEdit();
}}
/>
) : (
Expand All @@ -383,7 +396,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
monthIndex={monthUtils.getMonthIndex(month)}
onBudgetAction={_onBudgetAction}
onClose={() => {
onOpenBalanceActionMenu?.(null);
onClearActiveEdit();
}}
/>
))}
Expand Down Expand Up @@ -798,10 +811,6 @@ const ExpenseGroup = memo(function ExpenseGroup({
editMode,
onEditGroup,
onEditCategory,
editingBudgetCategoryId,
onEditCategoryBudget,
openBalanceActionMenuId,
onOpenBalanceActionMenu,
// gestures,
month,
// onReorderCategory,
Expand Down Expand Up @@ -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 (
<ExpenseCategory
key={category.id}
Expand Down Expand Up @@ -918,10 +923,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}
Expand Down Expand Up @@ -1022,10 +1023,6 @@ function BudgetGroups({
categoryGroups,
onEditGroup,
onEditCategory,
editingBudgetCategoryId,
onEditCategoryBudget,
openBalanceActionMenuId,
onOpenBalanceActionMenu,
editMode,
gestures,
month,
Expand All @@ -1051,71 +1048,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>
);
}

Expand Down Expand Up @@ -1150,10 +1143,6 @@ export function BudgetTable({
pushModal,
onEditGroup,
onEditCategory,
editingBudgetCategoryId,
onEditCategoryBudget,
openBalanceActionMenuId,
onOpenBalanceActionMenu,
...props
}) {
const { width } = useResponsive();
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 76b80a6

Please sign in to comment.