diff --git a/src/app/grid/page.tsx b/src/app/grid/page.tsx index 0fca4001..f5d0679f 100644 --- a/src/app/grid/page.tsx +++ b/src/app/grid/page.tsx @@ -10,7 +10,7 @@ import { MAX_PHOTOS_TO_SHOW_OG } from '@/image-response'; import { Metadata } from 'next/types'; import PhotoGridSidebar from '@/photo/PhotoGridSidebar'; import { getPhotoSidebarDataCached } from '@/photo/data'; -import { MorePhotosGrid } from '@/photo/MorePhotosGrid'; +import InfinitePhotoScroll from '@/photo/InfinitePhotoScroll'; export const dynamic = 'force-static'; @@ -36,10 +36,10 @@ export default async function GridPage() { ? - } contentSide={
diff --git a/src/photo/InfinitePhotoScroll.tsx b/src/photo/InfinitePhotoScroll.tsx index c079ff98..c6ea6ec2 100644 --- a/src/photo/InfinitePhotoScroll.tsx +++ b/src/photo/InfinitePhotoScroll.tsx @@ -9,6 +9,9 @@ import Spinner from '@/components/Spinner'; import { getPhotosAction } from '@/photo/actions'; import { useAppState } from '@/state/AppState'; import { Photo } from '.'; +import PhotoGrid from './PhotoGrid'; + +const KEY = 'PHOTOS'; export type RevalidatePhoto = ( photoId: string, @@ -16,13 +19,13 @@ export type RevalidatePhoto = ( ) => Promise; export default function InfinitePhotoScroll({ - key = 'PHOTOS', + type = 'full-frame', initialOffset = 0, itemsPerPage = 12, prefetch = true, triggerOnView = true, }: { - key?: string + type?: 'full-frame' | 'grid' initialOffset?: number itemsPerPage?: number prefetch?: boolean @@ -44,7 +47,7 @@ export default function InfinitePhotoScroll({ useSwrInfinite( (size: number, prev: []) => prev && prev.length === 0 ? null - : [key, size], + : [KEY, size], fetcher, { revalidateOnFocus: isUserSignedIn, @@ -59,9 +62,9 @@ export default function InfinitePhotoScroll({ useEffect(() => { if (prefetch) { - preload([key, size ?? 0 + 1], fetcher); + preload([KEY, size ?? 0 + 1], fetcher); } - }, [prefetch, key, size, fetcher]); + }, [prefetch, size, fetcher]); const advance = useCallback(() => setSize(size => size + 1), [setSize]); @@ -94,25 +97,28 @@ export default function InfinitePhotoScroll({ }, } as any), [data, mutate]); + const renderMoreButton = () => + ; + return (
- - {!isFinished && - mutate() : advance} - disabled={isLoading} - className="w-full flex justify-center" - > - {error - ? 'Try Again' - : isLoading - ? - : 'Load More'} - - } />} + {type === 'full-frame' + ? + : } + {!isFinished && type === 'full-frame' + ? + : renderMoreButton()}
); }