schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix auditlog cannot fetch more data problem

Browse Source
This commit is contained in:
moonrailgun 2024-07-03 00:02:24 +08:00
parent b7670da7db
commit 1b859e3176
2 changed files with 62 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/client/components/SimpleVirtualList.tsx
View File

@ -1,5 +1,6 @@
import { useWatch } from '@/hooks/useWatch';
import { VirtualItem, useVirtualizer } from '@tanstack/react-virtual';
import { useTranslation } from '@i18next-toolkit/react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { Empty } from 'antd';
import { last } from 'lodash-es';
import React, { useRef } from 'react';
@ -9,8 +10,9 @@ interface VirtualListProps<T = any> {
hasNextPage: boolean | undefined;
isFetchingNextPage: boolean;
onFetchNextPage: () => void;
estimateSize: (index: number) => number;
renderItem: (item: VirtualItem) => React.ReactElement;
estimateSize: number;
renderItem: (item: T) => React.ReactElement;
renderEmpty?: () => React.ReactElement;
}
export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo(
(props) => {
@ -21,14 +23,15 @@ export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo(
onFetchNextPage,
estimateSize,
renderItem,
renderEmpty,
} = props;
const parentRef = useRef<HTMLDivElement>(null);
const { t } = useTranslation();
const rowVirtualizer = useVirtualizer({
count: hasNextPage ? allData.length + 1 : allData.length,
getScrollElement: () => parentRef.current,
estimateSize,
estimateSize: () => estimateSize,
overscan: 5,
});
@ -52,7 +55,7 @@ export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo(
return (
<div ref={parentRef} className="h-full w-full overflow-auto">
{virtualItems.length === 0 && <Empty />}
{virtualItems.length === 0 && (renderEmpty ? renderEmpty() : <Empty />)}
<div
className="relative w-full"
@ -60,7 +63,27 @@ export const SimpleVirtualList: React.FC<VirtualListProps> = React.memo(
height: `${rowVirtualizer.getTotalSize()}px`,
}}
>
{virtualItems.map((virtualItem) => renderItem(virtualItem))}
{virtualItems.map((virtualItem) => {
const isLoaderRow = virtualItem.index > allData.length - 1;
const data = allData[virtualItem.index];
return (
<div
key={virtualItem.index}
className="absolute left-0 top-0 w-full"
style={{
height: `${virtualItem.size}px`,
transform: `translateY(${virtualItem.start}px)`,
}}
>
{isLoaderRow
? hasNextPage
? t('Loading more...')
: t('Nothing more to load')
: renderItem(data)}
</div>
);
})}
</div>
</div>
);

85
src/client/routes/settings/auditLog.tsx
View File

@ -26,9 +26,14 @@ function PageComponent() {
const parentRef = useRef<HTMLDivElement>(null);
const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
trpc.auditLog.fetchByCursor.useInfiniteQuery({
workspaceId,
});
trpc.auditLog.fetchByCursor.useInfiniteQuery(
{
workspaceId,
},
{
getNextPageParam: (lastPage) => lastPage.nextCursor,
}
);
const allData = useMemo(() => {
if (!data) {
@ -65,57 +70,31 @@ function PageComponent() {
return (
<CommonWrapper header={<CommonHeader title={t('Audit Log')} />}>
<ScrollArea className="h-full overflow-hidden p-4">
<List>
<SimpleVirtualList
allData={allData}
hasNextPage={hasNextPage}
isFetchingNextPage={isFetchingNextPage}
onFetchNextPage={fetchNextPage}
estimateSize={() => 48}
renderItem={(item) => {
const isLoaderRow = item.index > allData.length - 1;
const data = allData[item.index];
return (
<List.Item
key={item.index}
className="absolute left-0 top-0 w-full"
style={{
height: `${item.size}px`,
transform: `translateY(${item.start}px)`,
}}
<div className="h-full overflow-hidden p-4">
<SimpleVirtualList
allData={allData}
hasNextPage={hasNextPage}
isFetchingNextPage={isFetchingNextPage}
onFetchNextPage={fetchNextPage}
estimateSize={48}
renderItem={(item) => {
return (
<div className="flex h-full w-full items-center overflow-hidden border-b border-white border-opacity-10 text-sm">
{item.relatedType && <ColorTag label={item.relatedType} />}
<div
className="mr-2 w-9 text-xs opacity-60"
title={dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
>
{isLoaderRow ? (
hasNextPage ? (
t('Loading more...')
) : (
t('Nothing more to load')
)
) : (
<div className="flex h-7 items-center overflow-hidden">
{data.relatedType && (
<ColorTag label={data.relatedType} />
)}
<div
className="mr-2 w-9 text-xs opacity-60"
title={dayjs(data.createdAt).format(
'YYYY-MM-DD HH:mm:ss'
)}
>
{dayjs(data.createdAt).format('MM-DD HH:mm')}
</div>
<div className="h-full flex-1 overflow-auto">
{data.content}
</div>
</div>
)}
</List.Item>
);
}}
/>
</List>
</ScrollArea>
{dayjs(item.createdAt).format('MM-DD HH:mm')}
</div>
<div className="h-full flex-1 overflow-auto">
{item.content}
</div>
</div>
);
}}
/>
</div>
</CommonWrapper>
);
}