134 lines
3.2 KiB
TypeScript
134 lines
3.2 KiB
TypeScript
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;
|
||
`;
|
||
|
||
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: 100%;
|
||
|
||
${min('tablet')} {
|
||
min-height: 790px;
|
||
}
|
||
|
||
${min('laptop')} {
|
||
padding: 4px 18px 10px;
|
||
width: 1024px;
|
||
}
|
||
`;
|
||
|
||
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>
|
||
);
|
||
}
|