diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 7b0c01230..58831eb48 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -170,9 +170,11 @@ function NetworkPanel() { if (!showOnlyErrors) { return list } return list.filter(it => parseInt(it.status) >= 400 || !it.success) }, [ showOnlyErrors, list ]) - filteredList = useRegExListFilterMemo(filteredList, it => it.status, filter) - filteredList = useRegExListFilterMemo(filteredList, it => it.name, filter) - filteredList = useRegExListFilterMemo(filteredList, it => it.type, filter) + filteredList = useRegExListFilterMemo( + filteredList, + it => [ it.status, it.name, it.type ], + filter, + ) filteredList = useTabListFilterMemo(filteredList, it => TYPE_TO_TAB[it.type], ALL, activeTab) const onTabClick = (activeTab: typeof TAP_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab }) diff --git a/frontend/app/components/shared/DevTools/useListFilter.ts b/frontend/app/components/shared/DevTools/useListFilter.ts index 1f4c30f82..8f526c524 100644 --- a/frontend/app/components/shared/DevTools/useListFilter.ts +++ b/frontend/app/components/shared/DevTools/useListFilter.ts @@ -1,19 +1,31 @@ import { useMemo } from 'react' import { getRE } from 'App/utils' -export function useRegExListFilterMemo(list: T[], filterBy: (item: T) => string, reText: string) { + +// TODO: merge with utils/filterList (use logic of string getter like here instead of using callback) +export function useRegExListFilterMemo( + list: T[], + filterBy: (it: T) => string | string[], + reText: string, +) { return useMemo(() => { if (!reText) { return list } const re = getRE(reText, 'i') - list.filter(it => re.test(filterBy(it))) + return list.filter(it => { + const strs = filterBy(it) + return Array.isArray(strs) + ? strs.some(s => re.test(s)) + : re.test(strs) + }) }, [ list, list.length, reText ]) } -export function useTabListFilterMemo( + +export function useTabListFilterMemo( list: T[], - itemToTab: (item: T) => string, - commonTab: string, - currentTab: string, + itemToTab: (it: T) => Tab, + commonTab: Tab, + currentTab: Tab, ) { return useMemo(() => { if (currentTab === commonTab) { return list }