fix: fix auditlog cannot fetch more data problem

src/client/components/SimpleVirtualList.tsx

@@ -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>
     );

src/client/routes/settings/auditLog.tsx

@@ -26,9 +26,14 @@ function PageComponent() {
   const parentRef = useRef<HTMLDivElement>(null);
 
   const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
-    trpc.auditLog.fetchByCursor.useInfiniteQuery({
+    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>
+      <div className="h-full overflow-hidden p-4">
         <SimpleVirtualList
           allData={allData}
           hasNextPage={hasNextPage}
           isFetchingNextPage={isFetchingNextPage}
           onFetchNextPage={fetchNextPage}
-            estimateSize={() => 48}
+          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)`,
-                  }}
-                >
-                  {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="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(data.createdAt).format(
-                          'YYYY-MM-DD HH:mm:ss'
-                        )}
+                  title={dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
                 >
-                        {dayjs(data.createdAt).format('MM-DD HH:mm')}
+                  {dayjs(item.createdAt).format('MM-DD HH:mm')}
                 </div>
                 <div className="h-full flex-1 overflow-auto">
-                        {data.content}
+                  {item.content}
                 </div>
               </div>
-                  )}
-                </List.Item>
             );
           }}
         />
-        </List>
-      </ScrollArea>
+      </div>
     </CommonWrapper>
   );
 }