Move /grid to swr

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() {
       ? <SiteGrid
         contentMain={<div className="space-y-0.5 sm:space-y-1">
           <PhotoGrid {...{ photos, photoPriority: true }} />
-          <MorePhotosGrid
+          <InfinitePhotoScroll
+            type='grid'
             initialOffset={INFINITE_SCROLL_MULTIPLE_GRID}
-            itemsPerRequest={INFINITE_SCROLL_MULTIPLE_GRID}
+            itemsPerPage={INFINITE_SCROLL_MULTIPLE_GRID}
-            totalPhotosCount={photosCount}
           />
         </div>}
         contentSide={<div className="sticky top-4 space-y-4 mt-[-4px]">

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<any>;
 
 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<Photo[]>(
       (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 = () =>
+    <button
+      ref={buttonRef}
+      onClick={error ? () => mutate() : advance}
+      disabled={isLoading}
+      className="w-full flex justify-center"
+    >
+      {error
+        ? 'Try Again'
+        : isLoading
+          ? <Spinner size={20} />
+          : 'Load More'}
+    </button>;
+
   return (
     <div className="space-y-4">
-      <PhotosLarge {...{ photos, revalidatePhoto }} />
+      {type === 'full-frame'
-      {!isFinished &&
+        ? <PhotosLarge {...{ photos, revalidatePhoto }} />
-        <SiteGrid
+        : <PhotoGrid {...{ photos }} />}
-          contentMain={
+      {!isFinished && type === 'full-frame'
-            <button
+        ? <SiteGrid contentMain={renderMoreButton()} />
-              ref={buttonRef}
+        : renderMoreButton()}
-              onClick={error ? () => mutate() : advance}
-              disabled={isLoading}
-              className="w-full flex justify-center"
-            >
-              {error
-                ? 'Try Again'
-                : isLoading
-                  ? <Spinner size={20} />
-                  : 'Load More'}
-            </button>
-          } />}
     </div>
   );
 }