Skip to content

Commit

Permalink
[Cleanup] useSingleActiveEditForm hook on mobile budget table (#2263)
Browse files Browse the repository at this point in the history 
* useSingleActiveEditForm on mobile budget table

* Release notes

* Remove unused variables
  • Loading branch information
@joel-jeremy
joel-jeremy authored Jan 30, 2024
1 parent 43ebe9e commit 54d7e54
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 136 deletions.
32 changes: 0 additions & 32 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 @@ -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() {
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -438,10 +410,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() {
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 @@ -244,22 +249,29 @@ const ExpenseCategory = memo(function ExpenseCategory({
style,
month,
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 @@ -317,6 +329,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
onBudgetAction={onBudgetAction}
isEditing={isEditingBudget}
onEdit={onEditBudget}
onBlur={onClearActiveEdit}
/>
<View
style={{
Expand Down Expand Up @@ -349,7 +362,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
>
<span
role="button"
onPointerUp={() => onOpenBalanceActionMenu?.(category.id)}
onPointerUp={() => onOpenBalanceActionMenu?.()}
onPointerDown={e => e.preventDefault()}
>
<BalanceWithCarryover
Expand All @@ -371,7 +384,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
monthIndex={monthUtils.getMonthIndex(month)}
onBudgetAction={_onBudgetAction}
onClose={() => {
onOpenBalanceActionMenu?.(null);
onClearActiveEdit();
}}
/>
) : (
Expand All @@ -382,7 +395,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
monthIndex={monthUtils.getMonthIndex(month)}
onBudgetAction={_onBudgetAction}
onClose={() => {
onOpenBalanceActionMenu?.(null);
onClearActiveEdit();
}}
/>
))}
Expand Down Expand Up @@ -795,10 +808,6 @@ const ExpenseGroup = memo(function ExpenseGroup({
editMode,
onEditGroup,
onEditCategory,
editingBudgetCategoryId,
onEditCategoryBudget,
openBalanceActionMenuId,
onOpenBalanceActionMenu,
// gestures,
month,
// onReorderCategory,
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -1019,10 +1020,6 @@ function BudgetGroups({
categoryGroups,
onEditGroup,
onEditCategory,
editingBudgetCategoryId,
onEditCategoryBudget,
openBalanceActionMenuId,
onOpenBalanceActionMenu,
editMode,
gestures,
month,
Expand All @@ -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>
);
}

Expand Down Expand Up @@ -1143,10 +1136,6 @@ export function BudgetTable({
pushModal,
onEditGroup,
onEditCategory,
editingBudgetCategoryId,
onEditCategoryBudget,
openBalanceActionMenuId,
onOpenBalanceActionMenu,
}) {
const { width } = useResponsive();
const show3Cols = width >= 360;
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/2263.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Maintenance
authors: [joel-jeremy]
---

Use useSingleActiveEditForm hook in mobile budget table

0 comments on commit 54d7e54

Please sign in to comment.