diff --git a/apps/web/Components/Admin/Cache.tsx b/apps/web/Components/Admin/Cache.tsx
index b70aaff..e814f49 100644
--- a/apps/web/Components/Admin/Cache.tsx
+++ b/apps/web/Components/Admin/Cache.tsx
@@ -1,11 +1,12 @@
import Background from '../Layout/Background';
+import { useFilteredQueries } from './lib/hooks';
import * as cacheApi from '@/api/cache/query';
import { min } from '@/styles/mq';
import { useQuery } from '@tanstack/react-query';
import { memo, useMemo, useState } from 'react';
import type { QueryItem } from 'shared/types/cache';
import styled from 'styled-components';
-import { Button, Collapse, Divider } from 'ui/elements';
+import { Button, Collapse, Divider, Input } from 'ui/elements';
import { Flex } from 'ui/grid';
type QueryProps = {
@@ -103,24 +104,26 @@ const Wrapper = styled(Background)`
`;
export function CacheQueries() {
- const { data: queries } = useQuery({
- enabled: false,
- queryFn: ({ signal }) => signal && cacheApi.getQueries({ signal }),
- queryKey: ['admin', 'cache', 'queries'],
- refetchOnWindowFocus: false,
- });
+ const { filteredQueries, setFilterString } = useFilteredQueries();
- if (!queries) {
+ if (!filteredQueries) {
return
Загрузка...
;
}
return (
Управление кэшем
+
+ setFilterString(e.target.value)}
+ />
+
({
- children: ,
+ items={Object.keys(filteredQueries).map((queryGroupName) => ({
+ children: ,
key: queryGroupName,
label: queryGroupName,
}))}
diff --git a/apps/web/Components/Admin/lib/hooks.tsx b/apps/web/Components/Admin/lib/hooks.tsx
new file mode 100644
index 0000000..d77a600
--- /dev/null
+++ b/apps/web/Components/Admin/lib/hooks.tsx
@@ -0,0 +1,30 @@
+import { filterQueries } from './utils';
+import * as cacheApi from '@/api/cache/query';
+import type { ResponseQueries } from '@/api/cache/types';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useDebounce } from 'use-debounce';
+
+export function useFilteredQueries() {
+ const { data: queries } = useQuery({
+ enabled: false,
+ queryFn: ({ signal }) => signal && cacheApi.getQueries({ signal }),
+ queryKey: ['admin', 'cache', 'queries'],
+ refetchOnWindowFocus: false,
+ });
+
+ const [filteredQueries, setFilteredQueries] = useState(queries);
+ const [filterString, setFilterString] = useState('');
+ const [debouncedFilterString] = useDebounce(filterString, 350);
+
+ useEffect(() => {
+ if (!debouncedFilterString) {
+ setFilteredQueries(queries);
+ }
+ if (queries && debouncedFilterString) {
+ setFilteredQueries(filterQueries(queries, debouncedFilterString));
+ }
+ }, [debouncedFilterString, queries]);
+
+ return { filteredQueries, queries, setFilterString };
+}
diff --git a/apps/web/Components/Admin/lib/utils.tsx b/apps/web/Components/Admin/lib/utils.tsx
new file mode 100644
index 0000000..6e1480f
--- /dev/null
+++ b/apps/web/Components/Admin/lib/utils.tsx
@@ -0,0 +1,21 @@
+import type { ResponseQueries } from '@/api/cache/types';
+
+export function filterQueries(queriesObj: ResponseQueries, searchStr: string): ResponseQueries {
+ const filteredObj: ResponseQueries = {};
+
+ for (const key in queriesObj) {
+ if (key.includes(searchStr)) {
+ filteredObj[key] = queriesObj[key];
+ } else {
+ const queries = queriesObj[key].queries;
+ const includes = queries.filter((queryKey) =>
+ queryKey.toLowerCase().includes(searchStr.toLowerCase())
+ );
+ if (includes.length) {
+ filteredObj[key] = { ...queriesObj[key], queries };
+ }
+ }
+ }
+
+ return filteredObj;
+}