From 1f08f9764c30b1952e32564edfc0b32d561f1c3d Mon Sep 17 00:00:00 2001
From: nite-knite <nkCoding@gmail.com>
Date: Sat, 20 May 2023 21:52:58 +0800
Subject: [PATCH] feat: dataset list infinite scroll

---
 web/app/(commonLayout)/apps/Apps.tsx          |  4 +-
 web/app/(commonLayout)/datasets/Datasets.tsx  | 41 +++++++++++++++----
 .../datasets/NewDatasetCard.tsx               |  8 ++--
 web/models/datasets.ts                        |  4 ++
 4 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx
index c60a7c527b..aa3ac28458 100644
--- a/web/app/(commonLayout)/apps/Apps.tsx
+++ b/web/app/(commonLayout)/apps/Apps.tsx
@@ -2,16 +2,16 @@
 
 import { useEffect, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
+import { debounce } from 'lodash-es'
 import AppCard from './AppCard'
 import NewAppCard from './NewAppCard'
 import { AppListResponse } from '@/models/app'
 import { fetchAppList } from '@/service/apps'
 import { useSelector } from '@/context/app-context'
-import { debounce } from 'lodash-es'
 
 const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
   if (!pageIndex || previousPageData.has_more)
-    return { url: `apps`, params: { page: pageIndex + 1, limit: 30 } }
+    return { url: 'apps', params: { page: pageIndex + 1, limit: 30 } }
   return null
 }
 
diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/Datasets.tsx
index b044547748..31e38d7fc0 100644
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/Datasets.tsx
@@ -1,24 +1,49 @@
 'use client'
 
-import { useEffect } from 'react'
-import useSWR from 'swr'
-import { DataSet } from '@/models/datasets';
+import { useEffect, useRef } from 'react'
+import useSWRInfinite from 'swr/infinite'
+import { debounce } from 'lodash-es';
+import { DataSetListResponse } from '@/models/datasets';
 import NewDatasetCard from './NewDatasetCard'
 import DatasetCard from './DatasetCard';
 import { fetchDatasets } from '@/service/datasets';
+import { useSelector } from '@/context/app-context';
+
+const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
+  if (!pageIndex || previousPageData.has_more)
+    return { url: 'datasets', params: { page: pageIndex + 1, limit: 30 } }
+  return null
+}
 
 const Datasets = () => {
-  // const { datasets, mutateDatasets } = useAppContext()
-  const { data: datasetList, mutate: mutateDatasets } = useSWR({ url: '/datasets', params: { page: 1 } }, fetchDatasets)
+  const { data, isLoading, setSize, mutate } = useSWRInfinite(getKey, fetchDatasets, { revalidateFirstPage: false })
+  const loadingStateRef = useRef(false)
+  const pageContainerRef = useSelector(state => state.pageContainerRef)
+  const anchorRef = useRef<HTMLAnchorElement>(null)
 
   useEffect(() => {
-    mutateDatasets()
+    loadingStateRef.current = isLoading
+  }, [isLoading])
+
+  useEffect(() => {
+    const onScroll = debounce(() => {
+      if (!loadingStateRef.current) {
+        const { scrollTop, clientHeight } = pageContainerRef.current!
+        const anchorOffset = anchorRef.current!.offsetTop
+        if (anchorOffset - scrollTop - clientHeight < 100) {
+          setSize(size => size + 1)
+        }
+      }
+    }, 50)
+
+    pageContainerRef.current?.addEventListener('scroll', onScroll)
+    return () => pageContainerRef.current?.removeEventListener('scroll', onScroll)
   }, [])
 
   return (
     <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
-      {datasetList?.data.map(dataset => (<DatasetCard key={dataset.id} dataset={dataset} />))}
-      <NewDatasetCard />
+      {data?.map(({ data: datasets }) => datasets.map(dataset => (<DatasetCard key={dataset.id} dataset={dataset} />)))}
+      <NewDatasetCard ref={anchorRef} />
     </nav>
   )
 }
diff --git a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx b/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
index a3f6282c97..72f6b18dcc 100644
--- a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
+++ b/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
@@ -1,16 +1,16 @@
 'use client'
 
-import { useState } from 'react'
+import { forwardRef, useState } from 'react'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import style from '../list.module.css'
 
-const CreateAppCard = () => {
+const CreateAppCard = forwardRef<HTMLAnchorElement>((_, ref) => {
   const { t } = useTranslation()
   const [showNewAppDialog, setShowNewAppDialog] = useState(false)
 
   return (
-    <a className={classNames(style.listItem, style.newItemCard)} href='/datasets/create'>
+    <a ref={ref} className={classNames(style.listItem, style.newItemCard)} href='/datasets/create'>
       <div className={style.listItemTitle}>
         <span className={style.newItemIcon}>
           <span className={classNames(style.newItemIconImage, style.newItemIconAdd)} />
@@ -23,6 +23,6 @@ const CreateAppCard = () => {
       {/* <div className='text-xs text-gray-500'>{t('app.createFromConfigFile')}</div> */}
     </a>
   )
-}
+})
 
 export default CreateAppCard
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index 8f1206024f..70a4c13ebe 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -29,6 +29,10 @@ export type File = {
 
 export type DataSetListResponse = {
   data: DataSet[]
+  has_more: boolean
+  limit: number
+  page: number
+  total: number
 }
 
 export type IndexingEstimateResponse = {