infinite scroll works

Author: nemanjam

docs/working-notes/todo4.md

@@ -80,7 +80,20 @@ http://localhost:3000/_image?href=/@fs/home/username/Desktop/nemanjam.github.io/
 // in prod
 http://localhost:3000/_astro/focus1.CEdGhKb3_nVk9T.webp
 
-image 100% width and height, fills container that controls size
+image 100% width and height, fills container that controls size // must do it like this for server component
+// explain in chatgpt
+<img 
+  srcset="
+    image-480w.jpg 480w, 
+    image-768w.jpg 768w, 
+    image-1200w.jpg 1200w"
+  sizes="
+    (max-width: 480px) 100vw, 
+    (max-width: 768px) 50vw, 
+    33vw"
+  src="image-1200w.jpg"
+  alt="A responsive image example" />
+
 
 ```
 

src/components/Gallery.astro

@@ -1,5 +1,7 @@
 ---
 import ReactGallery from '@/components/react/Gallery';
+import NewReactGallery from '@/components/react/NewGallery';
+import { getImagesProps } from '@/libs/gallery/images';
 import { sliceToMod4 } from '@/utils/array';
 import { allImagesMetadata, imageMetadataToReactImageProps } from '@/utils/image';
 import { randomizeArray } from '@/utils/objects';
@@ -9,9 +11,10 @@ export interface Props extends astroHTML.JSX.HTMLAttributes {}
 
 const allImagesMetadataMod4 = sliceToMod4(allImagesMetadata);
 
-const reactImages = await Promise.all(
+const _reactImages = await Promise.all(
   allImagesMetadataMod4.map((metadata) => imageMetadataToReactImageProps(metadata))
 );
+const reactImages = await getImagesProps();
 
 const randomizedReactImages = randomizeArray(reactImages);
 
@@ -21,5 +24,6 @@ const { class: className } = Astro.props;
 ---
 
 <div class={cn('', className)}>
-  <ReactGallery client:only="react" images={randomizedReactImages} />
+  <!-- <ReactGallery client:only="react" images={randomizedReactImages} /> -->
+  <NewReactGallery client:only="react" images={randomizedReactImages} />
 </div>

src/components/react/NewGallery.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { ImageProps } from '@/libs/gallery/transform';
+import type { FC } from 'react';
+
+interface Props {
+  images: ImageProps[];
+}
+
+const PAGE_SIZE = 4 as const;
+const INITIAL_PAGE = 1 as const;
+
+const fetchImagesUpToPage = (images: ImageProps[], nextPage: number): ImageProps[] => {
+  const endIndex = nextPage * PAGE_SIZE;
+  return images.slice(0, endIndex);
+};
+
+const NewGallery: FC<Props> = ({ images }) => {
+  const [loadedImages, setLoadedImages] = useState<ImageProps[]>([]);
+  const [page, setPage] = useState<number>(INITIAL_PAGE);
+  const observerTarget = useRef(null);
+
+  // converts page to loaded images
+  useEffect(() => {
+    const upToPageImages = fetchImagesUpToPage(images, page);
+    setLoadedImages(upToPageImages);
+  }, [page, images]);
+
+  // sets only page
+  useEffect(() => {
+    const callback: IntersectionObserverCallback = (entries) => {
+      if (entries[0].isIntersecting) {
+        setPage((prevPage) => prevPage + 1);
+      }
+    };
+    const options: IntersectionObserverInit = { threshold: 1 };
+    const observer = new IntersectionObserver(callback, options);
+
+    const observerRef = observerTarget.current;
+
+    if (observerRef) observer.observe(observerRef);
+
+    return () => {
+      if (observerRef) observer.unobserve(observerRef);
+    };
+    // page dependency is important for initial load to work for all resolutions
+  }, [observerTarget, page]);
+
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {loadedImages.map((image) => (
+          <img key={image.xs.src} src={image.xs.src} alt="thumbnail image" className="" />
+        ))}
+      </div>
+      {/* control threshold with margin-top */}
+      <div ref={observerTarget} className="h-8 border border-red-500 mt-0"></div>
+    </>
+  );
+};
+
+export default NewGallery;

src/libs/gallery/images.ts

@@ -1,7 +1,7 @@
 import { EXCLUDE_IMAGES } from '@/constants/gallery';
 import { imageMetadataToImageProps } from '@/libs/gallery/transform';
 
-import type { GalleryImageProps, HeroImageProps, ImageProps } from '@/libs/gallery/transform';
+import type { ImageProps } from '@/libs/gallery/transform';
 import type { ImageMetadata } from 'astro';
 
 // no need for API route, image server already exists, it will only rewrite url