From 85688d202ad74ff80c5c16b7ea0a34475dfa2ba0 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 14 Jan 2024 16:21:39 -0600
Subject: [PATCH] Hoist pagination to parent component

---
 src/app/page.tsx                  | 11 ++++++-----
 src/components/MoreComponents.tsx | 25 +++++++++++++++++--------
 src/photo/index.ts                |  2 +-
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f379410d..dfd3fd79 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -34,13 +34,14 @@ export default async function HomePage() {
           <MoreComponents
             label="More photos"
             itemsPerRequest={LARGE_PHOTOS_TO_SHOW}
-            itemsTotalCount={count}
             componentLoader={async (limit: number) => {
               'use server';
-              return <PhotosLarge
-                photos={(await getPhotosCached({ limit }))
-                  .slice(LARGE_PHOTOS_TO_SHOW)}
-              />;
+              return {
+                component: <PhotosLarge
+                  photos={(await getPhotosCached({ limit }))
+                    .slice(LARGE_PHOTOS_TO_SHOW)} />,
+                isFinished: limit > count,
+              };
             }}
           />
         </Suspense>
diff --git a/src/components/MoreComponents.tsx b/src/components/MoreComponents.tsx
index 27b9a51e..54b20187 100644
--- a/src/components/MoreComponents.tsx
+++ b/src/components/MoreComponents.tsx
@@ -6,14 +6,16 @@ import SiteGrid from './SiteGrid';
 
 export default function MoreComponents({
   itemsPerRequest,
-  itemsTotalCount,
   componentLoader,
   label = 'Load more',
   triggerOnView = true,
+  prefetch = true,
 }: {
   itemsPerRequest: number
-  itemsTotalCount: number
-  componentLoader: (limit: number) => Promise<JSX.Element>
+  componentLoader: (start: number, offset: number) => Promise<{
+    component: JSX.Element,
+    isFinished: boolean,
+  }>
   label?: string
   triggerOnView?: boolean
   prefetch?: boolean
@@ -21,22 +23,31 @@ export default function MoreComponents({
   const [offset, setOffset] = useState(2);
   const [components, setComponents] = useState<JSX.Element[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [isFinished, setIsFinished] = useState(false);
 
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   const advance = useCallback(() => {
     setIsLoading(true);
     const getMoreComponentsAsync = async () => {
-      return componentLoader(itemsPerRequest * offset);
+      return componentLoader(0, itemsPerRequest * offset);
     };
     getMoreComponentsAsync()
-      .then(component => {
+      .then(({ component, isFinished }) => {
         setComponents([component]);
+        setIsFinished(isFinished);
         setOffset(o => o + 1);
       })
       .finally(() => setIsLoading(false));
   }, [componentLoader, itemsPerRequest, offset]);
 
+  // useEffect(() => {
+  //   if (prefetch && components.length < offset) {
+  //     console.log('prefetching');
+  //     advance();
+  //   }
+  // }, [prefetch, advance, components.length, offset]);
+
   useEffect(() => {
     // Only add observer if button is rendered
     if (buttonRef.current) {
@@ -59,11 +70,9 @@ export default function MoreComponents({
     }
   }, [triggerOnView, advance, isLoading]);
 
-  const showMoreButton = itemsTotalCount > itemsPerRequest * (offset - 1);
-
   return <>
     {components}
-    {showMoreButton &&
+    {!isFinished &&
       <SiteGrid
         contentMain={
           <button
diff --git a/src/photo/index.ts b/src/photo/index.ts
index a9d1c15e..07bce5a3 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -11,7 +11,7 @@ import {
 import camelcaseKeys from 'camelcase-keys';
 import type { Metadata } from 'next';
 
-export const LARGE_PHOTOS_TO_SHOW = 12;
+export const LARGE_PHOTOS_TO_SHOW = 3;
 export const GRID_THUMBNAILS_TO_SHOW_MAX = 12;
 
 export const ACCEPTED_PHOTO_FILE_TYPES = [