Skip to content

Commit 7303ea9

Browse files
luacmartinsluacmartins
committed
dry code
1 parent 5b22097 commit 7303ea9

1 file changed

Lines changed: 82 additions & 86 deletions

File tree

‎src/components/Search/SearchPageHeader/SearchFiltersBar.tsx‎

Lines changed: 82 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import SingleSelectPopup from '@components/Search/FilterDropdowns/SingleSelectPo
1717
import UserSelectPopup from '@components/Search/FilterDropdowns/UserSelectPopup';
1818
import {useSearchContext} from '@components/Search/SearchContext';
1919
import type {SearchDateValues} from '@components/Search/SearchDatePresetFilterBase';
20-
import type {SearchQueryJSON, SingularSearchStatus} from '@components/Search/types';
20+
import type {SearchDateFilterKeys, SearchQueryJSON, SingularSearchStatus} from '@components/Search/types';
2121
import SearchFiltersSkeleton from '@components/Skeletons/SearchFiltersSkeleton';
2222
import useEnvironment from '@hooks/useEnvironment';
2323
import useLocalize from '@hooks/useLocalize';
@@ -48,6 +48,7 @@ import type {SearchAdvancedFiltersForm} from '@src/types/form';
4848
import FILTER_KEYS from '@src/types/form/SearchAdvancedFiltersForm';
4949
import type {CurrencyList} from '@src/types/onyx';
5050
import {getEmptyObject} from '@src/types/utils/EmptyObject';
51+
import type {TranslationPaths} from '@src/languages/types';
5152
import type {SearchHeaderOptionValue} from './SearchPageHeader';
5253

5354
type SearchFiltersBarProps = {
@@ -142,47 +143,47 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions, isMobileSelectionMod
142143
return [value, displayText];
143144
}, [filterFormValues.dateOn, filterFormValues.dateAfter, filterFormValues.dateBefore, translate]);
144145

