fix(frontend/player): useRegExListFilterMemo many fields filter

This commit is contained in:
Alex Kaminskii 2022-11-29 13:28:00 +01:00
parent 808070c00e
commit 08afff365f
2 changed files with 23 additions and 9 deletions

View file

@ -170,9 +170,11 @@ function NetworkPanel() {
if (!showOnlyErrors) { return list } if (!showOnlyErrors) { return list }
return list.filter(it => parseInt(it.status) >= 400 || !it.success) return list.filter(it => parseInt(it.status) >= 400 || !it.success)
}, [ showOnlyErrors, list ]) }, [ showOnlyErrors, list ])
filteredList = useRegExListFilterMemo(filteredList, it => it.status, filter) filteredList = useRegExListFilterMemo(
filteredList = useRegExListFilterMemo(filteredList, it => it.name, filter) filteredList,
filteredList = useRegExListFilterMemo(filteredList, it => it.type, filter) it => [ it.status, it.name, it.type ],
filter,
)
filteredList = useTabListFilterMemo(filteredList, it => TYPE_TO_TAB[it.type], ALL, activeTab) filteredList = useTabListFilterMemo(filteredList, it => TYPE_TO_TAB[it.type], ALL, activeTab)
const onTabClick = (activeTab: typeof TAP_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab }) const onTabClick = (activeTab: typeof TAP_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab })

View file

@ -1,19 +1,31 @@
import { useMemo } from 'react' import { useMemo } from 'react'
import { getRE } from 'App/utils' import { getRE } from 'App/utils'
export function useRegExListFilterMemo<T>(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<T>(
list: T[],
filterBy: (it: T) => string | string[],
reText: string,
) {
return useMemo(() => { return useMemo(() => {
if (!reText) { return list } if (!reText) { return list }
const re = getRE(reText, 'i') 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 ]) }, [ list, list.length, reText ])
} }
export function useTabListFilterMemo<T>(
export function useTabListFilterMemo<T, Tab=string>(
list: T[], list: T[],
itemToTab: (item: T) => string, itemToTab: (it: T) => Tab,
commonTab: string, commonTab: Tab,
currentTab: string, currentTab: Tab,
) { ) {
return useMemo(() => { return useMemo(() => {
if (currentTab === commonTab) { return list } if (currentTab === commonTab) { return list }