feature: infinite scroll (#119)

Add infinite scroll support to app list and dataset list.

web/app/(commonLayout)/apps/Apps.tsx

@@ -1,23 +1,50 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
+import useSWRInfinite from 'swr/infinite'
+import { debounce } from 'lodash-es'
 import AppCard from './AppCard'
 import NewAppCard from './NewAppCard'
-import { useAppContext } from '@/context/app-context'
+import { AppListResponse } from '@/models/app'
+import { fetchAppList } from '@/service/apps'
+import { useSelector } from '@/context/app-context'
+
+const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
+  if (!pageIndex || previousPageData.has_more)
+    return { url: 'apps', params: { page: pageIndex + 1, limit: 30 } }
+  return null
+}
 
 const Apps = () => {
-  const { apps, mutateApps } = useAppContext()
+  const { data, isLoading, setSize, mutate } = useSWRInfinite(getKey, fetchAppList, { revalidateFirstPage: false })
+  const loadingStateRef = useRef(false)
+  const pageContainerRef = useSelector(state => state.pageContainerRef)
+  const anchorRef = useRef<HTMLAnchorElement>(null)
 
   useEffect(() => {
-    mutateApps()
+    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'>
-      {apps.map(app => (<AppCard key={app.id} app={app} />))}
-      <NewAppCard />
+      {data?.map(({ data: apps }) => apps.map(app => (<AppCard key={app.id} app={app} />)))}
+      <NewAppCard ref={anchorRef} onSuccess={mutate} />
     </nav>
-
   )
 }