From 6766bf6a7f269135c357e8100fe7bc2e131eb5cc Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 10 Sep 2023 12:02:49 -0500
Subject: [PATCH] Limit grid thumbnails after photo detail

---
 src/app/(isr)/photos/[photoId]/layout.tsx | 17 ++++++++++++----
 src/photo/index.ts                        |  4 +++-
 src/services/postgres.ts                  | 24 +++++++++++++++++++++++
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/app/(isr)/photos/[photoId]/layout.tsx b/src/app/(isr)/photos/[photoId]/layout.tsx
index d835a2e6..2593f32e 100644
--- a/src/app/(isr)/photos/[photoId]/layout.tsx
+++ b/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
         />}
diff --git a/src/photo/index.ts b/src/photo/index.ts
index b595911e..beb384c2 100644
--- a/src/photo/index.ts
+++ b/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);
diff --git a/src/services/postgres.ts b/src/services/postgres.ts
index 7998d5c5..f6340c00 100644
--- a/src/services/postgres.ts
+++ b/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));