145-
const [posted, displayPosted] = useMemo(() => {
146-
const value: SearchDateValues = {
147-
[CONST.SEARCH.DATE_MODIFIERS.ON]: filterFormValues.postedOn,
148-
[CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterFormValues.postedAfter,
149-
[CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterFormValues.postedBefore,
150-
};
151-
152-
const displayText: string[] = [];
153-
if (value.On) {
154-
displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
155-
}
156-
if (value.After) {
157-
displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
158-
}
159-
if (value.Before) {
160-
displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
161-
}
162-
163-
return [value, displayText];
164-
}, [filterFormValues.postedOn, filterFormValues.postedAfter, filterFormValues.postedBefore, translate]);
165-
166-
const [withdrawn, displayWithdrawn] = useMemo(() => {
167-
const value: SearchDateValues = {
168-
[CONST.SEARCH.DATE_MODIFIERS.ON]: filterFormValues.withdrawnOn,
169-
[CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterFormValues.withdrawnAfter,
170-
[CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterFormValues.withdrawnBefore,
171-
};
172-
173-
const displayText: string[] = [];
174-
if (value.On) {
175-
displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
176-
}
177-
if (value.After) {
178-
displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
179-
}
180-
if (value.Before) {
181-
displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
182-
}
183-
184-
return [value, displayText];
185-
}, [filterFormValues.withdrawnOn, filterFormValues.withdrawnAfter, filterFormValues.withdrawnBefore, translate]);
146+
const createDateDisplayValue = useCallback(
147+
(filterValues: { on?: string; after?: string; before?: string }): [SearchDateValues, string[]] => {
148+
const value: SearchDateValues = {
149+
[CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
150+
[CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
151+
[CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
152+
};
153+
154+
const displayText: string[] = [];
155+
if (value.On) {
156+
displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
157+
}
158+
if (value.After) {
159+
displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
160+
}
161+
if (value.Before) {
162+
displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
163+
}
164+
165+
return [value, displayText];
166+
},
167+
[translate],
168+
);
169+
170+
const [posted, displayPosted] = useMemo(() =>
171+
createDateDisplayValue({
172+
on: filterFormValues.postedOn,
173+
after: filterFormValues.postedAfter,
174+
before: filterFormValues.postedBefore,
175+
}),
176+
[filterFormValues.postedOn, filterFormValues.postedAfter, filterFormValues.postedBefore, createDateDisplayValue]
177+
);
178+
179+
const [withdrawn, displayWithdrawn] = useMemo(() =>
180+
createDateDisplayValue({
181+
on: filterFormValues.withdrawnOn,
182+
after: filterFormValues.withdrawnAfter,
183+
before: filterFormValues.withdrawnBefore,
184+
}),
185+
[filterFormValues.withdrawnOn, filterFormValues.withdrawnAfter, filterFormValues.withdrawnBefore, createDateDisplayValue]
186+
);
186187

187188
const updateFilterForm = useCallback(
188189
(values: Partial<SearchAdvancedFiltersForm>) => {
@@ -257,54 +258,49 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions, isMobileSelectionMod
257258
[translate, feedOptions, feed, updateFilterForm],
258259
);
259260

260-
const postedPickerComponent = useCallback(
261-
({closeOverlay}: PopoverComponentProps) => {
262-
const onChange = (selectedDates: SearchDateValues) => {
263-
const dateFormValues = {
264-
postedOn: selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON],
265-
postedAfter: selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER],
266-
postedBefore: selectedDates[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
261+
const createDatePickerComponent = useCallback(
262+
(filterKey: SearchDateFilterKeys, value: SearchDateValues, translationKey: TranslationPaths) => {
263+
return ({closeOverlay}: PopoverComponentProps) => {
264+
const onChange = (selectedDates: SearchDateValues) => {
265+
const dateFormValues = {
266+
[`${filterKey}On`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON],
267+
[`${filterKey}After`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER],
268+
[`${filterKey}Before`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
269+
};
270+
271+
updateFilterForm(dateFormValues);
267272
};
268-
269-
updateFilterForm(dateFormValues);
273+
274+
return (
275+
<DateSelectPopup
276+
label={translate(translationKey)}
277+
value={value}
278+
onChange={onChange}
279+
closeOverlay={closeOverlay}
280+
presets={getDatePresets(filterKey, true)}
281+
/>
282+
);
270283
};
271-
272-
return (
273-
<DateSelectPopup
274-
label={translate('search.filters.posted')}
275-
value={posted}
276-
onChange={onChange}
277-
closeOverlay={closeOverlay}
278-
presets={getDatePresets(CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED, true)}
279-
/>
280-
);
281284
},
282-
[posted, translate, updateFilterForm],
285+
[translate, updateFilterForm],
283286
);
284-
285-
const withdrawnPickerComponent = useCallback(
286-
({closeOverlay}: PopoverComponentProps) => {
287-
const onChange = (selectedDates: SearchDateValues) => {
288-
const dateFormValues = {
289-
withdrawnOn: selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON],
290-
withdrawnAfter: selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER],
291-
withdrawnBefore: selectedDates[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
292-
};
293-
294-
updateFilterForm(dateFormValues);
295-
};
296-
297-
return (
298-
<DateSelectPopup
299-
label={translate('search.filters.withdrawn')}
300-
value={withdrawn}
301-
onChange={onChange}
302-
closeOverlay={closeOverlay}
303-
presets={getDatePresets(CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN, true)}
304-
/>
305-
);
306-
},
307-
[withdrawn, translate, updateFilterForm],
287+
288+
const postedPickerComponent = useMemo(
289+
() => createDatePickerComponent(
290+
CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED,
291+
posted,
292+
'search.filters.posted'
293+
),
294+
[createDatePickerComponent, posted]
295+
);
296+
297+
const withdrawnPickerComponent = useMemo(
298+
() => createDatePickerComponent(
299+
CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN,
300+
withdrawn,
301+
'search.filters.withdrawn'
302+
),
303+
[createDatePickerComponent, withdrawn]
308304
);
309305

310306
const statusComponent = useCallback(

0 commit comments

Comments
 (0)