From 19965a1aea36fd53f4b801d69b42ff4c96468788 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 18 Jan 2024 14:50:59 -0600
Subject: [PATCH] Remove search params from /grid

---
 src/app/grid/page.tsx                         | 33 ++++---
 src/app/page.tsx                              | 15 +--
 src/photo/MorePhotosGrid.tsx                  | 42 +++++++++
 ...MorePhotosLarge.tsx => MorePhotosRoot.tsx} |  4 +-
 src/photo/PhotoGrid.tsx                       | 93 +++++++++----------
 src/photo/index.ts                            |  5 +-
 src/state/MoreComponentsState.ts              |  6 +-
 7 files changed, 121 insertions(+), 77 deletions(-)
 create mode 100644 src/photo/MorePhotosGrid.tsx
 rename src/photo/{MorePhotosLarge.tsx => MorePhotosRoot.tsx} (94%)

diff --git a/src/app/grid/page.tsx b/src/app/grid/page.tsx
index f58784a1..9b2b4a6c 100644
--- a/src/app/grid/page.tsx
+++ b/src/app/grid/page.tsx
@@ -1,26 +1,24 @@
 import { getPhotosCached } from '@/cache';
 import SiteGrid from '@/components/SiteGrid';
-import { generateOgImageMetaForPhotos } from '@/photo';
+import {
+  PHOTO_LOAD_MULTIPLE_GRID,
+  generateOgImageMetaForPhotos,
+} from '@/photo';
 import PhotoGrid from '@/photo/PhotoGrid';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
 import { MAX_PHOTOS_TO_SHOW_OG } from '@/photo/image-response';
-import { pathForGrid } from '@/site/paths';
 import { Metadata } from 'next/types';
-import {
-  PaginationParams,
-  getPaginationForSearchParams,
-} from '@/site/pagination';
 import PhotoGridSidebar from '@/photo/PhotoGridSidebar';
 import { getPhotoSidebarDataCached } from '@/photo/data';
+import { MorePhotosGrid } from '@/photo/MorePhotosGrid';
+import { Suspense } from 'react';
 
 export async function generateMetadata(): Promise<Metadata> {
   const photos = await getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_OG });
   return generateOgImageMetaForPhotos(photos);
 }
 
