Cache: add ReloadButton

apps/web/Components/Admin/Cache/ReloadButton.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Button } from 'ui/elements';
+import { ReloadOutlined } from 'ui/elements/icons';
+
+export function ReloadButton({ onClick }: { readonly onClick: () => Promise<unknown> }) {
+  const [pending, setPending] = useState(false);
+
+  return (
+    <Button
+      loading={pending}
+      onClick={() => {
+        setPending(true);
+        onClick().finally(() => {
+          setTimeout(() => {
+            setPending(false);
+          }, 1000);
+        });
+      }}
+      icon={<ReloadOutlined rev="" />}
+    >
+      Обновить
+    </Button>
+  );
+}

apps/web/Components/Admin/Cache/index.tsx

@@ -1,10 +1,10 @@
 import Background from '../../Layout/Background';
 import { useFilteredQueries } from './lib/hooks';
 import { QueryList } from './QueryList';
+import { ReloadButton } from './ReloadButton';
 import { min } from '@/styles/mq';
 import styled from 'styled-components';
 import { Collapse, Divider, Input } from 'ui/elements';
-import { Flex } from 'ui/grid';
 
 const Wrapper = styled(Background)`
   padding: 4px 6px;
@@ -20,8 +20,15 @@ const Wrapper = styled(Background)`
   }
 `;
 
+const Flex = styled.div`
+  display: flex;
+  margin-bottom: 16px;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
 export function Cache() {
-  const { filteredQueries, setFilterString } = useFilteredQueries();
+  const { filteredQueries, refetch, setFilterString } = useFilteredQueries();
 
   if (!filteredQueries) {
     return <div>Загрузка...</div>;
@@ -30,12 +37,13 @@ export function Cache() {
   return (
     <Wrapper>
       <Divider>Управление кэшем</Divider>
-      <Flex marginBottom="16px">
+      <Flex>
         <Input
           placeholder="Поиск по запросу"
           allowClear
           onChange={(e) => setFilterString(e.target.value)}
         />
+        <ReloadButton onClick={refetch} />
       </Flex>
       <Collapse
         accordion

apps/web/Components/Admin/Cache/lib/hooks.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import { useDebounce } from 'use-debounce';
 
 export function useFilteredQueries() {
-  const { data: queries } = useQuery({
+  const { data: queries, refetch } = useQuery({
     enabled: false,
     queryFn: ({ signal }) => signal && cacheApi.getQueries({ signal }),
     queryKey: ['admin', 'cache', 'queries'],
@@ -26,5 +26,5 @@ export function useFilteredQueries() {
     }
   }, [debouncedFilterString, queries]);
 
-  return { filteredQueries, queries, setFilterString };
+  return { filteredQueries, queries, refetch, setFilterString };
 }