Skip to content

Commit c0b479e

Browse files
zfurtakzfurtak
committed
Remove manual memoization
1 parent 10d48b3 commit c0b479e

1 file changed

Lines changed: 64 additions & 73 deletions

File tree

‎src/components/Search/SearchSingleSelectionPicker.tsx‎

Lines changed: 64 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import React, {useCallback, useEffect, useMemo, useState} from 'react';
1+
import React, {useEffect, useState} from 'react';
2+
import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
3+
import SelectionList from '@components/SelectionList/SelectionListWithSections';
24
import useDebouncedState from '@hooks/useDebouncedState';
35
import useLocalize from '@hooks/useLocalize';
46
import Navigation from '@libs/Navigation/Navigation';
@@ -7,8 +9,6 @@ import {sortOptionsWithEmptyValue} from '@libs/SearchQueryUtils';
79
import ROUTES from '@src/ROUTES';
810
import type {Route} from '@src/ROUTES';
911
import SearchFilterPageFooterButtons from './SearchFilterPageFooterButtons';
10-
import SelectionList from '@components/SelectionList/SelectionListWithSections';
11-
import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
1212

1313
type SearchSingleSelectionPickerItem = {
1414
name: string;
@@ -43,80 +43,72 @@ function SearchSingleSelectionPicker({
4343
setSelectedItem(initiallySelectedItem);
4444
}, [initiallySelectedItem]);
4545

46-
const {sections, noResultsFound} = useMemo(() => {
47-
const initiallySelectedItemSection = initiallySelectedItem?.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase())
48-
? [
49-
{
50-
text: initiallySelectedItem.name,
51-
keyForList: initiallySelectedItem.value,
52-
isSelected: selectedItem?.value === initiallySelectedItem.value,
53-
value: initiallySelectedItem.value,
54-
},
55-
]
56-
: [];
57-
const remainingItemsSection = items
58-
.filter((item) => item?.value !== initiallySelectedItem?.value && item?.name?.toLowerCase().includes(debouncedSearchTerm?.toLowerCase()))
59-
.sort((a, b) => sortOptionsWithEmptyValue(a.name.toString(), b.name.toString(), localeCompare))
60-
.map((item) => ({
61-
text: item.name,
62-
keyForList: item.value,
63-
isSelected: selectedItem?.value === item.value,
64-
value: item.value,
65-
}));
66-
const isEmpty = !initiallySelectedItemSection.length && !remainingItemsSection.length;
67-
return {
68-
sections: isEmpty
69-
? []
70-
: [
71-
{
72-
title: undefined,
73-
data: initiallySelectedItemSection,
74-
sectionIndex: 0,
75-
},
76-
{
77-
title: pickerTitle,
78-
data: remainingItemsSection,
79-
sectionIndex: 1,
80-
},
81-
],
82-
noResultsFound: isEmpty,
83-
};
84-
}, [initiallySelectedItem, selectedItem?.value, items, pickerTitle, debouncedSearchTerm, localeCompare]);
85-
86-
const onSelectItem = useCallback(
87-
(item: Partial<OptionData & SearchSingleSelectionPickerItem>) => {
88-
if (!item.text || !item.keyForList || !item.value) {
89-
return;
90-
}
91-
if (shouldAutoSave) {
92-
onSaveSelection(item.isSelected ? '' : item.value);
93-
Navigation.goBack(backToRoute ?? ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
94-
return;
95-
}
96-
if (!item.isSelected) {
97-
setSelectedItem({name: item.text, value: item.value});
98-
}
99-
},
100-
[shouldAutoSave, backToRoute, onSaveSelection],
101-
);
46+
const initiallySelectedItemSection = initiallySelectedItem?.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase())
47+
? [
48+
{
49+
text: initiallySelectedItem.name,
50+
keyForList: initiallySelectedItem.value,
51+
isSelected: selectedItem?.value === initiallySelectedItem.value,
52+
value: initiallySelectedItem.value,
53+
},
54+
]
55+
: [];
56+
57+
const remainingItemsSection = items
58+
.filter((item) => item.value !== initiallySelectedItem?.value && item.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase()))
59+
.sort((a, b) => sortOptionsWithEmptyValue(a.name.toString(), b.name.toString(), localeCompare))
60+
.map((item) => ({
61+
text: item.name,
62+
keyForList: item.value,
63+
isSelected: selectedItem?.value === item.value,
64+
value: item.value,
65+
}));
66+
67+
const noResultsFound = !initiallySelectedItemSection.length && !remainingItemsSection.length;
68+
69+
const sections = noResultsFound
70+
? []
71+
: [
72+
{
73+
title: undefined,
74+
data: initiallySelectedItemSection,
75+
sectionIndex: 0,
76+
},
77+
{
78+
title: pickerTitle,
79+
data: remainingItemsSection,
80+
sectionIndex: 1,
81+
},
82+
];
10283

103-
const resetChanges = useCallback(() => {
84+
const onSelectItem = (item: Partial<OptionData & SearchSingleSelectionPickerItem>) => {
85+
if (!item.text || !item.keyForList || !item.value) {
86+
return;
87+
}
88+
if (shouldAutoSave) {
89+
onSaveSelection(item.isSelected ? '' : item.value);
90+
Navigation.goBack(backToRoute ?? ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
91+
return;
92+
}
93+
if (!item.isSelected) {
94+
setSelectedItem({name: item.text, value: item.value});
95+
}
96+
};
97+
98+
const resetChanges = () => {
10499
setSelectedItem(undefined);
105-
}, []);
100+
};
106101

107-
const applyChanges = useCallback(() => {
102+
const applyChanges = () => {
108103
onSaveSelection(selectedItem?.value);
109104
Navigation.goBack(backToRoute ?? ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
110-
}, [onSaveSelection, selectedItem?.value, backToRoute]);
111-
112-
const footerContent = useMemo(
113-
() => (
114-
<SearchFilterPageFooterButtons
115-
applyChanges={applyChanges}
116-
resetChanges={resetChanges}
117-
/>
118-
),
119-
[resetChanges, applyChanges],
105+
};
106+
107+
const footerContent = (
108+
<SearchFilterPageFooterButtons
109+
applyChanges={applyChanges}
110+
resetChanges={resetChanges}
111+
/>
120112
);
121113

122114
const textInputOptions = {
@@ -126,7 +118,6 @@ function SearchSingleSelectionPicker({
126118
headerMessage: noResultsFound ? translate('common.noResultsFound') : undefined,
127119
};
128120

129-
130121
return (
131122
<SelectionList
132123
sections={sections}

0 commit comments

Comments
 (0)