github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-09 11:42:54 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

[Maintenance] Remove usage of a raw variable in PayeeAutocomplete component (#5687)

Browse Source 
* Remove usage of a raw variable in PayeeAutocomplete component

* Add note on 100 payees limit
This commit is contained in:
Joel Jeremy Marquez
2025-09-05 12:26:44 -07:00
committed by GitHub
parent 58bc14e1b3
commit bbf91ccbca
2 changed files with 92 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
View File

@@ -166,20 +166,44 @@ function PayeeList({
}: PayeeListProps) {
const { t } = useTranslation();
let createNew = null;
items = [...items];
// If the "new payee" item exists, create it as a special-cased item
// with the value of the input so it always shows whatever the user
// entered
if (items[0].id === 'new') {
const [first, ...rest] = items;
createNew = first;
items = rest;
}
const offset = createNew ? 1 : 0;
let lastType = null;
const { newPayee, suggestedPayees, payees, transferPayees } = useMemo(() => {
return items.reduce(
(acc, item, index) => {
if (item.id === 'new') {
acc.newPayee = { ...item, highlightedIndex: index };
} else if (item.itemType === 'common_payee') {
acc.suggestedPayees.push({ ...item, highlightedIndex: index });
} else if (item.itemType === 'payee') {
acc.payees.push({ ...item, highlightedIndex: index });
} else if (item.itemType === 'account') {
acc.transferPayees.push({ ...item, highlightedIndex: index });
}
return acc;
},
{
newPayee: null as PayeeAutocompleteItem & {
highlightedIndex: number;
},
suggestedPayees: [] as Array<
PayeeAutocompleteItem & { highlightedIndex: number }
>,
payees: [] as Array<
PayeeAutocompleteItem & { highlightedIndex: number }
>,
transferPayees: [] as Array<
PayeeAutocompleteItem & { highlightedIndex: number }
>,
},
);
}, [items]);
// We limit the number of payees shown to 100.
// So we show a hint that more are available via search.
const showSearchForMore = items.length > 100;
return (
<View>
@@ -190,60 +214,65 @@ function PayeeList({
...(!embedded && { maxHeight: 175 }),
}}
>
{createNew &&
{newPayee &&
renderCreatePayeeButton({
...(getItemProps ? getItemProps({ item: createNew }) : null),
...(getItemProps ? getItemProps({ item: newPayee }) : {}),
payeeName: inputValue,
highlighted: highlightedIndex === 0,
embedded,
})}
{items.map((item, idx) => {
const itemType = item.itemType;
let title;
{suggestedPayees.length > 0 &&
renderPayeeItemGroupHeader({ title: t('Suggested Payees') })}
{suggestedPayees.map(item => (
<Fragment key={item.id}>
{renderPayeeItem({
...(getItemProps ? getItemProps({ item }) : {}),
item,
highlighted: highlightedIndex === item.highlightedIndex,
embedded,
})}
</Fragment>
))}
if (itemType === 'common_payee' && lastType !== itemType) {
title = t('Suggested Payees');
} else if (itemType === 'payee' && lastType !== itemType) {
title = t('Payees');
} else if (itemType === 'account' && lastType !== itemType) {
title = t('Transfer To/From');
}
const showMoreMessage =
idx === items.length - 1 && items.length > 100;
lastType = itemType;
{payees.length > 0 &&
renderPayeeItemGroupHeader({ title: t('Payees') })}
{payees.map(item => (
<Fragment key={item.id}>
{renderPayeeItem({
...(getItemProps ? getItemProps({ item }) : {}),
item,
highlighted: highlightedIndex === item.highlightedIndex,
embedded,
})}
</Fragment>
))}
return (
<Fragment key={item.id}>
{title && (
<Fragment key={`title-${idx}`}>
{renderPayeeItemGroupHeader({ title })}
</Fragment>
)}
<Fragment key={item.id}>
{renderPayeeItem({
...(getItemProps ? getItemProps({ item }) : null),
item,
highlighted: highlightedIndex === idx + offset,
embedded,
})}
</Fragment>
{transferPayees.length > 0 &&
renderPayeeItemGroupHeader({ title: t('Transfer To/From') })}
{transferPayees.map(item => (
<Fragment key={item.id}>
{renderPayeeItem({
...(getItemProps ? getItemProps({ item }) : {}),
item,
highlighted: highlightedIndex === item.highlightedIndex,
embedded,
})}
</Fragment>
))}
{showMoreMessage && (
<div
style={{
fontSize: 11,
padding: 5,
color: theme.pageTextLight,
textAlign: 'center',
}}
>
<Trans>More payees are available, search to find them</Trans>
</div>
)}
</Fragment>
);
})}
{showSearchForMore && (
<div
style={{
fontSize: 11,
padding: 5,
color: theme.pageTextLight,
textAlign: 'center',
}}
>
<Trans>More payees are available, search to find them</Trans>
</div>
)}
</View>
{footer}
</View>
@@ -432,6 +461,8 @@ export function PayeeAutocomplete({
}
});
// Only show the first 100 results, users can search to find more.
// If user want to view all payees, it can be done via the manage payees page.
filtered = filtered.slice(0, 100);
if (filtered.length >= 2 && filtered[0].id === 'new') {

6
upcoming-release-notes/5687.md Normal file
View File

@@ -0,0 +1,6 @@
---
category: Maintenance
authors: [joel-jeremy]
---
Remove usage of a raw variable in PayeeAutocomplete component