fix(frontend): refetch next 40 samples

opendatalab · Apr 19, 2024 · 1035e1b · 1035e1b
1 parent 769ff79
commit 1035e1b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/apps/frontend/src/hooks/useScrollFetch.ts b/apps/frontend/src/hooks/useScrollFetch.ts
@@ -23,7 +23,7 @@ export function useScrollFetch<T extends any[] | undefined>(
   service: (isReset: boolean) => Promise<T>,
   container?: HTMLDivElement | (() => HTMLDivElement | null) | undefined,
   options?: Option<T>,
-): [T, boolean, Dispatch<SetStateAction<T>>] {
+): [T, boolean, Dispatch<SetStateAction<T>>, () => Promise<unknown>] {
   const { threshold, afterFetching, isEnd, watch } = {
     threshold: 0,
     ...options,
@@ -122,5 +122,5 @@ export function useScrollFetch<T extends any[] | undefined>(
     };
   }, [container, handleOnScroll]);
 
-  return [data, isLoading, setData];
+  return [data, isLoading, setData, wrappedService];
 }
diff --git a/apps/frontend/src/pages/tasks.[id].samples.[id]/components/annotationRightCorner/index.tsx b/apps/frontend/src/pages/tasks.[id].samples.[id]/components/annotationRightCorner/index.tsx
@@ -18,10 +18,12 @@ import { message } from '@/StaticAnt';
 import AnnotationContext from '../../annotation.context';
 
 interface AnnotationRightCornerProps {
-  isLastSample: boolean;
-  isFirstSample: boolean;
   // 用于标注预览
   noSave?: boolean;
+
+  fetchNext?: () => void;
+
+  totalSize: number;
 }
 
 export const SAMPLE_CHANGED = 'sampleChanged';
@@ -56,7 +58,7 @@ export interface AnnotationLoaderData {
   samples: SampleListResponse;
 }
 
-const AnnotationRightCorner = ({ isLastSample, isFirstSample, noSave }: AnnotationRightCornerProps) => {
+const AnnotationRightCorner = ({ noSave, fetchNext, totalSize }: AnnotationRightCornerProps) => {
   const isFetching = useIsFetching();
   const isMutating = useIsMutating();
   const isGlobalLoading = isFetching > 0 || isMutating > 0;
@@ -67,10 +69,20 @@ const AnnotationRightCorner = ({ isLastSample, isFirstSample, noSave }: Annotati
   const sampleId = routeParams.sampleId;
   const { samples, setSamples, task } = useContext(AnnotationContext);
   const sampleIndex = _.findIndex(samples, (sample: SampleResponse) => sample.id === +sampleId!);
+  const isLastSample = _.findIndex(samples, { id: +sampleId! }) === samples.length - 1;
+  const isFirstSample = _.findIndex(samples, { id: +sampleId! }) === 0;
   const currentSample = samples[sampleIndex];
   const isSampleSkipped = currentSample?.state === SampleState.SKIPPED;
   const [searchParams] = useSearchParams();
 
+  // 第一次进入就是40的倍数时，获取下一页数据
+  useEffect(() => {
+    if (isLastSample && samples.length < totalSize) {
+      // TODO: fetchNext 调用两次
+      fetchNext?.();
+    }
+  }, [fetchNext, isLastSample, samples.length, totalSize]);
+
   const navigateWithSearch = useCallback(
     (to: string) => {
       const searchStr = searchParams.toString();
@@ -302,6 +314,11 @@ const AnnotationRightCorner = ({ isLastSample, isFirstSample, noSave }: Annotati
   }, [saveCurrentSample, navigateWithSearch, taskId, revalidator.revalidate]);
 
   const handleNextSample = useCallback(() => {
+    // 到达分页边界，触发加载下一页
+    if (sampleIndex === samples.length - 2 && samples.length < totalSize) {
+      fetchNext?.();
+    }
+
     if (noSave) {
       navigateWithSearch(`/tasks/${taskId}/samples/${_.get(samples, `[${sampleIndex + 1}].id`)}`);
 
@@ -315,7 +332,18 @@ const AnnotationRightCorner = ({ isLastSample, isFirstSample, noSave }: Annotati
         navigateWithSearch(`/tasks/${taskId}/samples/${_.get(samples, `[${sampleIndex + 1}].id`)}`);
       });
     }
-  }, [noSave, isLastSample, navigateWithSearch, taskId, samples, sampleIndex, handleComplete, saveCurrentSample]);
+  }, [
+    sampleIndex,
+    samples,
+    totalSize,
+    noSave,
+    isLastSample,
+    fetchNext,
+    navigateWithSearch,
+    taskId,
+    handleComplete,
+    saveCurrentSample,
+  ]);
 
   const handlePrevSample = useCallback(async () => {
     if (sampleIndex === 0) {

diff --git a/apps/frontend/src/pages/tasks.[id].samples.[id]/index.tsx b/apps/frontend/src/pages/tasks.[id].samples.[id]/index.tsx
@@ -82,8 +82,6 @@ const AnnotationPage = () => {
   const isFetching = useIsFetching();
   const isMutating = useIsMutating();
 
-  const sampleId = routeParams.sampleId;
-
   // TODO： labelu/image中的错误定义
   const onError = useCallback((err: any) => {
     const value = err.value;
@@ -128,7 +126,7 @@ const AnnotationPage = () => {
 
     return data;
   }, [routeParams.taskId]);
-  const [samples = [] as SampleResponse[], loading, setSamples] = useScrollFetch(
+  const [samples = [] as SampleResponse[], loading, setSamples, svc] = useScrollFetch(
     fetchSamples,
     () =>
       document.querySelector('.labelu-image__sidebar div') ||
@@ -139,17 +137,10 @@ const AnnotationPage = () => {
     },
   );
 
-  const isLastSample = _.findIndex(samples, { id: +sampleId! }) === samples.length - 1;
-  const isFirstSample = _.findIndex(samples, { id: +sampleId! }) === 0;
-
   const leftSiderContent = useMemo(() => <SlideLoader />, []);
 
   const topActionContent = (
-    <AnnotationRightCorner
-      isLastSample={isLastSample}
-      isFirstSample={isFirstSample}
-      noSave={!!searchParams.get('noSave')}
-    />
+    <AnnotationRightCorner totalSize={totalCount} fetchNext={svc} noSave={!!searchParams.get('noSave')} />
   );
 
   const annotationContextValue = useMemo(() => {