From 830723fafe4952e147e5fa08788ed0ddddd60cca Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 10 Apr 2024 15:55:40 +0300
Subject: [PATCH] Query: disable delete button when pending

---
 apps/web/Components/Admin/Cache/Query.tsx     | 15 +++++++++++++--
 apps/web/Components/Admin/Cache/QueryList.tsx | 12 ++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/web/Components/Admin/Cache/Query.tsx b/apps/web/Components/Admin/Cache/Query.tsx
index 7fc0dd0..06cd4dd 100644
--- a/apps/web/Components/Admin/Cache/Query.tsx
+++ b/apps/web/Components/Admin/Cache/Query.tsx
@@ -7,7 +7,7 @@ import { Button, Collapse } from 'ui/elements';
 import { Flex } from 'ui/grid';
 
 type QueryProps = {
-  readonly handleDeleteQuery: () => void;
+  readonly handleDeleteQuery: () => Promise<void>;
   readonly queryKey: string;
 };
 
@@ -29,12 +29,23 @@ export const Query = memo(({ handleDeleteQuery, queryKey }: QueryProps) => {
   });
 
   const [activeKey, setActiveKey] = useState<string | undefined>(undefined);
+  const [deletePending, setDeletePending] = useState(false);
 
   const content = (
     <>
       <StyledPre>{JSON.stringify(data, null, 2)}</StyledPre>
       <Flex justifyContent="flex-end">
-        <Button type="primary" danger onClick={handleDeleteQuery}>
+        <Button
+          type="primary"
+          danger
+          disabled={deletePending}
+          onClick={() => {
+            setDeletePending(true);
+            handleDeleteQuery().finally(() => {
+              setDeletePending(false);
+            });
+          }}
+        >
           Удалить
         </Button>
       </Flex>
diff --git a/apps/web/Components/Admin/Cache/QueryList.tsx b/apps/web/Components/Admin/Cache/QueryList.tsx
index 97b200b..ec57065 100644
--- a/apps/web/Components/Admin/Cache/QueryList.tsx
+++ b/apps/web/Components/Admin/Cache/QueryList.tsx
@@ -14,16 +14,12 @@ export const QueryList = memo(({ queries }: QueryListProps) => {
   );
 
   function deleteQuery(queryKey: string) {
-    cacheApi.deleteQuery(queryKey).then(() => setDeletedQueries([...deletedQueries, queryKey]));
+    return cacheApi
+      .deleteQuery(queryKey)
+      .then(() => setDeletedQueries([...deletedQueries, queryKey]));
   }
 
   return activeQueries.map((queryKey) => (
-    <Query
-      key={queryKey}
-      queryKey={queryKey}
-      handleDeleteQuery={() => {
-        deleteQuery(queryKey);
-      }}
-    />
+    <Query key={queryKey} queryKey={queryKey} handleDeleteQuery={() => deleteQuery(queryKey)} />
   ));
 });