52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
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'
|
|
|
|
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 { 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(() => {
|
|
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'>
|
|
{data?.map(({ data: apps }) => apps.map(app => (<AppCard key={app.id} app={app} />)))}
|
|
<NewAppCard ref={anchorRef} onSuccess={mutate} />
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Apps
|