26 lines
834 B
TypeScript
26 lines
834 B
TypeScript
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 handleDeleteQuery(queryKey: string) {
|
|
return cacheApi
|
|
.deleteQuery(queryKey)
|
|
.then(() => setDeletedQueries([...deletedQueries, queryKey]));
|
|
}
|
|
|
|
return activeQueries.map((queryKey) => (
|
|
<Query key={queryKey} queryKey={queryKey} onDeleteQuery={() => handleDeleteQuery(queryKey)} />
|
|
));
|
|
});
|