Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Cleanup] useSingleActiveEditForm hook on mobile budget table #2263

Merged
merged 3 commits into from
Jan 30, 2024
Merged

[Cleanup] useSingleActiveEditForm hook on mobile budget table #2263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5147b4c
useSingleActiveEditForm on mobile budget table
joel-jeremy Jan 21, 2024
e8f7822
Release notes
joel-jeremy Jan 21, 2024
f798133
Remove unused variables
joel-jeremy Jan 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 0 additions & 32 deletions packages/desktop-client/src/components/budget/MobileBudget.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading