Limit grid thumbnails after photo detail

src/app/(isr)/photos/[photoId]/layout.tsx

@@ -3,6 +3,7 @@ import AnimateItems from '@/components/AnimateItems';
 import PhotoLinks from '@/photo/PhotoLinks';
 import SiteGrid from '@/components/SiteGrid';
 import {
+  PHOTOS_PER_REQUEST,
   ogImageDescriptionForPhoto,
   ogImageUrlForPhoto,
   titleForPhoto,
@@ -12,7 +13,11 @@ import PhotoLarge from '@/photo/PhotoLarge';
 import { cc } from '@/utility/css';
 import { Metadata } from 'next';
 import { BASE_URL } from '@/site/config';
-import { getPhoto, getPhotos } from '@/services/postgres';
+import {
+  getPhoto,
+  getPhotosTakenAfterPhotoInclusive,
+  getPhotosTakenBeforePhoto,
+} from '@/services/postgres';
 import { redirect } from 'next/navigation';
 
 export const runtime = 'edge';
@@ -58,7 +63,12 @@ export default async function PhotoPage({
 
   if (!photo) { redirect('/'); }
 
-  const photos = await getPhotos();
+  const photosBefore = await getPhotosTakenBeforePhoto(photo, 1);
+  const photosAfter = await getPhotosTakenAfterPhotoInclusive(
+    photo,
+    PHOTOS_PER_REQUEST + 1,
+  );
+  const photos = photosBefore.concat(photosAfter);
 
   return <>
     {children}
@@ -75,8 +85,7 @@ export default async function PhotoPage({
       <SiteGrid
         sideFirstOnMobile
         contentMain={<PhotoGrid
-          photos={photos}
-          selectedPhoto={photo}
+          photos={photosAfter.slice(1)}
           animateOnFirstLoadOnly
           staggerOnFirstLoadOnly
         />}

src/photo/index.ts

@@ -11,6 +11,8 @@ import camelcaseKeys from 'camelcase-keys';
 import { Metadata } from 'next';
 import short from 'short-uuid';
 
+export const PHOTOS_PER_REQUEST = 12;
+
 const translator = short();
 
 // Core EXIF data
@@ -122,7 +124,7 @@ export const getNextPhoto = (photo: Photo, photos: Photo[]) => {
 
 export const getPhotosLimitForQuery = (
   query?: string,
-  photosPerRequest = 12,
+  photosPerRequest = PHOTOS_PER_REQUEST,
 ) => {
   const offsetInt = parseInt(query ?? '0');
   const offset = (Number.isNaN(offsetInt) ? 0 : offsetInt);

src/services/postgres.ts

@@ -186,6 +186,30 @@ export const getPhotos = async (
   return photos;
 };
 
+export const getPhotosTakenAfterPhotoInclusive = (
+  photo: Photo,
+  limit?: number,
+) =>
+  sql<PhotoDb>`
+    SELECT * FROM photos
+    WHERE taken_at <= ${photo.takenAt.toISOString()}
+    ORDER BY taken_at DESC
+    LIMIT ${limit}
+  `
+    .then(({ rows }) => rows.map(parsePhotoFromDb));
+    
+export const getPhotosTakenBeforePhoto = (
+  photo: Photo,
+  limit?: number,
+) =>
+  sql<PhotoDb>`
+    SELECT * FROM photos
+    WHERE taken_at > ${photo.takenAt.toISOString()}
+    ORDER BY taken_at ASC
+    LIMIT ${limit}
+  `
+    .then(({ rows }) => rows.map(parsePhotoFromDb));
+
 export const getPhotosCount = async () => sql`
   SELECT COUNT(*) FROM photos
 `.then(({ rows }) => parseInt(rows[0].count, 10));