move Cache components to /Cache
This commit is contained in:
vchikalkin
parent
a9d4cde29a
commit
d8679958c6
@ -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>
|
||||
);
|
||||
}
|
||||
66
apps/web/Components/Admin/Cache/Query.tsx
Normal file
66
apps/web/Components/Admin/Cache/Query.tsx
Normal file
@ -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();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
29
apps/web/Components/Admin/Cache/QueryList.tsx
Normal file
29
apps/web/Components/Admin/Cache/QueryList.tsx
Normal file
@ -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);
|
||||
}}
|
||||
/>
|
||||
));
|
||||
});
|
||||
50
apps/web/Components/Admin/Cache/index.tsx
Normal file
50
apps/web/Components/Admin/Cache/index.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -15,7 +15,7 @@ function Content() {
|
||||
<Head>
|
||||
<title>{getPageTitle('Управление кэшем')}</title>
|
||||
</Head>
|
||||
<Admin.CacheQueries />
|
||||
<Admin.Cache />
|
||||
</Admin.Layout>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user