From d8679958c6c660270c9c90a28fa4dde443717a3c Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 10 Apr 2024 15:41:20 +0300
Subject: [PATCH] move Cache components to /Cache

---
 apps/web/Components/Admin/Cache.tsx           | 137 ------------------
 apps/web/Components/Admin/Cache/Query.tsx     |  66 +++++++++
 apps/web/Components/Admin/Cache/QueryList.tsx |  29 ++++
 apps/web/Components/Admin/Cache/index.tsx     |  50 +++++++
 .../Admin/{ => Cache}/lib/hooks.tsx           |   0
 .../Admin/{ => Cache}/lib/utils.tsx           |   0
 apps/web/pages/admin/cache.jsx                |   2 +-
 7 files changed, 146 insertions(+), 138 deletions(-)
 delete mode 100644 apps/web/Components/Admin/Cache.tsx
 create mode 100644 apps/web/Components/Admin/Cache/Query.tsx
 create mode 100644 apps/web/Components/Admin/Cache/QueryList.tsx
 create mode 100644 apps/web/Components/Admin/Cache/index.tsx
 rename apps/web/Components/Admin/{ => Cache}/lib/hooks.tsx (100%)
 rename apps/web/Components/Admin/{ => Cache}/lib/utils.tsx (100%)

diff --git a/apps/web/Components/Admin/Cache.tsx b/apps/web/Components/Admin/Cache.tsx
deleted file mode 100644
index c8a0551..0000000
--- a/apps/web/Components/Admin/Cache.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-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, Input } from 'ui/elements';
-import { Flex } from 'ui/grid';
-
-type QueryProps = {
-  readonly handleDeleteQuery: () => void;
-  readonly queryKey: string;
-};
-
-const StyledPre = styled.pre`
-  max-height: 300px;
-  overflow-y: auto;
-
-  ${min('desktop')} {
-    max-height: 800px;
-  }
-`;
-
-const Query = memo(({ handleDeleteQuery, queryKey }: QueryProps) => {
-  const { data, refetch } = useQuery({
-    enabled: false,
-    queryFn: ({ signal }) => signal && cacheApi.getQueryValue(queryKey, { signal }),
-    queryKey: ['admin', 'cache', 'query', queryKey],
-    refetchOnWindowFocus: false,
-  });
-
-  const [activeKey, setActiveKey] = useState<string | undefined>(undefined);
-
-  const content = (
-    <>
-      <StyledPre>{JSON.stringify(data, null, 2)}</StyledPre>
-      <Flex justifyContent="flex-end">
-        <Button type="primary" danger onClick={handleDeleteQuery}>
-          Удалить
-        </Button>
-      </Flex>
-    </>
-  );
-
-  return (
-    <Collapse
-      bordered={false}
-      activeKey={activeKey}
-      items={[
-        {
-          children: data ? content : 'Загрузка...',
-          key: queryKey,
-          label: queryKey,
-        },
-      ]}
-      onChange={() => {
-        if (activeKey) {
-          setActiveKey(undefined);
-        } else {
-          setActiveKey(queryKey);
-
-          refetch();
-        }
-      }}
-    />
-  );
-});
-
-type QueryListProps = QueryItem;
-
-const QueryList = memo(({ queries }: QueryListProps) => {
-  const [deletedQueries, setDeletedQueries] = useState<QueryItem['queries']>([]);
-
-  const activeQueries = useMemo(
-    () => queries.filter((queryKey) => !deletedQueries.includes(queryKey)),
-    [deletedQueries, queries]
-  );
-
-  function deleteQuery(queryKey: string) {
-    cacheApi.deleteQuery(queryKey).then(() => setDeletedQueries([...deletedQueries, queryKey]));
-  }
-
-  return activeQueries.map((queryKey) => (
-    <Query
-      key={queryKey}
-      queryKey={queryKey}
-      handleDeleteQuery={() => {
-        deleteQuery(queryKey);
-      }}
-    />
-  ));
-});
-
-const Wrapper = styled(Background)`
-  padding: 4px 6px;
-  width: 100vw;
-
-  ${min('tablet')} {
-    min-height: 790px;
-  }
-
-  ${min('laptop')} {
-    padding: 4px 18px 10px;
-    width: unset;
-  }
-`;
-
-export function CacheQueries() {
-  const { filteredQueries, setFilterString } = useFilteredQueries();
-
-  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(filteredQueries).map((queryGroupName) => ({
-          children: <QueryList {...filteredQueries[queryGroupName]} />,
-          key: queryGroupName,
-          label: queryGroupName,
-        }))}
-      />
-    </Wrapper>
-  );
-}
diff --git a/apps/web/Components/Admin/Cache/Query.tsx b/apps/web/Components/Admin/Cache/Query.tsx
new file mode 100644
index 0000000..7fc0dd0
--- /dev/null
+++ b/apps/web/Components/Admin/Cache/Query.tsx
@@ -0,0 +1,66 @@
+import * as cacheApi from '@/api/cache/query';
+import { min } from '@/styles/mq';
+import { useQuery } from '@tanstack/react-query';
+import { memo, useState } from 'react';
+import styled from 'styled-components';
+import { Button, Collapse } from 'ui/elements';
+import { Flex } from 'ui/grid';
+
+type QueryProps = {
+  readonly handleDeleteQuery: () => void;
+  readonly queryKey: string;
+};
+
+const StyledPre = styled.pre`
+  max-height: 300px;
+  overflow-y: auto;
+
+  ${min('desktop')} {
+    max-height: 800px;
+  }
+`;
+
+export const Query = memo(({ handleDeleteQuery, queryKey }: QueryProps) => {
+  const { data, refetch } = useQuery({
+    enabled: false,
+    queryFn: ({ signal }) => signal && cacheApi.getQueryValue(queryKey, { signal }),
+    queryKey: ['admin', 'cache', 'query', queryKey],
+    refetchOnWindowFocus: false,
+  });
+
+  const [activeKey, setActiveKey] = useState<string | undefined>(undefined);
+
+  const content = (
+    <>
+      <StyledPre>{JSON.stringify(data, null, 2)}</StyledPre>
+      <Flex justifyContent="flex-end">
+        <Button type="primary" danger onClick={handleDeleteQuery}>
+          Удалить
+        </Button>
+      </Flex>
+    </>
+  );
+
+  return (
+    <Collapse
+      bordered={false}
+      activeKey={activeKey}
+      items={[
+        {
+          children: data ? content : 'Загрузка...',
+          key: queryKey,
+          label: queryKey,
+        },
+      ]}
+      onChange={() => {
+        if (activeKey) {
+          setActiveKey(undefined);
+        } else {
+          setActiveKey(queryKey);
+
+          refetch();
+        }
+      }}
+    />
+  );
+});
diff --git a/apps/web/Components/Admin/Cache/QueryList.tsx b/apps/web/Components/Admin/Cache/QueryList.tsx
new file mode 100644
index 0000000..97b200b
--- /dev/null
+++ b/apps/web/Components/Admin/Cache/QueryList.tsx
@@ -0,0 +1,29 @@
+import { Query } from './Query';
+import * as cacheApi from '@/api/cache/query';
+import { memo, useMemo, useState } from 'react';
+import type { QueryItem } from 'shared/types/cache';
+
+type QueryListProps = QueryItem;
+
+export const QueryList = memo(({ queries }: QueryListProps) => {
+  const [deletedQueries, setDeletedQueries] = useState<QueryItem['queries']>([]);
+
+  const activeQueries = useMemo(
+    () => queries.filter((queryKey) => !deletedQueries.includes(queryKey)),
+    [deletedQueries, queries]
+  );
+
+  function deleteQuery(queryKey: string) {
+    cacheApi.deleteQuery(queryKey).then(() => setDeletedQueries([...deletedQueries, queryKey]));
+  }
+
+  return activeQueries.map((queryKey) => (
+    <Query
+      key={queryKey}
+      queryKey={queryKey}
+      handleDeleteQuery={() => {
+        deleteQuery(queryKey);
+      }}
+    />
+  ));
+});
diff --git a/apps/web/Components/Admin/Cache/index.tsx b/apps/web/Components/Admin/Cache/index.tsx
new file mode 100644
index 0000000..e633ece
--- /dev/null
+++ b/apps/web/Components/Admin/Cache/index.tsx
@@ -0,0 +1,50 @@
+import Background from '../../Layout/Background';
+import { useFilteredQueries } from './lib/hooks';
+import { QueryList } from './QueryList';
+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;
+  width: 100vw;
+
+  ${min('tablet')} {
+    min-height: 790px;
+  }
+
+  ${min('laptop')} {
+    padding: 4px 18px 10px;
+    width: unset;
+  }
+`;
+
+export function Cache() {
+  const { filteredQueries, setFilterString } = useFilteredQueries();
+
+  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(filteredQueries).map((queryGroupName) => ({
+          children: <QueryList {...filteredQueries[queryGroupName]} />,
+          key: queryGroupName,
+          label: queryGroupName,
+        }))}
+      />
+    </Wrapper>
+  );
+}
diff --git a/apps/web/Components/Admin/lib/hooks.tsx b/apps/web/Components/Admin/Cache/lib/hooks.tsx
similarity index 100%
rename from apps/web/Components/Admin/lib/hooks.tsx
rename to apps/web/Components/Admin/Cache/lib/hooks.tsx
diff --git a/apps/web/Components/Admin/lib/utils.tsx b/apps/web/Components/Admin/Cache/lib/utils.tsx
similarity index 100%
rename from apps/web/Components/Admin/lib/utils.tsx
rename to apps/web/Components/Admin/Cache/lib/utils.tsx
diff --git a/apps/web/pages/admin/cache.jsx b/apps/web/pages/admin/cache.jsx
index cee4ffb..c657ffb 100644
--- a/apps/web/pages/admin/cache.jsx
+++ b/apps/web/pages/admin/cache.jsx
@@ -15,7 +15,7 @@ function Content() {
       <Head>
         <title>{getPageTitle('Управление кэшем')}</title>
       </Head>
-      <Admin.CacheQueries />
+      <Admin.Cache />
     </Admin.Layout>
   );
 }