pass articleClass to Page layout for flex grow, gallery responsive pagination

Author: nemanjam

src/components/react/Gallery.tsx

@@ -12,25 +12,43 @@ import type { FC } from 'react';
 
 import 'photoswipe/style.css';
 
+import { sliceToModN } from '@/utils/array';
+import { getInitialPage, getPageSize } from '@/utils/gallery';
 import useScrollDown from './hooks/useScrollDown';
+import { useActiveBreakpoint } from './hooks/useWidth';
 
 interface Props {
   images: GalleryImage[];
 }
 
 type LoadedStates = Record<string, boolean>;
 
-// INITIAL_PAGE controls first screen
-const { PAGE_SIZE, INITIAL_PAGE, OBSERVER_DEBOUNCE, GALLERY_ID } = GALLERY;
+const { OBSERVER_DEBOUNCE, GALLERY_ID } = GALLERY;
 
-const fetchImagesUpToPage = (images: GalleryImage[], nextPage: number): GalleryImage[] => {
-  const endIndex = nextPage * PAGE_SIZE;
-  return images.slice(0, endIndex);
+const fetchImagesUpToPage = (
+  images: GalleryImage[],
+  pageSize: number,
+  nextPage: number
+): GalleryImage[] => {
+  const endIndex = nextPage * pageSize;
+  const isLastPage = endIndex >= images.length;
+
+  // for fetchPageImages pagination startIndex must use loadedImages and not all images and page
+  const selectedImages = images.slice(0, endIndex);
+
+  // load all images for last page
+  return !isLastPage ? sliceToModN(selectedImages, pageSize) : selectedImages;
 };
 
 const Gallery: FC<Props> = ({ images }) => {
+  const breakpoint = useActiveBreakpoint();
+
+  const pageSize = getPageSize(breakpoint);
+  // INITIAL_PAGE controls first screen
+  const initialPage = getInitialPage(breakpoint);
+
   const [loadedImages, setLoadedImages] = useState<GalleryImage[]>([]);
-  const [page, setPage] = useState<number>(INITIAL_PAGE);
+  const [page, setPage] = useState<number>(initialPage);
   const observerTarget = useRef(null);
 
   const isScrollingDown = useScrollDown();
@@ -50,9 +68,9 @@ const Gallery: FC<Props> = ({ images }) => {
 
   // converts page to loaded images
   useEffect(() => {
-    const upToPageImages = fetchImagesUpToPage(images, page);
+    const upToPageImages = fetchImagesUpToPage(images, pageSize, page);
     setLoadedImages(upToPageImages);
-  }, [page, images]);
+  }, [page, images, pageSize]);
 
   // sets only page
   useEffect(() => {

src/components/react/hooks/useWidth.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+import { TW_WIDTHS } from '@/constants/image';
+
+import type { Breakpoint } from '@/types/constants';
+
+export const useWidth = (): number => {
+  const [width, setWidth] = useState<number>(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => setWidth(window.innerWidth);
+
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return width;
+};
+
+export const getActiveBreakpoint = (width: number): Breakpoint =>
+  (Object.entries(TW_WIDTHS)
+    .reverse()
+    .find(([_, value]) => width >= value)?.[0] as Breakpoint) ?? ('XXS' as const);
+
+export const useActiveBreakpoint = (): Breakpoint => {
+  const width = useWidth();
+  return getActiveBreakpoint(width);
+};

src/constants/gallery.ts

@@ -4,9 +4,17 @@ export const GALLERY = {
   GALLERY_ID: 'my-gallery',
   // Todo: make it responsive
   /** step. */
-  PAGE_SIZE: 3,
+  PAGE_SIZE: {
+    XS: 1,
+    SM: 2,
+    LG: 3,
+  },
   /** page dependency in useEffect is more important. To load first screen quickly, set to 3 pages */
-  INITIAL_PAGE: 3,
+  INITIAL_PAGE: {
+    XS: 3,
+    SM: 3,
+    LG: 3,
+  },
   /** fine tuned for scroll */
   OBSERVER_DEBOUNCE: 300,
 } as const;

src/constants/image.ts

@@ -2,7 +2,7 @@ import type { ImageSizes } from '@/types/constants';
 
 /** matches tailwindcss/defaultTheme.screens */
 
-export const TW_SCREENS = {
+export const TW_WIDTHS = {
   /** added, for Image, bellow xs */
   XXS: 320,
   XS: 475,
@@ -11,6 +11,10 @@ export const TW_SCREENS = {
   LG: 1024,
   XL: 1280,
   _2XL: 1536,
+} as const;
+
+export const TW_SCREENS = {
+  ...TW_WIDTHS,
   HEIGHTS: {
     XXS: 180,
     XS: 268,

src/layouts/Page.astro

@@ -10,7 +10,9 @@ export interface Content {
   file: string;
   url: string;
   /** set max-w-xxx */
-  class: string;
+  class?: string;
+  /** for flex flex-grow min-height to prevent layout shift for client components */
+  articleClass?: string;
 }
 
 export interface Props {
@@ -19,7 +21,7 @@ export interface Props {
 
 // metadata from frontmatter
 const { content } = Astro.props;
-const { title, description, class: className } = content;
+const { title, description, class: className, articleClass } = content;
 
 // available in Layouts
 const { pathname } = Astro.url;
@@ -33,7 +35,7 @@ const metadata = { title, description, image };
 
 <Centered {metadata} class={cn(className)}>
   {/* must not have flex, it will disable margin collapsing */}
-  <article class="my-prose">
+  <article class={cn('my-prose', articleClass)}>
     <slot />
   </article>
 </Centered>

src/pages/gallery.mdx

@@ -2,11 +2,13 @@
 layout: '../layouts/Page.astro'
 title: 'Gallery'
 description: 'Image gallery'
+# classNames for Page layout
 class: 'max-w-5xl'
+articleClass: 'grow flex flex-col'
 ---
 
 import Gallery from '../components/Gallery.astro';
 
 # Gallery
 
-<Gallery class="not-prose" />
+<Gallery class="not-prose grow" />

src/types/constants.ts

@@ -1,4 +1,5 @@
 import type { CATEGORIES } from '@/constants/collections';
+import type { TW_WIDTHS } from '@/constants/image';
 import type { PAGE_METADATA } from '@/constants/metadata';
 import type { NAVIGATION_ITEMS } from '@/constants/navigation';
 import type { MODES, THEMES } from '@/constants/theme';
@@ -21,3 +22,5 @@ export type ImageSizes = {
 };
 
 export type ChangeThemeCustomEvent = CustomEvent<{ theme: Theme }>;
+
+export type Breakpoint = keyof typeof TW_WIDTHS;

src/utils/array.ts

@@ -1,7 +1,8 @@
 export const getRandomElementFromArray = <T>(arr: T[]): T =>
   arr[Math.floor(Math.random() * arr.length)];
 
-export const sliceToMod4 = <T>(arr: T[]): T[] => arr.slice(0, arr.length - (arr.length % 4));
+export const sliceToModN = <T>(arr: T[], modN: number): T[] =>
+  arr.slice(0, arr.length - (arr.length % modN));
 
 /** returns tuple, must map to object with named keys */
 export const mergeArrays = <T extends unknown[]>(...arrays: T[]): T[number][][] =>

src/utils/gallery.ts

@@ -0,0 +1,32 @@
+import { GALLERY } from '@/constants/gallery';
+
+import type { Breakpoint } from '@/types/constants';
+
+const { PAGE_SIZE, INITIAL_PAGE } = GALLERY;
+
+// related to gallery grid css
+const breakpointToPageKey = {
+  XXS: 'XS',
+  XS: 'XS',
+  SM: 'SM',
+  MD: 'SM',
+  LG: 'LG',
+  XL: 'LG',
+  _2XL: 'LG',
+} as const;
+
+const defaultPageKey = 'LG' as const;
+
+export const getPageSize = (breakpoint: Breakpoint): number => {
+  const key = breakpointToPageKey[breakpoint] ?? defaultPageKey;
+  const pageSize = PAGE_SIZE[key];
+
+  return pageSize;
+};
+
+export const getInitialPage = (breakpoint: Breakpoint): number => {
+  const key = breakpointToPageKey[breakpoint] ?? defaultPageKey;
+  const initialPage = INITIAL_PAGE[key];
+
+  return initialPage;
+};