-export default async function GridPage({ searchParams }: PaginationParams) {
-  const { offset, limit } = getPaginationForSearchParams(searchParams);
-
+export default async function GridPage() {
   const [
     photos,
     photosCount,
@@ -28,18 +26,23 @@ export default async function GridPage({ searchParams }: PaginationParams) {
     cameras,
     simulations,
   ] = await Promise.all([
-    getPhotosCached({ limit }),
+    getPhotosCached({ limit: PHOTO_LOAD_MULTIPLE_GRID }),
     ...getPhotoSidebarDataCached(),
   ]);
 
-  const showMorePath = photosCount > photos.length
-    ? pathForGrid(offset + 1)
-    : undefined;
-  
   return (
     photos.length > 0
       ? <SiteGrid
-        contentMain={<PhotoGrid {...{ photos, showMorePath }} />}
+        contentMain={<div className="space-y-0.5 sm:space-y-1">
+          <PhotoGrid {...{ photos }} />
+          <Suspense>
+            <MorePhotosGrid
+              initialOffset={PHOTO_LOAD_MULTIPLE_GRID}
+              itemsPerRequest={PHOTO_LOAD_MULTIPLE_GRID}
+              totalPhotosCount={photosCount}
+            />
+          </Suspense>
+        </div>}
         contentSide={<div className="sticky top-4 space-y-4">
           <PhotoGridSidebar {...{
             tags,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a110e4a9..867edecd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,14 @@
 import { getPhotosCached, getPhotosCountCached } from '@/cache';
-import { LARGE_PHOTOS_TO_SHOW, generateOgImageMetaForPhotos } from '@/photo';
+import {
+  PHOTO_LOAD_MULTIPLE_ROOT,
+  generateOgImageMetaForPhotos,
+} from '@/photo';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
 import { Metadata } from 'next/types';
 import { MAX_PHOTOS_TO_SHOW_OG } from '@/photo/image-response';
 import PhotosLarge from '@/photo/PhotosLarge';
 import { Suspense } from 'react';
-import { MorePhotosLarge } from '@/photo/MorePhotosLarge';
+import { MorePhotosRoot } from '@/photo/MorePhotosRoot';
 
 export const revalidate = 3600;
 
@@ -22,7 +25,7 @@ export default async function HomePage() {
     count,
   ] = await Promise.all([
     // Make homepage queries resilient to error on first time setup
-    getPhotosCached({ limit: LARGE_PHOTOS_TO_SHOW }).catch(() => []),
+    getPhotosCached({ limit: PHOTO_LOAD_MULTIPLE_ROOT }).catch(() => []),
     getPhotosCountCached().catch(() => 0),
   ]);
 
@@ -31,9 +34,9 @@ export default async function HomePage() {
       ? <div className="space-y-1">
         <PhotosLarge photos={photos} />
         <Suspense>
-          <MorePhotosLarge
-            initialOffset={LARGE_PHOTOS_TO_SHOW}
-            itemsPerRequest={LARGE_PHOTOS_TO_SHOW}
+          <MorePhotosRoot
+            initialOffset={PHOTO_LOAD_MULTIPLE_ROOT}
+            itemsPerRequest={PHOTO_LOAD_MULTIPLE_ROOT}
             totalPhotosCount={count}
           />
         </Suspense>
diff --git a/src/photo/MorePhotosGrid.tsx b/src/photo/MorePhotosGrid.tsx
new file mode 100644
index 00000000..dd59ba57
--- /dev/null
+++ b/src/photo/MorePhotosGrid.tsx
@@ -0,0 +1,42 @@
+import MoreComponents from '@/components/MoreComponents';
+import { getPhotosCached } from '@/cache';
+import PhotoGrid from './PhotoGrid';
+
+export function MorePhotosGrid({
+  initialOffset,
+  itemsPerRequest,
+  totalPhotosCount,
+}: {
+  initialOffset: number
+  itemsPerRequest: number
+  totalPhotosCount: number
+}) {
+  return (
+    <MoreComponents
+      stateKey="PhotosGrid"
+      label="More photos"
+      initialOffset={initialOffset}
+      itemsPerRequest={itemsPerRequest}
+      getNextComponent={async (offset, limit) => {
+        'use server';
+        if (
+          process.env.NODE_ENV === 'development' &&
+          Math.random() < 0.95
+        ) {
+          return { didFail: true };
+        }
+        const photos = await getPhotosCached({ limit: offset + limit })
+          .catch(() => undefined);
+        if (!photos) {
+          return { didFail: true };
+        } else {
+          const nextPhotos = photos.slice(offset);
+          return {
+            nextComponent: <PhotoGrid photos={nextPhotos} />,
+            isFinished: offset + limit >= totalPhotosCount,
+          };
+        }
+      }}
+    />
+  );
+}
diff --git a/src/photo/MorePhotosLarge.tsx b/src/photo/MorePhotosRoot.tsx
similarity index 94%
rename from src/photo/MorePhotosLarge.tsx
rename to src/photo/MorePhotosRoot.tsx
index 491975e5..6f8a7c53 100644
--- a/src/photo/MorePhotosLarge.tsx
+++ b/src/photo/MorePhotosRoot.tsx
@@ -2,7 +2,7 @@ import MoreComponents from '@/components/MoreComponents';
 import PhotosLarge from './PhotosLarge';
 import { getPhotosCached } from '@/cache';
 
-export function MorePhotosLarge({
+export function MorePhotosRoot({
   initialOffset,
   itemsPerRequest,
   totalPhotosCount,
@@ -13,7 +13,7 @@ export function MorePhotosLarge({
 }) {
   return (
     <MoreComponents
-      stateKey="PhotosLarge"
+      stateKey="PhotosRoot"
       label="More photos"
       initialOffset={initialOffset}
       itemsPerRequest={itemsPerRequest}
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index 49c560db..f24f0e97 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -3,7 +3,6 @@ import PhotoSmall from './PhotoSmall';
 import { clsx } from 'clsx/lite';
 import AnimateItems from '@/components/AnimateItems';
 import { Camera } from '@/camera';
-import MoreComponentsClient from '@/components/MoreComponentsClient';
 import { FilmSimulation } from '@/simulation';
 import { GRID_ASPECT_RATIO, HIGH_DENSITY_GRID } from '@/site/config';
 
@@ -17,7 +16,6 @@ export default function PhotoGrid({
   animate = true,
   animateOnFirstLoadOnly,
   staggerOnFirstLoadOnly = true,
-  showMorePath,
   additionalTile,
   small,
 }: {
@@ -35,54 +33,47 @@ export default function PhotoGrid({
   small?: boolean
 }) {
   return (
-    <div className="space-y-4">
-      <AnimateItems
-        className={clsx(
-          'grid gap-0.5 sm:gap-1',
-          small
-            ? 'grid-cols-3 xs:grid-cols-6'
-            : HIGH_DENSITY_GRID
-              ? 'grid-cols-2 xs:grid-cols-4 lg:grid-cols-5'
-              : 'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
-          'items-center',
-        )}
-        type={animate === false ? 'none' : undefined}
-        duration={fast ? 0.3 : undefined}
-        staggerDelay={0.075}
-        distanceOffset={40}
-        animateOnFirstLoadOnly={animateOnFirstLoadOnly}
-        staggerOnFirstLoadOnly={staggerOnFirstLoadOnly}
-        items={photos.map(photo =>
-          <div
-            key={photo.id}
-            className={GRID_ASPECT_RATIO !== 0
-              ? clsx(
-                'aspect-square',
-                'overflow-hidden',
-                '[&>*]:flex [&>*]:w-full [&>*]:h-full',
-                '[&>*>*]:object-cover [&>*>*]:min-h-full',
-              )
-              : undefined}
-            style={{
-              ...GRID_ASPECT_RATIO !== 0 && {
-                aspectRatio: GRID_ASPECT_RATIO,
-              },
-            }}
-          >
-            <PhotoSmall {...{
-              photo,
-              tag,
-              camera,
-              simulation,
-              selected: photo.id === selectedPhoto?.id,
-            }} />
-          </div>).concat(additionalTile ?? [])}
-      />
-      {showMorePath &&
-        <MoreComponentsClient
-          label="More photos"
-          path={showMorePath}
-        />}
-    </div>
+    <AnimateItems
+      className={clsx(
+        'grid gap-0.5 sm:gap-1',
+        small
+          ? 'grid-cols-3 xs:grid-cols-6'
+          : HIGH_DENSITY_GRID
+            ? 'grid-cols-2 xs:grid-cols-4 lg:grid-cols-5'
+            : 'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
+        'items-center',
+      )}
+      type={animate === false ? 'none' : undefined}
+      duration={fast ? 0.3 : undefined}
+      staggerDelay={0.075}
+      distanceOffset={40}
+      animateOnFirstLoadOnly={animateOnFirstLoadOnly}
+      staggerOnFirstLoadOnly={staggerOnFirstLoadOnly}
+      items={photos.map(photo =>
+        <div
+          key={photo.id}
+          className={GRID_ASPECT_RATIO !== 0
+            ? clsx(
+              'aspect-square',
+              'overflow-hidden',
+              '[&>*]:flex [&>*]:w-full [&>*]:h-full',
+              '[&>*>*]:object-cover [&>*>*]:min-h-full',
+            )
+            : undefined}
+          style={{
+            ...GRID_ASPECT_RATIO !== 0 && {
+              aspectRatio: GRID_ASPECT_RATIO,
+            },
+          }}
+        >
+          <PhotoSmall {...{
+            photo,
+            tag,
+            camera,
+            simulation,
+            selected: photo.id === selectedPhoto?.id,
+          }} />
+        </div>).concat(additionalTile ?? [])}
+    />
   );
 };
diff --git a/src/photo/index.ts b/src/photo/index.ts
index a49e3751..d7ef8979 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -11,8 +11,11 @@ import {
 import camelcaseKeys from 'camelcase-keys';
 import type { Metadata } from 'next';
 
-export const LARGE_PHOTOS_TO_SHOW =
+export const PHOTO_LOAD_MULTIPLE_ROOT =
   process.env.NODE_ENV === 'development' ? 2 : 12;
+export const PHOTO_LOAD_MULTIPLE_GRID =
+  process.env.NODE_ENV === 'development' ? 4 : 24;
+
 export const GRID_THUMBNAILS_TO_SHOW_MAX = 12;
 
 export const ACCEPTED_PHOTO_FILE_TYPES = [
diff --git a/src/state/MoreComponentsState.ts b/src/state/MoreComponentsState.ts
index 78b07d4f..d4cccb04 100644
--- a/src/state/MoreComponentsState.ts
+++ b/src/state/MoreComponentsState.ts
@@ -1,7 +1,8 @@
 import { createContext, useContext } from 'react';
 
 export type MoreComponentsKey = 
-  'PhotosLarge';
+  'PhotosRoot' |
+  'PhotosGrid';
 
 export interface MoreComponentsStateForKey {
   indexToView: number
@@ -39,7 +40,8 @@ export interface MoreComponentsContext {
 }
 
 export const MORE_COMPONENTS_INITIAL_STATE: MoreComponentsState = {
-  PhotosLarge: createInitialStateForKey(),
+  PhotosRoot: createInitialStateForKey(),
+  PhotosGrid: createInitialStateForKey(),
 };
 
 export const  MoreComponentsContext =