Cache: add searchbar

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 <div>Загрузка...</div>;
   }
 
   return (
     <Wrapper>
       <Divider>Управление кэшем</Divider>
+      <Flex marginBottom="16px">
+        <Input
+          placeholder="Поиск по запросу"
+          allowClear
+          onChange={(e) => setFilterString(e.target.value)}
+        />
+      </Flex>
       <Collapse
         accordion
-        items={Object.keys(queries).map((queryGroupName) => ({
-          children: <QueryList {...queries[queryGroupName]} />,
+        items={Object.keys(filteredQueries).map((queryGroupName) => ({
+          children: <QueryList {...filteredQueries[queryGroupName]} />,
           key: queryGroupName,
           label: queryGroupName,
         }))}

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<ResponseQueries | undefined>(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 };
+}

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;
+}