From f92cb03fd876a88a97c55a7ece8c8e1c02cd46c5 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 10 Apr 2024 16:15:14 +0300
Subject: [PATCH] Cache: add ReloadButton

---
 .../Components/Admin/Cache/ReloadButton.tsx   | 24 +++++++++++++++++++
 apps/web/Components/Admin/Cache/index.tsx     | 14 ++++++++---
 apps/web/Components/Admin/Cache/lib/hooks.tsx |  4 ++--
 3 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/Components/Admin/Cache/ReloadButton.tsx

diff --git a/apps/web/Components/Admin/Cache/ReloadButton.tsx b/apps/web/Components/Admin/Cache/ReloadButton.tsx
new file mode 100644
index 0000000..6ee039a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/web/Components/Admin/Cache/index.tsx b/apps/web/Components/Admin/Cache/index.tsx
index e633ece..b90300d 100644
--- a/apps/web/Components/Admin/Cache/index.tsx
+++ b/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
diff --git a/apps/web/Components/Admin/Cache/lib/hooks.tsx b/apps/web/Components/Admin/Cache/lib/hooks.tsx
index d77a600..7db2f6c 100644
--- a/apps/web/Components/Admin/Cache/lib/hooks.tsx
+++ b/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 };
 }