merge branch feature/clear-cache-button

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

@@ -1,9 +1,10 @@
 import Background from '../../Layout/Background';
 import { useFilteredQueries } from './lib/hooks';
 import { QueryList } from './QueryList';
+import { reset } from '@/api/cache/query';
 import { min } from '@/styles/mq';
 import styled from 'styled-components';
-import { Collapse, Divider, Input } from 'ui/elements';
+import { Button, Collapse, Divider, Input } from 'ui/elements';
 
 const Wrapper = styled(Background)`
   padding: 4px 6px;
@@ -21,13 +22,21 @@ const Wrapper = styled(Background)`
 
 const Flex = styled.div`
   display: flex;
-  margin-bottom: 16px;
-  justify-content: space-between;
+  flex-direction: column;
   gap: 10px;
 `;
 
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
 export function Cache() {
-  const { filteredQueries, setFilterString } = useFilteredQueries();
+  const { filteredQueries, refetch, setFilterString } = useFilteredQueries();
+
+  function handleDeleteQuery() {
+    return reset().then(() => refetch());
+  }
 
   if (!filteredQueries) {
     return <div>Загрузка...</div>;
@@ -42,15 +51,20 @@ export function Cache() {
           allowClear
           onChange={(e) => setFilterString(e.target.value)}
         />
+        <Collapse
+          accordion
+          items={Object.keys(filteredQueries).map((queryGroupName) => ({
+            children: <QueryList {...filteredQueries[queryGroupName]} />,
+            key: queryGroupName,
+            label: queryGroupName,
+          }))}
+        />
+        <ButtonWrapper>
+          <Button type="primary" danger disabled={false} onClick={() => handleDeleteQuery()}>
+            Очистить кэш
+          </Button>
+        </ButtonWrapper>
       </Flex>
-      <Collapse
-        accordion
-        items={Object.keys(filteredQueries).map((queryGroupName) => ({
-          children: <QueryList {...filteredQueries[queryGroupName]} />,
-          key: queryGroupName,
-          label: queryGroupName,
-        }))}
-      />
     </Wrapper>
   );
 }